// 审批详情
import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Steps, Button, Tooltip } from 'antd';
import { useParams, useRequest, useNavigate, useModel } from 'umi';
import AuditModal from './components/AuditModal';
import FormAndFilesNode from './components/FormAndFilesNode';
import { queryAuditDetail, audit } from '@/services/boom';
import PageContent from '@/components/PageContent';

function OaAuditDetail(props) {
  const [auditVisible, setAuditVisible] = useState(false);
  const { oaId, id } = useParams();

  const { data, loading, refresh } = useRequest(queryAuditDetail, {
    defaultParams: [{ id }],
  });
  const {
    current_seq,
    form,
    OaAuditList,
    Files = [],
    audit_status,
    AuditorInfo,
  } = data || {};
  const {
    initialState: { user },
  } = useModel('@@initialState');

  const getDescription = (node) => {
    let str = node?.AuditRoleInfo
      ? `审批人：${node?.AuditRoleInfo.Name || '-'}`
      : `审批人：${node?.AuditorUser.CName || '-'}`;
    if (node.desc) {
      return (
        <div>
          {str}
          <div>
            <Tooltip title={node.desc}>
              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
                审批意见
              </span>
            </Tooltip>
          </div>
        </div>
      );
    }
    return str;
  };

  const btns = useMemo(() => {
    if (!user || !data) return;
    if (
      user.ID == AuditorInfo?.ID &&
      // 0 待审核； 1  上级审批通过
      (audit_status === 0 || audit_status === 1)
    ) {
      return [
        <Button
          key={1}
          style={{ marginRight: 10 }}
          type="primary"
          onClick={() => setAuditVisible(1)}
        >
          审批通过
        </Button>,
        <Button key={2} onClick={() => setAuditVisible(2)} danger>
          审批拒绝
        </Button>,
      ];
    }
    return [];
  }, [user, data]);

  return (
    <PageContent extra={btns} loading={loading}>
      <Steps
        style={{ marginBottom: 20 }}
        current={audit_status == 3 ? OaAuditList.length : current_seq - 1}
        status={audit_status == 2 ? 'error' : 'process'}
        items={OaAuditList?.map((item) => ({
          title: item.seq_name,
          description: getDescription(item),
        }))}
      ></Steps>
      <FormAndFilesNode formData={form} fileList={Files} />

      <AuditModal
        id={id}
        visible={auditVisible}
        onClose={() => setAuditVisible(false)}
        onOk={refresh}
      />
    </PageContent>
  );
}

export default OaAuditDetail;