import { connect } from 'dva';
import { Divider, Table, Modal } from 'antd';
import PreviewFile from '@/components/PreviewFile';
import FileViewerModal from '@/components/FileViewer';
import React, { useState, useMemo } from 'react';

function AttachmentTable(props) {
  const [excelFileVisible, setExcelFileVisible] = useState(false);
  const [exportData, setExportData] = useState({});
  const { excelFileList } = props;
  const columns = [
    {
      title: '文件名',
      dataIndex: 'name',
    },
    {
      title: '操作',
      render: (record) => {
        return (
          <a
            onClick={() => {
              setExcelFileVisible(true);
              setExportData(record);
            }}
          >
            预览
          </a>
        );
      },
    },
  ];
  const downloadFile = (record) => {
    window.location.href = `${record.url}`;
  };
  const excelFileData = useMemo(() => {
    return excelFileList?.map((item) => {
      const list = item.url.split('/');
      const name = list[list.length - 1];
      return { name, url: item.url, id: item.id };
    });
  }, [excelFileList]);

  return (
    <>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={excelFileData}
      />
      <FileViewerModal
        data={exportData}
        visible={excelFileVisible}
        downloadFile={downloadFile}
        onCancel={() => {
          setExcelFileVisible(false);
        }}
      />
    </>
  );
}

export default AttachmentTable;
