import React, { useState, useEffect } from 'react';
import { Table, Divider } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';

function List(props) {
  const { excel, loading, dispatch } = props;

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    // {
    //   title: '所属项目',
    //   dataIndex: 'project_id',
    //   render: id => {
    //     return project.list.find(item => item.ID == id)?.Name;
    //   },
    // },
    {
      title: '版本名称',
      dataIndex: 'version_name',
    },
    {
      title: '操作',
      render: record => (
        <>
          <a
            onClick={() => {
              localStorage.excelId = record.id;
              router.push(`/home/detail/${record.project_id}`);
            }}
          >
            查看
          </a>
        </>
      ),
    },
  ];
  const queryList = page => {
    console.log(page);
    dispatch({
      type: 'newList/queryProjectRecord',
      payload: {
        ...page,
        currentPage: page.current,
      },
    });
  };

  useEffect(() => {
    dispatch({
      type: 'newList/queryProjectRecord',
      payload: {
        pageSize: 20,
      },
    });
  }, []);

  return (
    <div>
      <Table
        loading={loading}
        rowKey="id"
        dataSource={excel.list}
        pagination={excel.pagination}
        columns={columns}
        onChange={queryList}
      />
    </div>
  );
}

export default connect(({ newList, loading }) => ({
  excel: newList.excel,
  loading: loading.models.newList,
}))(List);