import React, { useEffect, useState } from "react";
import { Table, Form, Input, Button, Select, Space, message } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';

// 模拟数据（mock）
const messageTypeOptions = [
  { label: '请选择', value: '' },
  { label: '供应商变更', value: '供应商变更' },
  { label: '供应商准入', value: '供应商准入' },
  { label: '供应商评价', value: '供应商评价' },
  { label: '供应商评审', value: '供应商评审' },
  { label: '供应商退出', value: '供应商退出' },
  { label: '供应商黑灰名单', value: '供应商黑灰名单' },
];

const mockData = [
  {
    id: 1,
    content: '中山市合创展包装材料有限公司准入通过，进入我单位合格供应商名录',
    type: '供应商变更',
    receiveTime: '2025-04-10 12:00',
    isRead: '未读',
  },
  {
    id: 2,
    content: '中山市合创展包装材料有限公司资质信息发生变更',
    type: '供应商变更',
    receiveTime: '2025-04-10 11:00',
    isRead: '已读',
  },
  {
    id: 3,
    content: '2024年度供应商评价结果通过',
    type: '供应商评价',
    receiveTime: '2025-04-10 11:00',
    isRead: '未读',
  },
  {
    id: 4,
    content: '中山市合创展包装材料有限公司年度评审通过',
    type: '供应商评审',
    receiveTime: '2025-04-10 11:00',
    isRead: '已读',
  },
  {
    id: 5,
    content: '中山市合创展包装材料有限公司被退出集团五合格供应商',
    type: '供应商退出',
    receiveTime: '2025-04-10 12:00',
    isRead: '未读',
  },
  {
    id: 6,
    content: '中山市合创展包装材料有限公司进入集团黑名单',
    type: '供应商黑灰名单',
    receiveTime: '2025-04-10 12:00',
    isRead: '已读',
  },
  {
    id: 7,
    content: '广东振兴塑胶机械有限公司进入集团黑名单',
    type: '供应商黑灰名单',
    receiveTime: '2025-04-10 12:00',
    isRead: '未读',
  },
  {
    id: 8,
    content: '中山市合创展包装材料有限公司重大整改单',
    type: '供应商评价',
    receiveTime: '2025-04-10 11:00',
    isRead: '已读',
  },
  {
    id: 9,
    content: '中山市合创展包装材料有限公司2025年度燃油品评价D级',
    type: '供应商评价',
    receiveTime: '2025-04-10 11:00',
    isRead: '未读',
  },
];

// 组件
const supplierMessage: React.FC = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState(mockData);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: mockData.length });

  // 查询
  const handleSearch = () => {
    const { content, type } = form.getFieldsValue();
    let filterData = mockData;
    if (content) {
      filterData = filterData.filter(i => i.content.includes(content));
    }
    if (type) {
      filterData = filterData.filter(i => i.type === type);
    }
    setPagination({ ...pagination, current: 1, total: filterData.length });
    setData(filterData);
  };

  // 重置
  const handleReset = () => {
    form.resetFields();
    setPagination({ ...pagination, current: 1, total: mockData.length });
    setData(mockData);
  };

  // 列表分页
  const onTableChange = (page: TablePaginationConfig) => {
    setPagination(page);
  };

  // 列配置
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60,
      render: (_: any, __: any, idx: number) => ((pagination.current! - 1) * pagination.pageSize!) + idx + 1,
    },
    {
      title: '消息内容',
      dataIndex: 'content',
      key: 'content',
      align: 'left',
    },
    {
      title: '业务类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: '接收时间',
      dataIndex: 'receiveTime',
      key: 'receiveTime',
      align: 'center',
    },
    {
      title: '是否已读',
      dataIndex: 'isRead',
      key: 'isRead',
      align: 'center',
    },
  ];

  return (
    <>
      <Form form={form} layout="inline" style={{ marginBottom: 12 }}>
        <Form.Item name="content" label="消息内容">
          <Input placeholder="请输入" style={{ width: 220 }} />
        </Form.Item>
        <Form.Item name="type" label="业务类型">
          <Select style={{ width: 200 }}>
            {messageTypeOptions.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 style={{ marginLeft: 8 }} icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data.slice((pagination.current! - 1) * pagination.pageSize!, pagination.current! * pagination.pageSize!)}
        loading={loading}
        pagination={{
          ...pagination,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        onChange={onTableChange}
        bordered
      />
    </>
  );
};

export default supplierMessage;
