import React, { useState, useEffect, useMemo } from 'react';
import { Form, Modal, Steps } from 'antd';
import styles from './DetailModal.less';

const { Step } = Steps;
// 新建
function DetailModal(props) {
  const { visible, onClose, onOk, form, data, flowList = [], disabled, loading } = props;
  const [codes, setCodes] = useState({
    type: '',
    industry: '',
    location: '',
    name: '',
    version: '',
  });

  useEffect(() => {
    if (!visible || !data.id) return;
    setCodes({
      type: data.TypeInfo?.code,
      industry: data.IndustryInfo?.code,
      location: data.location_code,
      name: data.name,
      version: data.version,
    });
  }, [data, visible]);

  const renderDetail = () => (
    <>
      <div className={styles.subTitle}>项目详情</div>
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
        <Form.Item className={styles.formItem} label="项目名称">
          {data.project_name}
        </Form.Item>
        {data.TypeInfo && (
          <Form.Item className={styles.formItem} label="项目类别">
            {data.TypeInfo?.name}
          </Form.Item>
        )}
        <Form.Item className={styles.formItem} label="流程">
          {flowList.find(item => item.id == data.flow_id)?.name}
        </Form.Item>
        {data.type_id != 7 && (
          <>
            <Form.Item className={styles.formItem} label="行业名称">
              {data.IndustryInfo?.name}
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目地区">
              {data.location}({data.location_code})
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目简称">
              {data.name}
            </Form.Item>
            <Form.Item className={styles.formItem} label="项目批次">
              {data.version}期
            </Form.Item>
          </>
        )}
        {data.AuthorUser && (
          <Form.Item className={styles.formItem} label="售前项目经理">
            {data.AuthorUser.CName}
          </Form.Item>
        )}
        {data.AuthorDepInfo && (
          <Form.Item className={styles.formItem} label="所属部门">
            {data.AuthorDepInfo.Name}
          </Form.Item>
        )}
        {data.project_full_code && (
          <Form.Item className={styles.formItem} label="项目编号">
            {data.project_full_code}
          </Form.Item>
        )}
        {data.WtyManager && (
          <Form.Item className={styles.formItem} label="质保经理">
            {data.WtyManager.CName}
          </Form.Item>
        )}
        {data.OptManager && (
          <Form.Item className={styles.formItem} label="运营经理">
            {data.OptManager.CName}
          </Form.Item>
        )}
      </Form>
    </>
  );

  const flow = useMemo(() => {
    if (!data.flow_id) return {};
    return flowList.find(item => item.id == data.flow_id) || {};
  }, [flowList, data]);

  const current = useMemo(() => {
    if (!data.node_id) return 0;
    return flow.Nodes?.findIndex(item => item.id == data.node_id);
  }, [flowList, data]);

  const getAudits = nodeInfo => {
    switch (nodeInfo.id) {
      case 11:
        return '执行项目经理';
      case 12:
        return '运营经理';
      case 13:
        return '执行项目经理';
      case 14:
        return '质保经理';
      default:
        return (nodeInfo.NodeAudits || []).map(item => item.AuthorRoleInfo.Name).join('，');
    }
  };

  const renderAuth = () => (
    <div className={styles.authDetail}>
      <div className={styles.subTitle}>审核详情</div>
      <Steps className={styles.auth} current={current}>
        {/* <Steps current={data?.node_id}> */}
        {(flow.Nodes || []).map(item => (
          <Step key={item.id} title={item.node} description={`审批人：${getAudits(item)}`} />
        ))}
      </Steps>
    </div>
  );

  return (
    <Modal title="项目详情" width={800} visible={visible} onCancel={onClose} footer={null}>
      {/* {data.type_id != 7 && renderDetail()} */}
      {renderDetail()}
      {data.audit_status != 0 && renderAuth()}
    </Modal>
  );
}
export default DetailModal;
