import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { qualifications } from '../services';
import { useIntl } from 'umi';

interface Qualification {
  id: string;
  certificateType: string;
  name: string;
  code: string;
  typeLevel: string;
  authority: string;
  dateTime: string;
  termOfValidity: string;
  updateTime: string;
}
// 列表头部信息
const columns: ColumnsType<Qualification> = [
  { title: 'page.workbench.certificateType', dataIndex: 'certificateType' },
  { title: 'page.workbench.certificateName', dataIndex: 'name' },
  { title: 'page.workbench.certificateCode', dataIndex: 'code' },
  { title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
  { title: 'page.workbench.authority', dataIndex: 'authority' },
  { title: 'page.workbench.dateTime', dataIndex: 'dateTime' },
  { title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity' },
  { title: 'page.workbench.updateTime', dataIndex: 'updateTime' },
];

const QualificationTab: React.FC = () => {
  //语言切换
  const intl = useIntl();
  //列表渲染数据
  const [data, setData] = useState<Qualification[]>([]);
  //列表加载
  const [loading, setLoading] = useState(false);
  //列表分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
  //列表方法
  const getList = async (page = 1, pageSize = 10) => {
    setLoading(true);
    try {
      const { code, data, total } = await qualifications({page, pageSize});
      if (code === 200) {
        setData(data);
        setPagination({ current: page, pageSize, total }); 
      }
    } finally {
      setLoading(false);
    }
  };
  //初始化
  useEffect(() => {
    getList();
  }, []);

  return (
    <div style={{ padding: '0 30px 0 0' }}>
      <Table
        rowKey="id"
        className="custom-table"
        columns={columns.map(column => ({
          ...column,
          title: intl.formatMessage({ id: column.title as string })
        }))}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
      />
    </div>
  );
};

export default QualificationTab;