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

interface InvoiceInfo {
  id: string;
  taxpayerType: string;
  taxpayerCode: string;
  head: string;
  address: string;
  phone: string;
  bank: string;
  account: string;
  updateTime: string;
  certificateUrl: string;
}

const columns: ColumnsType<InvoiceInfo> = [
  { title: 'page.workbench.invoice.index', dataIndex: 'index', width: 80, key: 'index', render: (_: any, __: any, index: number) => index + 1 },
  { title: 'page.workbench.invoice.taxpayerType', dataIndex: 'taxpayerType' },
  { title: 'page.workbench.invoice.taxpayerCode', dataIndex: 'taxpayerCode' },
  { title: 'page.workbench.invoice.head', dataIndex: 'head' },
  { title: 'page.workbench.invoice.address', dataIndex: 'address' },
  { title: 'page.workbench.invoice.phone', dataIndex: 'phone' },
  { title: 'page.workbench.invoice.bank', dataIndex: 'bank' },
  { title: 'page.workbench.invoice.account', dataIndex: 'account' },
  { title: 'page.workbench.invoice.updateTime', dataIndex: 'updateTime' },
  {
    title: 'page.workbench.invoice.qualificationCertificate',
    width:'180px', 
    dataIndex: 'qualificationCertificate',
    render: (val: string) => (val ? <a href={val} target="_blank" rel="noreferrer">查看附件</a> : '-'),
  },
];

const InvoiceTab: React.FC = () => {
  //语言切换
  const intl = useIntl();
  //列表渲染数据
  const [data, setData] = useState<InvoiceInfo[]>([]);
  //列表加载
  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 invoice({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
        className="custom-table"
        rowKey="id"
        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 InvoiceTab;