import React from 'react';
import { Drawer, Form } from 'antd';

import AssetAction from './AssetAction';
import { AssetDraftReference } from '../../../../util/constant';
import { dispatch } from '../../../../model';

const AssetDetailDrawer = (props) => {
  const { onCancel, visible, id, dirId, action = 'detail', reference, readonly = false } = props;
  const [animated, setAnimated] = React.useState(true)
  const [draftAsset, setDraftAsset] = React.useState()

  React.useEffect(() => {
    if (visible) {
      setTimeout(() => {
        setAnimated(false)
      }, 300)

      if (reference === AssetDraftReference) {
        getDraft()
      }
    }
  }, [visible])

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

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

  const getDraft = () => {
    dispatch({
      type: 'assetmanage.getDraftDetail',
      payload: {
        params: {
          draftId: id,
        }
      },
      callback: data => {
        setDraftAsset(data)
      }
    })
  }

  return (
    <Drawer 
      visible={ visible }
      title={title}
      width='80%'
      placement="right"
      closable={ true }
      destroyOnClose
      onClose={() => {
        setAnimated(true);
        onCancel && onCancel();
      }}
    >
    {
      visible && !animated && <AssetAction reference={reference} id={id} dirId={dirId} action={action} readonly={readonly} onChange={() => {
        onCancel?.(true);
      }} />
    }
    </Drawer>
  )
}

export default AssetDetailDrawer;