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 type { ColumnsType } from 'antd/es/table';
import CreateBlacklistModal from './components/CreateBlacklistModal'
import ViewBlacklistModal from './components/ViewBlacklistModal';
import { getPage } from './services'
interface ExitRecord {
  exitTheme: string;       // 申请主题
  deptId: string;          // 发起单位/部门（两列共用）
  createTime: string;      // 发起时间
  accessType: string;      // 审批记录状态
}
// mock 数据与服务（实际请换为接口）
const orgOptions = [
    { label: "请选择", value: "" },
    { label: "中远海运特运", value: "中远海运特运" },
    { label: "中远海运散运", value: "中远海运散运" },
    { label: "中远海运物流", value: "中远海运物流" },
    { label: "中远海运广州公司", value: "中远海运广州公司" },
  ];

  // 查询记录状态
const recordStatusOptions = [
    { label: "请选择", value: "" },
    { label: "未开始", value: "未开始" },
    { label: "进行中", value: "进行中" },
    { label: "已结束", value: "已结束" },
  ];
  
const supplierExitAudit: 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 [viewVisible, setViewVisible] = useState(false);
    const [selectedRecordId, setSelectedRecordId] = useState<string | null>(null);
    // 查询接口
    const getList = async (pageNo = 1, pageSize = 10) => {
        setLoading(true);
        // 可传查询条件 form.getFieldsValue()
        const { code, data } = await getPage({ pageNo, pageSize });
        if (code === 200) {
          setData(data.records);
          setPagination(prev => ({ ...prev, current: pageNo, pageSize, total: data.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)
  };
  const handleSelectOk = () => {
    getList();
    setCreateVisible(false);
  };
    useEffect(() => {
      getList();
    }, []);

  const columns: ColumnsType<ExitRecord> = [
    {
      title: "序号",
      dataIndex: "index",
      key: "index",
      align: "center",
      width: 60,
      render: (_: any, __: any, idx: number) => idx + 1,
    },
    { title: "申请主题", dataIndex: "exitTheme", key: "exitTheme", align: "center" },
    { title: "发起单位", dataIndex: "deptId", key: "deptId", align: "center" },
    { title: "发起部门", dataIndex: "deptId", key: "deptId", align: "center" },
    { title: "发起时间", dataIndex: "createTime", key: "createTime", align: "center" },
    { title: "审批记录状态", dataIndex: "approveStatusText", key: "approveStatusText", align: "center" },
    {
      title: "操作",
      key: "option",
      align: "center",
      render: (record: any) => (
        <a
          onClick={() => {
            setSelectedRecordId(record.id);
            setViewVisible(true);
          }}
        >
          查看
        </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>
      {/* 表格 */}
      <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={handleSelectOk} />
      <ViewBlacklistModal
        visible={viewVisible}
        recordId={selectedRecordId || ''}
        onCancel={() => setViewVisible(false)}
      />
    </>
  );
};

export default supplierExitAudit;
