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

interface BankInfo {
  id: string;
  interbankNumber: string;
  bank: string;
  accountName: string;
  account: string;
  currency: string;
  nation: string;
  province: string;
  city: string;
  updateTime: string;
}
// 表格头部
const columns: ColumnsType<BankInfo> = [
  {
    title: 'page.workbench.bank.index',
    dataIndex: 'index',
    key: 'index',
    width: 80,
    align: 'center',
    render: (_: any, __: any, index: number) => index + 1 
  },
  {
    title: 'page.workbench.bank.interbankNumber',
    dataIndex: 'interbankNumber',
    key: 'interbankNumber',
  },
  {
    title: 'page.workbench.bank.bank',
    dataIndex: 'bank',
    key: 'bank',
  },
  {
    title: 'page.workbench.bank.accountName',
    dataIndex: 'accountName',
    key: 'accountName',
  },
  {
    title: 'page.workbench.bank.account',
    dataIndex: 'account',
    key: 'account',
  },
  {
    title: 'page.workbench.bank.currency',
    dataIndex: 'currency',
    key: 'currency',
  },
  {
    title: 'page.workbench.bank.nation',
    dataIndex: 'nation',
    key: 'nation',
  },
  {
    title: 'page.workbench.bank.province',
    dataIndex: 'province',
    key: 'province',
  },
  {
    title: 'page.workbench.bank.city',
    dataIndex: 'city',
    key: 'city',
  },
  {
    title: 'page.workbench.bank.updateTime',
    dataIndex: 'updateTime',
    key: 'updateTime',
  },
];
const BankInfoTab: React.FC = () => {
  //双语
  const intl = useIntl();
  //列表渲染数据
  const [data, setData] = useState<BankInfo[]>([]);
  //列表加载
  const [loading, setLoading] = useState(false);
  //列表分页
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
  //列表方法
  const getList = async (page: number = 1, pageSize: number = 10) => {
    setLoading(true);
    try {
      const { code, data, total } = await bank({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 BankInfoTab;