import React, { useState, useEffect } from 'react';
import { Table, Typography } from 'antd';
import { history } from 'umi';
import styles from './policy.less';

const { Title } = Typography;

// 模拟政策法规数据
const mockPolicyData = [
  {
    id: '1',
    title: '关于进一步规范招标采购活动的管理办法',
    publishDate: '2023-08-15',
  },
  {
    id: '2',
    title: '中远海运集团供应商管理实施细则(2023年修订版)',
    publishDate: '2023-07-20',
  },
  {
    id: '3',
    title: '关于加强采购合同履约管理的通知',
    publishDate: '2023-06-10',
  },
  {
    id: '4',
    title: '中远海运集团招标采购管理办法',
    publishDate: '2023-05-25',
  },
  {
    id: '5',
    title: '关于优化招标采购流程提高采购效率的实施意见',
    publishDate: '2023-04-18',
  },
  {
    id: '6',
    title: '中远海运集团电子招标采购平台操作指南',
    publishDate: '2023-03-30',
  },
  {
    id: '7',
    title: '关于进一步加强采购风险防控的指导意见',
    publishDate: '2023-02-15',
  },
  {
    id: '8',
    title: '中远海运集团采购评审专家管理办法',
    publishDate: '2023-01-10',
  },
  {
    id: '9',
    title: '关于推进绿色采购的实施方案',
    publishDate: '2022-12-20',
  },
  {
    id: '10',
    title: '中远海运集团采购人员职业道德规范',
    publishDate: '2022-11-05',
  },
];

const PolicyPage: React.FC = () => {
  const [policyData, setPolicyData] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // 模拟获取政策法规数据
  useEffect(() => {
    // 实际项目中应该通过API获取数据
    setTimeout(() => {
      setPolicyData(mockPolicyData);
      setPagination((prevPagination) => ({
        ...prevPagination,
        total: mockPolicyData.length,
      }));
      setLoading(false);
    }, 500);
  }, []);

  // 处理表格分页变化
  const handleTableChange = (newPagination: any) => {
    setPagination(newPagination);
  };

  // 处理点击政策标题
  const handlePolicyClick = (id: string) => {
    history.push(`/policy/policyInfo?id=${id}`);
  };

  // 定义表格列
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      render: (_: any, __: any, index: number) => {
        return (pagination.current - 1) * pagination.pageSize + index + 1;
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string, record: any) => (
        <a onClick={() => handlePolicyClick(record.id)} className={styles.policyTitle}>
          {text}
        </a>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'publishDate',
      key: 'publishDate',
      width: 150,
      align: 'center' as 'center',
    },
  ];

  return (
    <div className={styles.policyContainer}>
      <div className={styles.policyTable}>
        <Table
          columns={columns}
          dataSource={policyData}
          rowKey="id"
          pagination={{
            ...pagination,
            showTotal: (total) => `共 ${total} 条记录`,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
          loading={loading}
          onChange={handleTableChange}
          bordered
        />
      </div>
    </div>
  );
};

export default PolicyPage;