import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';

import { coscoAccessWorkCategory } from '../services'

//数据接口
interface Data {
  coscoAccessWork: coscoAccessWorks;
  coscoAccessSupplierList: coscoAccessSupplierLists[];
  coscoAccessCategoryList: coscoAccessCategoryLists[];
}

interface coscoAccessCategoryLists {
  categoryName: string;
  [property: string]: any;
}
interface coscoAccessSupplierLists {
  supplierName: string;
  [property: string]: any;
}
interface coscoAccessWorks {
  deptId: string;
  reviewStatusText: string;
}

const ViewModal: React.FC<{
  visible: boolean;
  record?: any;
  onCancel: () => void;
}> = ({ visible, record = {}, onCancel }) => {
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  //初始化
  useEffect(() => {
    if (record.id) {
      coscoAccessWorkCategory(record.id).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          setData(data)
        }
      })
    }
  }, [record])

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel}>
      {data && (
        <Descriptions bordered column={1}>
          <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptId}</Descriptions.Item>
          <Descriptions.Item label="准入供应商">
            {data.coscoAccessSupplierList.map((item) => {
              return (
                <div style={{ margin: '5px' }}>{item.supplierName}</div>
              )
            })}
          </Descriptions.Item>
          <Descriptions.Item label="申请准入品类">
            {data.coscoAccessCategoryList.map((item) => {
              return (
                <div style={{ margin: '5px' }}>{item.categoryName}</div>
              )
            })}
          </Descriptions.Item>
          
          <Descriptions.Item label="审批结果">{data.coscoAccessWork.reviewStatusText}</Descriptions.Item>
        </Descriptions>
      )}
    </Modal>
  );
};

export default ViewModal;