import React, { useState, useEffect } 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, DatePicker, Input } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { getApprovePage } from './services'

const { RangePicker } = DatePicker;

// 示例数据
const tableData = [
  {
    id: 1,
    name: '中山市合创展包装材料有限公司',
    region: '境内',
    type: '民营企业',
    category: '船用物料,添加剂',
    time: '2025-03-03 09:30',
    status: '未开始',
    result: '',
  },
  {
    id: 2,
    name: '深圳市欧阳华斯电源有限公司',
    region: '境内',
    type: '民营企业',
    category: '绳机物料',
    time: '2025-03-03 09:30',
    status: '未开始',
    result: '',
  },
  {
    id: 3,
    name: '广东振兴塑胶机械有限公司',
    region: '境内',
    type: '民营企业',
    category: '船用物料',
    time: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 4,
    name: '上海硕建建筑技术工程有限公司',
    region: '境内',
    type: '民营企业',
    category: '绳机物料',
    time: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 5,
    name: '中山市合创展包装材料有限公司',
    region: '境内',
    type: '民营企业',
    category: '船用物料',
    time: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 6,
    name: '深圳市欧阳华斯电源有限公司',
    region: '境内',
    type: '民营企业',
    category: '绳机物料',
    time: '2025-03-03 09:30',
    status: '进行中',
    result: '',
  },
  {
    id: 7,
    name: '广东振兴塑胶机械有限公司',
    region: '境内',
    type: '民营企业',
    category: '船用物料',
    time: '2025-03-03 09:30',
    status: '已结束',
    result: '通过',
  },
  {
    id: 8,
    name: '上海硕建建筑技术工程有限公司',
    region: '境内',
    type: '民营企业',
    category: '绳机物料',
    time: '2025-03-03 09:30',
    status: '已结束',
    result: '驳回',
  },
  {
    id: 9,
    name: '广东振兴塑胶机械有限公司',
    region: '境内',
    type: '民营企业',
    category: '船用物料',
    time: '2025-03-03 09:30',
    status: '已结束',
    result: '驳回',
  },
  {
    id: 10,
    name: '上海硕建建筑技术工程有限公司',
    region: '境内',
    type: '民营企业',
    category: '绳机物料',
    time: '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: 'name',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '境内/境外',
    dataIndex: 'region',
    align: 'center',
  },
  {
    title: '企业类型',
    dataIndex: 'type',
    align: 'center',
  },
  {
    title: '准入品类',
    dataIndex: 'category',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '提交时间',
    dataIndex: 'time',
    align: 'center',
    sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).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 regionOptions = [
  { label: '请选择', value: '' },
  { label: '境内', value: '境内' },
  { label: '境外', value: '境外' },
];
const statusOptions = [
  { label: '请选择', value: '' },
  { label: '未开始', value: '未开始' },
  { label: '进行中', value: '进行中' },
  { label: '已结束', value: '已结束' },
];
const resultOptions = [
  { label: '请选择', value: '' },
  { label: '通过', value: '通过' },
  { label: '驳回', value: '驳回' },
];

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

  console.log(1);

  useEffect(() => {
    console.log(1);
    
    getApprovePage({
      pageNo: 1,
      pageSize: 10,
    });
  }, [])
  // 查询区渲染
  const searchFormRender = (
    <Form layout="vertical">
      <Row gutter={16}>
        <Col span={5}>
          <Form.Item name="name" label="供应商名称">
            <Input placeholder="请输入供应商名称关键字" allowClear />
          </Form.Item>
        </Col>
        <Col span={3}>
          <Form.Item name="region" label="境内/境外">
            <Select options={regionOptions} allowClear />
          </Form.Item>
        </Col>
        <Col span={4}>
          <Form.Item name="time" label="提交时间">
            <RangePicker style={{ width: '100%' }} />
          </Form.Item>
        </Col>
        <Col span={3}>
          <Form.Item name="status" label="流程状态">
            <Select options={statusOptions} allowClear />
          </Form.Item>
        </Col>
        <Col span={3}>
          <Form.Item name="result" label="审批结果">
            <Select options={resultOptions} allowClear />
          </Form.Item>
        </Col>
        <Col span={3} style={{ display: 'flex', alignItems: 'flex-end' }}>
          <Space>
            <Button type="primary" icon={<SearchOutlined />}>查询</Button>
            <Button icon={<ReloadOutlined />}>重置</Button>
          </Space>
        </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}
        bordered
      /> */}
    </div>
  );
};

export default SupplierCategoryEntry;
