import BlueTable from '@/components/BlueTable';
import services from '@/services';
import { useSetState } from 'ahooks';
import { TableProps } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
export default ({ type }: { type: string }) => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [pageInfo, setPageInfo] = useSetState({
    page: 1,
    pageSize: 6,
    total: 0,
  });

  const getData = (page: number) => {
    const classification = type === 'all' ? undefined : type;

    services.Physicalsign.getDifficultEventsList({
      page: page,
      count: 6,
      classification,
    }).then((res) => {
      if (res.code === 200) {
        setDataSource(res.data.items);
        setPageInfo({
          page: res.data.page,
          total: res.data.total,
        });
      }
    });
  };

  useEffect(() => {
    getData(1);
  }, [type]);

  const columns: TableProps['columns'] = [
    {
      title: '排名',
      key: 'sort',
      render: (text: any, record: any, index: any) => {
        return (
          <div className={styles.sort}>
            TOP{index + 1 + (pageInfo.page - 1) * pageInfo.pageSize}
          </div>
        );
      },
      align: 'center',
    },
    {
      title: '区市县',
      dataIndex: 'areaName',
      key: 'areaName',

      align: 'center',
    },
    {
      title: '待解决',
      dataIndex: 'pendingCount',
      key: 'pendingCount',
      render: (text: any) => {
        return <span style={{ color: 'rgb(255, 177, 92)' }}>{text}</span>;
      },
      align: 'center',
    },
    {
      title: '超期100天以上',
      dataIndex: 'overdue100DaysPlus',
      key: 'overdue100DaysPlus',

      align: 'center',
    },
    {
      title: '超期30-100天',
      dataIndex: 'overdue30To100Days',
      key: 'overdue30To100Days',

      align: 'center',
    },
    {
      title: '超期30天已内',
      dataIndex: 'overdueLessThan30Days',
      key: 'overdueLessThan30Days',
      align: 'center',
    },
    {
      title: '已解决',
      dataIndex: 'solvedCount',
      key: 'solvedCount',
      render: (text: any) => {
        return (
          <span style={{ color: 'rgb(141, 161, 255)' }}>{text ?? '--'}</span>
        );
      },
      align: 'center',
    },
    {
      title: '共计',
      dataIndex: 'totalCount',
      key: 'totalCount',
      align: 'center',
    },
    
  ];
  return (
    <div className={styles.container}>
      <BlueTable
        scroll={{ y: 600 ,x:1000}}
        rowKey={'id'}
        columns={columns}
        dataSource={dataSource}
        pagination={{
          total: pageInfo.total,
          showTotal: (total) => `共 ${total} 条`,
          pageSize: 6,
          onChange: (pageNum) => {
            // setParams({ pageNum, pageSize, type: 'list' });
            getData(pageNum);
          },
          current: pageInfo.page,
        }}
      />
    </div>
  );
};
