import BlueTable from '@/components/BlueTable';
import services from '@/services';
import { useRequest } from 'ahooks';
import { DatePicker } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';

type TabKey = '0' | '1' | '2';

interface DataType {
  key: string;
  facilityName: string;
  location: string;
  damageSize: string;
  isMajorDamage: string;
  isUrgentDamage: string;
  damageType: string;
  maintenanceType: string;
  repairSize: string;
  completionDate: string;
}

const BridgeMaintenanceList = ({
  type,
  diseasetypename,
}: {
  type: TabKey;
  diseasetypename: string;
}) => {
  const [activeTab, setActiveTab] = useState<TabKey>(type || '0');
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().startOf('month'),
    dayjs().endOf('month'),
  ]);
  const [fetchParams, setFetchParams] = useState<any>({
    pageNo: 0,
    pageSize: 10,
  });
  const { data: tableData, loading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-dq-dqwhxxfylb',
        params: {
          ...fetchParams,
          startTime: dateRange?.[0]?.format('YYYY-MM-DD'),
          endTime: dateRange?.[1]?.format('YYYY-MM-DD'),
          type: activeTab,
          diseasetypename: diseasetypename,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [dateRange, fetchParams, activeTab],
    },
  );
  console.log(dateRange);

  const columns: ColumnsType<DataType> = [
    {
      title: '设施名称',
      dataIndex: 'infrastructurename',
      key: 'infrastructurename',
      width: 200,
      ellipsis: true,
    },
    {
      title: '病害位置',
      dataIndex: 'address',
      key: 'address',
      width: 250,
      ellipsis: true,
    },
    {
      title: '病害大小',
      dataIndex: 'size',
      key: 'size',
      width: 100,
      ellipsis: true,
    },
    {
      title: '是否重大病害',
      dataIndex: 'isbig',
      key: 'isbig',
      width: 120,
      ellipsis: true,
    },
    {
      title: '是否紧急病害',
      dataIndex: 'isser',
      key: 'isser',
      width: 120,
      ellipsis: true,
    },
    {
      title: '病害类型',
      dataIndex: 'diseasetypename',
      key: 'diseasetypename',
      width: 120,
      ellipsis: true,
    },
    {
      title: '维护类型',
      dataIndex: 'dealtype',
      key: 'dealtype',
      width: 100,
      ellipsis: true,
    },
    {
      title: '维修大小',
      dataIndex: 'repairSize',
      key: 'repairSize',
      width: 100,
      ellipsis: true,
    },
    {
      title: '维修完成日期',
      dataIndex: 'dealtype',
      key: 'dealtype',
      width: 150,
      ellipsis: true,
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.filterArea}>
          <DatePicker.RangePicker
            value={dateRange}
            onChange={(dates) =>
              setDateRange(dates as [dayjs.Dayjs, dayjs.Dayjs])
            }
            className={styles.datePicker}
            format="YYYY年MM月DD日"
            placeholder={['开始日期', '结束日期']}
            suffixIcon={null}
          />
          <div className={styles.tabGroup}>
            <div
              className={`${styles.tabBtn} ${
                activeTab === '0' ? styles.active : ''
              }`}
              onClick={() => setActiveTab('0')}
            >
              全部
            </div>
            <div
              className={`${styles.tabBtn} ${
                activeTab === '1' ? styles.active : ''
              }`}
              onClick={() => setActiveTab('1')}
            >
              桥梁
            </div>
            <div
              className={`${styles.tabBtn} ${
                activeTab === '2' ? styles.active : ''
              }`}
              onClick={() => setActiveTab('2')}
            >
              道路
            </div>
          </div>
        </div>

        <div className={styles.tableAreaBlue}>
          <BlueTable
            rowKey={'id'}
            columns={columns}
            scroll={{ y: 500, x: 1000 }}
            dataSource={tableData?.list}
            pagination={{
              total: tableData?.page?.total,
              pageSize: fetchParams?.pageSize,
              showQuickJumper: false,
              showSizeChanger: false,
              onChange: (page, pageSize) => {
                setFetchParams({
                  ...fetchParams,

                  pageNo: page - 1,
                  pageSize: pageSize,
                });
              },
              //  hideOnSinglePage: true,
            }}
            // className={styles.table}
          />
        </div>
      </div>
    </div>
  );
};

export default BridgeMaintenanceList;
