/** 各市州资质证书统计 */
import { DownloadOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Col, Row } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getCredentialPersonStatistics } from '../service';

import { rule } from '../service';
import type { TableListItem, TableListPagination } from '../data';
import type { FormValueType } from '@/pages/ListTableList2/components/UpdateForm2';
import cookie from 'react-cookies';



const topColResponsiveProps = {
  xs: 24,
  sm: 24,
  md: 24,
  lg: 24,
  xl: 24,
  style: { marginBottom: 24 },
};

const TableList: React.FC = () => {
  /** 分布更新窗口的弹窗 */
  const actionRef = useRef<ActionType>();
  /** 国际化配置 */
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '市州',
      dataIndex: 'city_name',
      valueType: 'text',
    },
    {
      title: '参加学习人数',
      dataIndex: 'learning_person_number',
      // sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '学习完成率',
      dataIndex: 'completion_rate',
      // sorter: true,
      hideInForm: true,
      renderText: (val: string) => `${val}%`,
    },
    {
      title: '取得资质证书人数',
      sorter: false,
      dataIndex: 'count',
      valueType: 'text',
    },
    {
      title: '取得资质比例',
      // sorter: true,
      dataIndex: 'credential_rate',
      valueType: 'text',
      renderText: (val: string) => `${val ? val : 0}%`,
    },
  ];

  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ProTable<TableListItem, TableListPagination>
          headerTitle="各市州资质证书统计"
          actionRef={actionRef}
          rowKey="key"
          search={false}
          options={false}
          pagination={false}
          request={async (value) => {
            const _data = await getCredentialPersonStatistics({ province_id: cookie.load('background_province_id') });
            return {
              data: _data?.list,
            };
          }}
          toolBarRender={() => {
            return [
              <Button type="primary" icon={<DownloadOutlined />} key="subscribeAlert" href={`/dsideal_yy/zygh/training/statistics/exportCredentialData?province_id=${cookie.load('background_province_id')}`}>
                导出名单
              </Button>,
            ]
          }}

          columns={columns}
          rowSelection={false}
        />
      </Col>
    </Row>
  );
};

export default TableList;
