import React, { useEffect, useState } from "react";
import LocalStorage from 'local-storage';
import { Spin } from "antd";

import AssetAction from "./AssetAction";
import { getQueryParam } from '../../../../util';
import { dispatch } from '../../../../model';

import './AssetDetailPage.less';
import { getDataAssetDetail } from "../../../../service/dataassetmanager";
import { appId } from "../../../../App";
import { AssetBrowseReference, AssetDraftReference } from "../../../../util/constant";

const AssetDetailPage = (props)=>{

  const [ data, setData ] = useState({ id: '', dirId: '', isDraft: '', catalog: '' });
  const [loading, setLoading] = useState(false)
  const [templateType, setTemplateType] = useState()
  const [draftAsset, setDraftAsset] = React.useState()

  const { id, dirId, isDraft, catalog } = data;
  
  useEffect(() => {

    const _id = getQueryParam('id', props.location?.search);
    const _dirId = getQueryParam('dirId', props.location?.search);
    const _isDraft = getQueryParam('isDraft', props.location?.search);
    const _catalog = getQueryParam('catalog', props.location?.search);

    setData({ id: _id, dirId: _dirId, isDraft: _isDraft, catalog: _catalog });
    getDataAssetDetail()

    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const title = React.useMemo(() => {
    if (draftAsset?.state === 'draft') return '资产目录详情(待提交)'
    if (draftAsset?.state === 'auditing') return '资产目录详情(审批中)'

    return '资产目录详情'
  }, [draftAsset])

  const getDataAssetDetail = () => {
    const _id = getQueryParam('id', props.location.search);
    const _dirId = getQueryParam('dirId', props.location.search);
    const _isDraft = getQueryParam('isDraft', props.location.search);

    let url = 'assetmanage.getDataAssetDetail';
    let payload = {
      dataAssetId: _id,
      dirId: _dirId||'',
      checkPermission: true
    };

    if (_isDraft === 'true') {
      url = 'assetmanage.getDraftDetail';
      payload = {
        params: {
          draftId: _id,
        }
      }
    }

    dispatch({
      type: url,
      payload: payload,
      callback: data => {
        setLoading(false);
        LocalStorage.set(`templateType-${appId}`, data?.templateType)
        setTemplateType(data?.templateType)
        if (_isDraft === 'true') {
          setDraftAsset(data)
        }
      },
      error: () => {
        setLoading(false);
      }
    })
  }
  

  return(
    <div className='asset-detail position-relative'>
      <div className='detail-header'>
        <span style={{ fontSize: 16, fontWeight: 'bold', color: '#000' }}>{title}</span>
      </div>
      <Spin spinning={loading}>
        <div className='detail-container'>
          <div className='detail-container-card'>
          {
            templateType && <AssetAction id={id} dirId={dirId} reference={(isDraft==='true')?AssetDraftReference:AssetBrowseReference} action='detail' catalog={catalog} readonly={true} />
          }
          </div>
        </div>
      </Spin>
    </div>
  )
}

export default AssetDetailPage;