/** 历次考试成绩统计 */
import { PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React, { useState, useRef } from 'react';

import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';


import { getExaminationPersonStatistics } from '../service';
//import type { TableListItem, TableListPagination } from '../data';


const TableList: React.FC = () => {
  /** 新建窗口的弹窗 */
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  /** 分布更新窗口的弹窗 */

  // const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  //const [showDetail, setShowDetail] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  //const [currentRow, setCurrentRow] = useState<TableListItem>();
  //const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
  /** 国际化配置 */

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '生涯课程',
      dataIndex: 'name',
      valueType: 'textarea',
    },
    {
      title: '学习人数',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '学习完成率',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}%`,
    },
    {
      title: '考试报名人数',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '考试通过人数',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '考试通过率',
      dataIndex: 'callNo',
      sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}%`,
    },

  ];

  return (
    <div style={{ marginBottom: '20px' }}>
      <ProTable<TableListItem, TableListPagination>
        headerTitle="历次考试成绩统计"
        actionRef={actionRef}
        rowKey="key"
        search={false}
        options={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalVisible(true);
            }}
          >
            <PlusOutlined /> 导出表格
          </Button>,
        ]}
        request={async (value) => {
          const _data = await getExaminationPersonStatistics({ sort_type: 0, sort_colum: 1 });
          return {
            data: _data?.list,
          };
        }}
        columns={columns}
        rowSelection={false}
      />
    </div>
  );
};

export default TableList;