import React, { useEffect, useState } from "react";
import { Form, Button, Table, Select, Input, Space, DatePicker, message } from "antd";
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
// 类型定义
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';

// Mock数据
const MOCK_DATA = Array.from({ length: 188 }).map((_, idx) => ({
  id: idx + 1,
  subject: `${idx % 2 ? '中山市合创展包装材料有限公司' : '上海硕建建筑技术工程有限公司'}等黑灰名单申请`,
  unit: idx % 3 === 0 ? '中远海运特运' : idx % 3 === 1 ? '中远海运散运' : '中远海运广州公司',
  dept: '采购部',
  applyTime: `2024-10-${String(26 - (idx % 5)).padStart(2, "0")} ${idx % 2 ? '9:00' : '10:00'}`,
  status: idx < 3 ? '未开始' : idx < 7 ? '进行中' : '已结束',
  result: idx < 8 ? '' : (idx % 2 ? '通过' : '驳回'),
}));

// 状态、结果选项
const statusOptions = [
  { label: "请选择", value: "" },
  { label: "未开始", value: "未开始" },
  { label: "进行中", value: "进行中" },
  { label: "已结束", value: "已结束" },
];
const resultOptions = [
  { label: "请选择", value: "" },
  { label: "通过", value: "通过" },
  { label: "驳回", value: "驳回" },
];

// 列表类型
interface DataType {
  id: number;
  subject: string;
  unit: string;
  dept: string;
  applyTime: string;
  status: string;
  result: string;
}

const BlacklistAudit: React.FC = () => {
  // 搜索表单
  const [form] = Form.useForm();
  // 列表数据
  const [data, setData] = useState<DataType[]>([]);
  // 加载
  const [loading, setLoading] = useState(false);
  // 分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 10,
    total: MOCK_DATA.length,
  });

  // 查询
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    getList(1, pagination.pageSize);
  };

  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    getList(1, pagination.pageSize);
  };

  // 获取列表（模拟接口，支持分页和部分筛选）
  const getList = async (page: number = 1, pageSize: number = 10) => {
    setLoading(true);
    setTimeout(() => {
      let filtered = MOCK_DATA;
      const values = form.getFieldsValue();
      if (values.subject) {
        filtered = filtered.filter(item => item.subject.includes(values.subject));
      }
      if (values.unit) {
        filtered = filtered.filter(item => item.unit === values.unit);
      }
      if (values.status) {
        filtered = filtered.filter(item => item.status === values.status);
      }
      if (values.result) {
        filtered = filtered.filter(item => item.result === values.result);
      }
      // 日期筛选略
      setData(filtered.slice((page - 1) * pageSize, page * pageSize));
      setPagination({ current: page, pageSize, total: filtered.length });
      setLoading(false);
    }, 300);
  };

  // 初始化
  useEffect(() => {
    getList();
  }, []);

  // 列
  const columns: ColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      align: "center",
      width: 60,
      render: (_: any, __: any, idx: number) =>
        (pagination.current! - 1) * pagination.pageSize! + idx + 1,
    },
    { title: "申请主题", dataIndex: "subject", key: "subject", align: "center", ellipsis: true },
    { title: "发起单位", dataIndex: "unit", key: "unit", align: "center" },
    { title: "发起部门", dataIndex: "dept", key: "dept", align: "center" },
    { title: "申请时间", dataIndex: "applyTime", key: "applyTime", align: "center" },
    { title: "流程状态", dataIndex: "status", key: "status", align: "center" },
    { title: "审批结果", dataIndex: "result", key: "result", align: "center" },
    {
      title: "操作",
      key: "option",
      align: "center",
      render: (record: DataType) => (
        <Space>
          <a style={{ color: "#1677ff" }}>审批</a>
          <a style={{ color: "#1677ff" }}>审批记录</a>
        </Space>
      ),
    },
  ];

  // 单元下拉（mock示例）
  const unitOptions = [
    { label: "请选择", value: "" },
    { label: "中远海运特运", value: "中远海运特运" },
    { label: "中远海运散运", value: "中远海运散运" },
    { label: "中远海运广州公司", value: "中远海运广州公司" },
  ];

  return (
    <div>
      {/* 搜索区 */}
      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
        <Form.Item name="subject" label="申请主题">
          <Input placeholder="请输入供应商名称关键字" style={{ width: 220 }} allowClear />
        </Form.Item>
        <Form.Item name="unit" label="发起单位">
          <Select style={{ width: 160 }}>
            {unitOptions.map(opt => <Select.Option value={opt.value} key={opt.value}>{opt.label}</Select.Option>)}
          </Select>
        </Form.Item>
        <Form.Item name="applyTime" label="申请时间">
          <DatePicker.RangePicker style={{ width: 220 }} />
        </Form.Item>
        <Form.Item name="status" label="流程状态">
          <Select style={{ width: 120 }}>
            {statusOptions.map(opt => <Select.Option value={opt.value} key={opt.value}>{opt.label}</Select.Option>)}
          </Select>
        </Form.Item>
        <Form.Item name="result" label="审批结果">
          <Select style={{ width: 120 }}>
            {resultOptions.map(opt => <Select.Option value={opt.value} key={opt.value}>{opt.label}</Select.Option>)}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch} style={{ marginRight: 8 }}>查询</Button>
          <Button icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          ...pagination,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: t => `共${t}条`,
          onChange: (current, pageSize) => getList(current, pageSize),
        }}
        bordered
        style={{ background: '#fff' }}
      />
    </div>
  );
};

export default BlacklistAudit;
