// src/pages/SupplierEntryReview/index.tsx

import React, { useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import { Form, Select, Button, Row, Col, Tag, Space, message } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

// 示例数据
const tableData = [
  {
    id: 1,
    work: '燃料XXX有限公司',
    unit: '散运',
    dept: '采购部',
    method: '线上',
    applyTime: '2025-03-03 09:30',
    status: '未开始',
    result: '',
  },
  {
    id: 2,
    work: '备件XXX有限公司',
    unit: '散运二级单位',
    dept: '业务部',
    method: '线下',
    applyTime: '2025-03-03 09:30',
    status: '未开始',
    result: '',
  },
  {
    id: 3,
    work: '电机XXX有限公司',
    unit: '散运',
    dept: '采购部',
    method: '线上',
    applyTime: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 4,
    work: '钢板XXX有限公司',
    unit: '散运',
    dept: '业务部',
    method: '线下',
    applyTime: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 5,
    work: '燃料XXX有限公司',
    unit: '散运',
    dept: '采购部',
    method: '线上',
    applyTime: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 6,
    work: '备件XXX有限公司',
    unit: '散运二级单位',
    dept: '业务部',
    method: '线下',
    applyTime: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 7,
    work: '电机XXX有限公司',
    unit: '散运',
    dept: '采购部',
    method: '线上',
    applyTime: '2025-03-03 09:30',
    status: '已结束',
    result: '通过',
  },
  {
    id: 8,
    work: '钢板XXX有限公司',
    unit: '散运二级单位',
    dept: '业务部',
    method: '线下',
    applyTime: '2025-03-03 09:30',
    status: '已结束',
    result: '驳回',
  },
  {
    id: 9,
    work: '燃料XXX有限公司',
    unit: '散运',
    dept: '采购部',
    method: '线上',
    applyTime: '2025-03-03 09:30',
    status: '已结束',
    result: '驳回',
  },
  {
    id: 10,
    work: '钢板XXX有限公司',
    unit: '散运二级单位',
    dept: '业务部',
    method: '线下',
    applyTime: '2025-03-03 09:30',
    status: '已结束',
    result: '驳回',
  },
];

const statusColorMap: Record<string, string> = {
  '未开始': 'default',
  '进行中': 'processing',
  '已结束': 'success',
};

const resultColorMap: Record<string, string> = {
  '通过': 'success',
  '驳回': 'error',
};

const columns: ProColumns<any>[] = [
  {
    title: '序号',
    dataIndex: 'index',
    valueType: 'index',
    width: 48,
    align: 'center',
  },
  {
    title: '准入工作',
    dataIndex: 'work',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '准入单位',
    dataIndex: 'unit',
    align: 'center',
  },
  {
    title: '准入部门',
    dataIndex: 'dept',
    align: 'center',
  },
  {
    title: '准入方式',
    dataIndex: 'method',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'applyTime',
    align: 'center',
    sorter: (a, b) => new Date(a.applyTime).getTime() - new Date(b.applyTime).getTime(),
  },
  {
    title: '流程状态',
    dataIndex: 'status',
    align: 'center',
    render: (_, record) =>
      <Tag color={statusColorMap[record.status] || 'default'}>{record.status}</Tag>,
  },
  {
    title: '审批结果',
    dataIndex: 'result',
    align: 'center',
    render: (val: string) =>
      val ? <Tag color={resultColorMap[val] || 'default'}>{val}</Tag> : null,
  },
  {
    title: '操作',
    dataIndex: 'option',
    align: 'center',
    valueType: 'option',
    render: (_, record) => (
      <Space>
        <a>审批</a>
        <a>审批记录</a>
      </Space>
    ),
  },
];

const statusOptions = [
  { label: '未开始', value: '未开始' },
  { label: '进行中', value: '进行中' },
  { label: '已结束', value: '已结束' },
];

const unitOptions = [
  { label: '散运', value: '散运' },
  { label: '散运二级单位', value: '散运二级单位' },
];

const deptOptions = [
  { label: '采购部', value: '采购部' },
  { label: '业务部', value: '业务部' },
];

const methodOptions = [
  { label: '线上', value: '线上' },
  { label: '线下', value: '线下' },
];

const categoryOptions = [
  { label: '全部', value: '' },
];

const reviewResultOptions = [
  { label: '全部', value: '' },
  { label: '通过', value: '通过' },
  { label: '驳回', value: '驳回' },
];

const SupplierEntryReview: React.FC = () => {
  const actionRef = useRef<ActionType>();

  // 自定义查询表单
  const searchFormRender = (
    <Form layout="vertical">
      <Row gutter={16}>
        <Col span={4}>
          <Form.Item name="method" label="准入方式">
            <Select options={[{ label: '请选择', value: '' }, ...methodOptions]} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="unit" label="准入单位">
            <Select options={[{ label: '请选择', value: '' }, ...unitOptions]} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="dept" label="准入部门">
            <Select options={[{ label: '请选择', value: '' }, ...deptOptions]} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="category" label="准入品类">
            <Select options={[{ label: '请选择', value: '' }, ...categoryOptions]} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="status" label="流程状态">
            <Select options={[{ label: '请选择', value: '' }, ...statusOptions]} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="result" label="审批结果">
            <Select options={[{ label: '请选择', value: '' }, ...reviewResultOptions]} allowClear />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col>
          <Button type="primary" icon={<SearchOutlined />} style={{ marginRight: 8 }}>查询</Button>
          <Button icon={<ReloadOutlined />}>重置</Button>
        </Col>
      </Row>
    </Form>
  );

  return (
    <div>
      {/* 查询表单 */}
      {searchFormRender}

      {/* 表格 */}
      <ProTable
        columns={columns}
        actionRef={actionRef}
        dataSource={tableData}
        rowKey="id"
        search={false}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize: 10,
          total: 188,
          current: 1,
        }}
        options={false}
        
      />
    </div>
  );
};

export default SupplierEntryReview;