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

interface AttachmentItem {
  id: string;
  fileName: string;
  fileType: string;
  uploadTime: string;
  uploader: string;
  fileUrl: string;
}

const OtherAttachmentsTab: React.FC = () => {
  const intl = useIntl();
  const [data, setData] = useState<AttachmentItem[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    coscoSupplier(1).then((res: any) => {
      setLoading(false);
      if (res.code === 200) {
        setData(res.otherAttachments || []);
      }
    });
  }, []);

  const columns: ColumnsType<AttachmentItem> = [
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.index' }),
      render: (_: any, __: any, index: number) => index + 1,
      width: 60,
    },
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.fileName' }),
      dataIndex: 'fileName',
    },
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.fileType' }),
      dataIndex: 'fileType',
    },
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.uploadTime' }),
      dataIndex: 'uploadTime',
    },
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.uploader' }),
      dataIndex: 'uploader',
    },
    {
      title: intl.formatMessage({ id: 'page.workbench.attachments.action' }),
      dataIndex: 'fileUrl',
      render: (val: string) => (val ? <a href={val} target="_blank" rel="noreferrer">下载</a> : '-'),
    },
  ];

  return (
    <div style={{ padding: '0 30px 0 0' }}>
      <Table
        className="custom-table"
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{ pageSize: 10 }}
      />
    </div>
  );
};

export default OtherAttachmentsTab;