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 ApproveRecordModal from './components/ApproveRecordModal'

// 下拉选项类型
type OptionType = { label: string; value: string };

// 列表数据接口
interface Data {
  id: number;
  categoryLib: string;
  region: string;
  supplier: string;
  applier: string;
  applyTime: string;
  processStatus: string;
  result: string;
}

// mock接口
const mockList = async (params?: any) => {
  return Promise.resolve({
    code: 200,
    data: [
      {
        id: 1,
        categoryLib: "燃油库",
        region: "新加坡",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "张三",
        applyTime: "2025-03-03 14:20",
        processStatus: "未开始",
        result: "",
      },
      {
        id: 2,
        categoryLib: "备件库",
        region: "全球",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "李四",
        applyTime: "2025-03-03 14:20",
        processStatus: "未开始",
        result: "",
      },
      {
        id: 3,
        categoryLib: "燃油库",
        region: "新加坡",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "张三",
        applyTime: "2025-03-03 14:20",
        processStatus: "进行中",
        result: "",
      },
      {
        id: 4,
        categoryLib: "备件库",
        region: "全球",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "李四",
        applyTime: "2025-03-03 14:20",
        processStatus: "进行中",
        result: "",
      },
      {
        id: 5,
        categoryLib: "燃油库",
        region: "新加坡",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "张三",
        applyTime: "2025-03-03 14:20",
        processStatus: "进行中",
        result: "",
      },
      {
        id: 6,
        categoryLib: "备件库",
        region: "全球",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "李四",
        applyTime: "2025-03-03 14:20",
        processStatus: "进行中",
        result: "",
      },
      {
        id: 7,
        categoryLib: "燃油库",
        region: "新加坡",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "张三",
        applyTime: "2025-03-03 14:20",
        processStatus: "已结束",
        result: "通过",
      },
      {
        id: 8,
        categoryLib: "备件库",
        region: "全球",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "李四",
        applyTime: "2025-03-03 14:20",
        processStatus: "已结束",
        result: "驳回",
      },
      {
        id: 9,
        categoryLib: "燃油库",
        region: "新加坡",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "张三",
        applyTime: "2025-03-03 14:20",
        processStatus: "已结束",
        result: "驳回",
      },
      {
        id: 10,
        categoryLib: "备件库",
        region: "全球",
        supplier: "中山市合创展包装材料有限公司等3家公司",
        applier: "李四",
        applyTime: "2025-03-03 14:20",
        processStatus: "已结束",
        result: "驳回",
      },
    ],
    total: 188,
    msg: "success",
  });
};

const processOptions: OptionType[] = [
  { label: "请选择", value: "" },
  { label: "未开始", value: "未开始" },
  { label: "进行中", value: "进行中" },
  { label: "已结束", value: "已结束" },
];
const resultOptions: OptionType[] = [
  { label: "请选择", value: "" },
  { label: "通过", value: "通过" },
  { label: "驳回", value: "驳回" },
];
const regionOptions: OptionType[] = [
  { label: "请选择", value: "" },
  { label: "新加坡", value: "新加坡" },
  { label: "全球", value: "全球" },
];

const SupplierEntryReview: React.FC = () => {
  // 搜索表单
  const [form] = Form.useForm();
  // 列表数据
  const [data, setData] = useState<Data[]>([]);
  // 加载
  const [loading, setLoading] = useState(false);
  // 分页
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 188 });
  // 添加供应商弹窗
    const [currentStoreId, setCurrentStoreId] = useState<number | null>(null);
  // 库内供应商数量弹窗
  const [approveRecordVisible, setApproveRecordVisible] = useState(false);
  // 查询
  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, total, msg } = await mockList({ page, pageSize });
      if (code === 200) {
        setData(data);
        setPagination({ current: page, pageSize, total });
      } else {
        message.error(msg);
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getList();
  }, []);

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60,
      render: (_: any, __: any, idx: number) => idx + 1,
    },
    {
      title: '品类库',
      dataIndex: 'categoryLib',
      key: 'categoryLib',
      align: 'center',
    },
    {
      title: '区域',
      dataIndex: 'region',
      key: 'region',
      align: 'center',
    },
    {
      title: '入库供应商',
      dataIndex: 'supplier',
      key: 'supplier',
      align: 'center',
    },
    {
      title: '申请人',
      dataIndex: 'applier',
      key: 'applier',
      align: 'center',
    },
    {
      title: '申请时间',
      dataIndex: 'applyTime',
      key: 'applyTime',
      align: 'center',
    },
    {
      title: '流程状态',
      dataIndex: 'processStatus',
      key: 'processStatus',
      align: 'center',
    },
    {
      title: '审批结果',
      dataIndex: 'result',
      key: 'result',
      align: 'center',
    },
    {
      title: '操作',
      key: 'option',
      align: 'center',
      render: (record: any) => (
        <Space>
          <a style={{ color: '#1677ff' }} onClick={() => { setCurrentStoreId(record.id); setApproveRecordVisible(true); }}>审批记录</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      {/* 查询栏 */}
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 12 }}
      >
        <Form.Item name="categoryLib" label="品类库">
          <Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} />
        </Form.Item>
        <Form.Item name="region" label="区域">
          <Select style={{ width: 120 }} allowClear>
            {regionOptions.map(opt => (
              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="applyTime" label="申请时间">
          <DatePicker.RangePicker style={{ width: 220 }} />
        </Form.Item>
        <Form.Item name="processStatus" label="流程状态">
          <Select style={{ width: 120 }} allowClear>
            {processOptions.map(opt => (
              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="result" label="审批结果">
          <Select style={{ width: 120 }} allowClear>
            {resultOptions.map(opt => (
              <Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
            查询
          </Button>
          <Button icon={<ReloadOutlined />} onClick={handleReset} style={{ marginLeft: 8 }}>
            重置
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          ...pagination,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        onChange={pg => getList(pg.current!, pg.pageSize!)}
        bordered
      />
      <ApproveRecordModal
        visible={approveRecordVisible}
        storeId={currentStoreId}
        onCancel={() => setApproveRecordVisible(false)}
      />
    </>
  );
};

export default SupplierEntryReview;
