import React, { useEffect, useState } from "react";
import { Form, Button, Table, Select, Input, DatePicker, Space, message } from "antd";
import { SearchOutlined, ReloadOutlined, PlusOutlined } from "@ant-design/icons";

import CreateBlacklistModal from './components/CreateBlacklistModal'

// mock 数据和选项省略（和上面一致）

// mock 数据与服务（实际请换为接口）
const orgOptions = [
    { label: "请选择", value: "" },
    { label: "中远海运特运", value: "中远海运特运" },
    { label: "中远海运散运", value: "中远海运散运" },
    { label: "中远海运物流", value: "中远海运物流" },
    { label: "中远海运广州公司", value: "中远海运广州公司" },
  ];
  const statusOptions = [
    { label: "请选择", value: "" },
    { label: "未开始", value: "未开始" },
    { label: "进行中", value: "进行中" },
    { label: "已结束", value: "已结束" },
  ];
  
// mock接口
const mockGetList = async ({ page = 1, pageSize = 10 }) => {
    // 生成数据
    const list = Array.from({ length: pageSize }).map((_, i) => {
      const idx = (page - 1) * pageSize + i + 1;
      return {
        id: idx,
        topic: ["中山市合创展包装材料有限公司等黑灰名单申请", "深圳市欧阳华斯电源有限公司等黑灰名单申请", "广东振兴塑胶机械有限公司等黑灰名单申请", "上海硕建建筑技术工程有限公司等黑灰名单申请"][i % 4],
        org: ["中远海运特运", "中远海运散运", "中远海运广州公司"][i % 3],
        dept: "采购部",
        time: `2024-10-2${6 - (i % 3)} 9:00`,
        status: ["未开始", "进行中", "已结束"][i % 3],
      }
    });
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: list,
          total: 188,
        });
      }, 300);
    });
  };
  // 查询记录状态
const recordStatusOptions = [
    { label: "请选择", value: "" },
    { label: "未开始", value: "未开始" },
    { label: "进行中", value: "进行中" },
    { label: "已结束", value: "已结束" },
  ];
  
const blacklistManage: React.FC = () => {
    const [form] = Form.useForm();
    const [data, setData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
    const [createVisible, setCreateVisible] = useState(false);
    // 查询接口
    const getList = async (page = 1, pageSize = 10) => {
        setLoading(true);
        // 可传查询条件 form.getFieldsValue()
        const { code, data: list, total } = await mockGetList({ page, pageSize });
        if (code === 200) {
          setData(list);
          setPagination(prev => ({ ...prev, current: page, pageSize, total }));
        }
        setLoading(false);
      };
  
  // 查询
  const handleSearch = () => {
    setPagination({ ...pagination, current: 1 });
    getList(1, pagination.pageSize);
  };
  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1 });
    getList(1, pagination.pageSize);
  };
  // 分页
  const handleTableChange = (pageConf: any) => {
    getList(pageConf.current, pageConf.pageSize);
  };
  // 发起申请
  const handleApply = () => {
    setCreateVisible(true)
  };
  
    useEffect(() => {
      getList();
    }, []);

  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      align: "center",
      width: 60,
      render: (_: any, __: any, idx: number) => idx + 1,
    },
    { title: "申请主题", dataIndex: "topic", key: "topic", align: "center" },
    { title: "发起单位", dataIndex: "org", key: "org", align: "center" },
    { title: "发起部门", dataIndex: "dept", key: "dept", align: "center" },
    { title: "发起时间", dataIndex: "time", key: "time", align: "center" },
    { title: "审批记录状态", dataIndex: "status", key: "status", align: "center" },
    {
      title: "操作",
      key: "option",
      align: "center",
      render: (record: any) => (
        <a style={{ color: "#1677ff" }} onClick={() => message.error('123')}>查看</a>
      ),
    },
  ];

  return (
    <>
     
      {/* 查询表单 */}
      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
        <Form.Item name="topic" label="申请主题">
          <Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} />
        </Form.Item>
        <Form.Item name="org" label="发起单位">
          <Select style={{ width: 150 }} allowClear options={orgOptions} />
        </Form.Item>
        <Form.Item name="status" label="审批记录状态">
          <Select style={{ width: 130 }} allowClear options={recordStatusOptions} />
        </Form.Item>
        <Form.Item name="time" label="发起时间">
          <DatePicker.RangePicker style={{ width: 220 }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>查询</Button>
          <Button style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
       {/* 顶部按钮区 */}
       <div style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleApply}>
          发起申请
        </Button>
      </div>
      {/* 表格 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          ...pagination,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: total => `共${total}条`,
        }}
        onChange={handleTableChange}
        bordered
      />

<CreateBlacklistModal visible={createVisible} onCancel={() => setCreateVisible(false)} onOk={() => setCreateVisible(false)} />
    </>
  );
};

export default blacklistManage;
