import { Button } from 'antd';
import React, { useRef } from 'react';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { fetchProjectFileList } from './service';
import type { TableListItem, TableListPagination } from './data';
import { purchaseTypeEnum } from './dict';

const ProjectFiles: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      renderText: (text, record, index) => index + 1,
      width: 50,
      hideInSearch: true,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      valueType: 'text',
    },
    {
      title: '项目编号',
      dataIndex: 'ebpProjectNumber',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      hideInSearch: true,
    },
    {
      title: '采购方式',
      dataIndex: 'purchaseType',
      valueType: 'select',
      valueEnum: purchaseTypeEnum,
    },
    {
      title: '采购类型',
      dataIndex: 'purchaseType',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
    },
    {
      title: '版本号',
      dataIndex: 'version',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="config"
          onClick={() => {
            history.push(`/ProjectFiles/file?action=view&id=${record.id}`);
          }}
        >
          查看
        </a>,
      ],
    },
  ];

  return (
    <div className="project-file-container" style={{ backgroundColor: '#f8f8f8' }}>
      <PageContainer title="我创建的项目">
        <ProTable<TableListItem, TableListPagination>
          actionRef={actionRef}
          rowKey="id"
          search={{
            labelWidth: 120,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                history.push('/ProjectFiles/file?action=create');
              }}
            >
              新建
            </Button>,
          ]}
          options={{ density: false, reload: false, setting: false, fullScreen: false }}
          request={fetchProjectFileList}
          columns={columns}
        />
      </PageContainer>
    </div>
  );
};

export default ProjectFiles;