import React, { useState, useEffect } from "react";
//第三方UI库/组件
import { Modal, Form, Input, Button, Table, message, Tooltip } from "antd";
//类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
//umi 相关
import { useIntl } from 'umi';
//本地服务/接口
import { supplierDetail } from '../services';

interface Data {
  id: number;
  unit: string;
  category: string;
  accessTime: string;
  exitTime?: string;
  grayTime?: string;
  blackTime?: string;
}
//主体接口
interface SupplierAccessDetailModalProps {
  visible: boolean;
  onCancel: () => void;
  record?: any; // 你可以定义具体类型
}
//主体
const SupplierAccessDetailModal: React.FC<SupplierAccessDetailModalProps> = ({ visible, onCancel, record, }) => {
  //双语
  const intl = useIntl();
  //查询表单
  const [form] = Form.useForm();
  //列表渲染数据
  const [data, setData] = useState<Data[]>([]);
  //列表加载
  const [loading, setLoading] = useState(false);
  //列表分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0, });
  // 搜索
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    getList();
  };
  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    getList();
  };
  //列表方法
  const getList = async (page: number = 1, pageSize: number = 10) => {
    setLoading(true);
    try {
      const { code, data, msg, total } = await supplierDetail({ page, pageSize });
      if (code === 200) {
        setData(data);
        setPagination({ current: page, pageSize, total });
      } else {
        message.error(msg)      
      }
    } finally {
      setLoading(false);
    }
  };
  //初始化
  useEffect(() => {
    getList();
  }, [])
  // 列表头部数据
  const columns:ColumnsType<Data> = [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      align: "center",
      render: (_: any, __: any, idx: number) => idx + 1,
      width: 60,
    },
    {
      title: "准入单位",
      dataIndex: "unit",
      key: "unit",
      align: "left",
      ellipsis: true,
      render: (dom, record) => 
        <Tooltip title={record.unit}>
            {record.unit}
        </Tooltip>,
    },
    {
      title: "准入品类",
      dataIndex: "category",
      key: "category",
      align: "center",
    },
    {
      title: "准入时间",
      dataIndex: "accessTime",
      key: "accessTime",
      align: "center",
    },
    {
      title: "退出时间",
      dataIndex: "exitTime",
      key: "exitTime",
      align: "center",
    },
    {
      title: "进入灰名单时间",
      dataIndex: "grayTime",
      key: "grayTime",
      align: "center",
    },
    {
      title: "进入黑名单时间",
      dataIndex: "blackTime",
      key: "blackTime",
      align: "center",
    },
  ];
  return (
    <Modal
      visible={visible}
      title="准入明细"
      onCancel={onCancel}
      footer={null}
      width={1000}
      destroyOnClose
    >
      {/* 查询栏 */}
      <Form form={form} layout="inline" style={{ marginBottom: 16 }}>
        <Form.Item name="keyword">
          <Input
            placeholder="请输入准入单位或准入品类关键字"
            style={{ width: 300 }}
            allowClear
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      {/* 表格内容 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={pagination}
        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
      />
    </Modal>
  );
};

export default SupplierAccessDetailModal;
