import React, { useEffect, useState } from "react";
import { Modal, Button, Table, Descriptions, Spin, message } from "antd";
import {coscoSupplierexit } from "../services"; // 假设的接口
import type { ColumnsType } from 'antd/es/table';

interface Supplier {
    id: number; // 作为 rowKey 用于唯一标识
    supplierName: string; // 供应商名称
    unit: string;         // 准入部门
    accessTime: string;   // 准入时间
    categoryName: string; // 准入品类
    lastEval: string;     // 最近一次评价
    lastEvalDate: string; // 评价时间
    supplierId: string;
    categoryId: string;
  }
interface DetailData {
  exitTheme: string;
  deptName: string;
  deptId: string;
  exitReason: string;
}

interface ViewBlacklistModalProps {
  visible: boolean;
  onCancel: () => void;
  recordId: string; // 用于查询详情数据
}

const ViewBlacklistModal: React.FC<ViewBlacklistModalProps> = ({
  visible,
  onCancel,
  recordId,
}) => {
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState<DetailData | null>(null);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const {  code, data } = await coscoSupplierexit(recordId)
      if (code == 200) {
        setDetail(data.coscoSupplierexit);
      } else {
        message.error("获取详情失败");
      }

      if (code == 200) {
        setSuppliers(data.coscoSupplierexitSupplierCategoryList || []);
      } else {
        message.error("获取供应商列表失败");
      }
    } catch (error) {
      message.error("获取数据异常");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (visible && recordId) {
      fetchData();
    }
  }, [visible, recordId]);

  const columns:ColumnsType<Supplier> = [
    { title: "供应商名称", dataIndex: "supplierName", align: "center" },
    { title: "准入部门", dataIndex: "unit", align: "center" },
    { title: "准入时间", dataIndex: "accessTime", align: "center" },
    { title: "准入品类", dataIndex: "categoryName", align: "center" },
    { title: "最近一次评价", dataIndex: "lastEval", align: "center" },
    { title: "评价时间", dataIndex: "lastEvalDate", align: "center" },
  ];

  return (
    <Modal
      title="供应商退出详情"
      visible={visible}
      onCancel={onCancel}
      width={900}
      footer={<Button onClick={onCancel}>关闭</Button>}
      destroyOnClose
      bodyStyle={{ padding: "36px 36px 16px" }}
    >
      <Spin spinning={loading}>
        {detail && (
          <Descriptions
            title="退出信息"
            column={1}
            labelStyle={{ width: 120 }}
            bordered
            style={{ marginBottom: 24 }}
          >
            <Descriptions.Item label="申请主题">{detail.exitTheme}</Descriptions.Item>
            <Descriptions.Item label="发起部门">{detail.deptId}</Descriptions.Item>
            <Descriptions.Item label="退出原因" >{detail.exitReason}</Descriptions.Item>
          </Descriptions>
        )}

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

export default ViewBlacklistModal;
