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

// 审批记录数据类型
interface ApproveRecord {
  id: number;
  step: string;           // 流程节点
  approver: string;       // 审批人
  status: string;         // 审批状态
  remark: string;         // 审批意见
  time: string;           // 审批时间
}

// mock 获取审批记录接口
const mockFetchApproveRecords = async (entryId: number | string) => {
  return Promise.resolve({
    code: 200,
    data: [
      {
        id: 1,
        step: "申请提交",
        approver: "张三",
        status: "提交",
        remark: "请审批",
        time: "2025-03-03 14:20",
      },
      {
        id: 2,
        step: "一级审批",
        approver: "李四",
        status: "同意",
        remark: "同意入库",
        time: "2025-03-04 09:20",
      },
      {
        id: 3,
        step: "二级审批",
        approver: "王五",
        status: "驳回",
        remark: "资料不全，请补充",
        time: "2025-03-05 11:45",
      },
    ],
    msg: "success"
  });
};

interface ApproveRecordModalProps {
  visible: boolean;
  entryId?: number | string;
  onCancel: () => void;
}
 
const ApproveRecordModal: React.FC<ApproveRecordModalProps> = ({
  visible,
  entryId,
  onCancel,
}) => {
  const [loading, setLoading] = useState(false);
  const [records, setRecords] = useState<ApproveRecord[]>([]);
  // 供应商数据（受控）
  const [suppliers, setSuppliers] = useState([]);
  useEffect(() => {
    if (visible && entryId) {
      setLoading(true);
      mockFetchApproveRecords(entryId).then(res => {
        if (res.code === 200) setRecords(res.data);
      }).finally(() => setLoading(false));
    }
    if (!visible) setRecords([]);
  }, [visible, entryId]);

  const columns = [
    { title: '流程节点', dataIndex: 'step', align: 'center' },
    { title: '审批人', dataIndex: 'approver', align: 'center' },
    { title: '审批状态', dataIndex: 'status', align: 'center' },
    { title: '审批意见', dataIndex: 'remark', align: 'center' },
    { title: '审批时间', dataIndex: 'time', align: 'center' },
  ];

  return (
    <Modal
      visible={visible}
      title="审批记录"
      footer={null}
      onCancel={onCancel}
      width={700}
      destroyOnClose
      bodyStyle={{ padding: 20 }}
    >
      <div style={{ marginBottom: 18 }}>
        <Descriptions
          title="品类库基本信息"
          bordered
          column={2}
          size="small"
          style={{ marginBottom: 18, background: '#fff', borderRadius: 4 }}
          labelStyle={{ width: 110, fontWeight: 500 }}
        >
          {/* <Descriptions.Item label="品类库名称">
            {categoryInfo?.name || '燃油'}
          </Descriptions.Item>
          <Descriptions.Item label="有效期至">
            {categoryInfo?.validDate || '2028-03-31'}
          </Descriptions.Item>
          <Descriptions.Item label="负责人">
            {categoryInfo?.manager || '李四'}
          </Descriptions.Item>
          <Descriptions.Item label="品类结构">
            {categoryInfo?.structure || '货物 燃料'}
          </Descriptions.Item> */}
        </Descriptions>
      </div>


      {/* 供应商表格 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '8px 0 8px 0',
        fontSize: 16,
        fontWeight: 500,
      }}>
        <span>选择供应商</span>

      </div>
      <Table
        columns={columns}
        dataSource={suppliers}
        rowKey="id"
        pagination={false}
        bordered
      />
    </Modal>
  );
};

export default ApproveRecordModal;
 

