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

import { mockList } from './services'
// 下拉数据接口
type OptionType = { label: string; value: string };

// 表格数据接口
interface Data {
  id: number;
  name: string;
  category: string;
  region: string;
  creator: string;
  validDate: string;
  applyDate: string;
  processStatus: string;
  result: string;
}

 

// 流程状态、审批结果 下拉选项
const processOptions: OptionType[] = [
  { label: "请选择", value: "" },
  { label: "未开始", value: "未开始" },
  { label: "进行中", value: "进行中" },
  { label: "已结束", value: "已结束" },
];
const resultOptions: OptionType[] = [
  { label: "请选择", value: "" },
  { label: "通过", value: "通过" },
  { label: "未通过", value: "未通过" },
];

const CategoryLibraryManage: 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 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: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '品类',
      dataIndex: 'category',
      key: 'category',
      align: 'center',
    },
    {
      title: '区域',
      dataIndex: 'region',
      key: 'region',
      align: 'center',
    },
    {
      title: '创建单位',
      dataIndex: 'creator',
      key: 'creator',
      align: 'center',
    },
    {
      title: '有效期至',
      dataIndex: 'validDate',
      key: 'validDate',
      align: 'center',
    },
    {
      title: '申请时间',
      dataIndex: 'applyDate',
      key: 'applyDate',
      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={() => { /* 审批记录弹窗 */ }}>审批记录</a>
        </Space>
      ),
    },
  ];

  return (
    <>
      {/* 查询栏 */}
      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 12 }}
      >
        <Form.Item name="name" label="品类库名称">
          <Input placeholder="请输入供应商名称关键字" style={{ width: 180 }} />
        </Form.Item>
        <Form.Item name="creator" label="创建单位">
          <Select style={{ width: 150 }} allowClear>
            <Select.Option value="">请选择</Select.Option>
            <Select.Option value="集团">集团</Select.Option>
            <Select.Option value="分公司">分公司</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
      />
    </>
  );
};

export default CategoryLibraryManage;
