import BlueTable from '@/components/BlueTable';
import services from '@/services';
import { DatePicker, Flex, Tooltip } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface AlarmDataType {
  time: string;
  deviceName: string;
  alarmType: string;
  description: string;
  status: string;
  closeTime: string;
}

const LightingAlarmList: React.FC = () => {
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs]>([
    dayjs().startOf('month'),
    dayjs().endOf('month'),
  ]);
  const [alarmStatus, setAlarmStatus] = useState('all');

  const [dataSource, setDataSource] = useState<AlarmDataType[]>([]);

  const pageInfo = useRef<{
    currentPage: number;
    pageSize: number;
    total: number;
  }>({
    currentPage: 0,
    pageSize: 10,
    total: 0,
  });

  const columns: ColumnsType<AlarmDataType> = [
    {
      title: '告警时间',
      dataIndex: 'time',
      key: 'time',
      width: 250,
      className: styles.tableCell,
    },
    {
      title: '告警设备',
      dataIndex: 'deviceName',
      key: 'deviceName',
      width: 200,
      render: (description: string) => (
        <Tooltip title={description}>
          <div className={styles.tableCell}>{description}</div>
        </Tooltip>
      ),
    },
    {
      title: '告警详细类型',
      dataIndex: 'alarmType',
      key: 'alarmType',
      width: 180,
      className: styles.tableCell,
    },
    {
      title: '告警描述',
      dataIndex: 'description',
      key: 'description',
      render: (description: string) => (
        <Tooltip title={description}>
          <div className={styles.tableCell}>{description}</div>
        </Tooltip>
      ),
      width: 300,
      className: styles.tableCell,
    },
    {
      title: '告警状态',
      dataIndex: 'status',
      key: 'status',
      width: 150,
      render: (status: string) => (
        <span
          className={
            status === '告警中' ? styles.statusWarning : styles.statusClosed
          }
        >
          {status}
        </span>
      ),
    },
    {
      title: '告警关闭时间',
      dataIndex: 'closeTime',
      key: 'closeTime',

      className: styles.tableCell,
    },
  ];
  /** 获取数据*/
  const getData = (page?: number) => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gjlb',
      params: {
        pageNo: page,
        pageSize: 10,

        startTime: dateRange[0].format('YYYY-MM-DD'),
        endTime: dateRange[1].format('YYYY-MM-DD'),
        alarmStatus: alarmStatus === 'all' ? undefined : alarmStatus,
      },
    }).then((res) => {
      if (res.code === 200) {
        const { list, page } = res.data?.data?.records[0];

        const data = list.map((v: any) => {
          return {
            deviceName: v.deviceName,
            alarmType: v.alarmEventDetailName,
            description: v.alarmDescription,
            closeTime: v.alarmCloseTime
              ? dayjs(v.alarmCloseTime).format('YYYY-MM-DD HH:mm:ss')
              : '--',
            time: dayjs(v.alarmGenerateTime).format('YYYY-MM-DD HH:mm:ss'),
            // time: dayjs(v.alarmTime).format('YYYY-MM-DD HH:mm:ss'),
            status: v.alarmStatus === 'close' ? '关闭' : '告警中',
            ...v,
          };
        });

        pageInfo.current = {
          currentPage: page.currentPage,
          pageSize: page.pageSize,
          total: page.total,
        };

        setDataSource(data);
      }
    });
  };

  useEffect(() => {
    getData(0);
  }, [dateRange, alarmStatus]);

  return (
    <div className={styles.container}>
      {/* 筛选条件区域 */}
      <div className={styles.filters}>
        <Flex gap={20} align="center">
          <DatePicker.RangePicker
            value={dateRange}
            onChange={(dates) => {
              if (dates && dates[0] && dates[1]) {
                setDateRange([dates[0], dates[1]]);
              }
            }}
            format="YYYY年MM月DD日"
            className={styles.datePicker}
          />

          <div className={styles.facilityTabs}>
            <div
              className={`${styles.facilityTab} ${
                alarmStatus === 'all' ? styles.active : ''
              }`}
              onClick={() => setAlarmStatus('all')}
            >
              全部
            </div>
            <div
              className={`${styles.facilityTab} ${
                alarmStatus === 'alarm' ? styles.active : ''
              }`}
              onClick={() => setAlarmStatus('alarm')}
            >
              告警中
            </div>
            <div
              className={`${styles.facilityTab} ${
                alarmStatus === 'close' ? styles.active : ''
              }`}
              onClick={() => setAlarmStatus('close')}
            >
              关闭
            </div>
          </div>
        </Flex>
      </div>

      {/* 表格区域 */}
      <BlueTable
        columns={columns}
        dataSource={dataSource}
        scroll={{ y: 520 }}
        pagination={{
          total: pageInfo.current.total,
          pageSize: 10,
          showSizeChanger: false,

          onChange: (page) => {
            console.log('page', page);
            getData(page - 1);
          },
        }}
      />
    </div>
  );
};

export default LightingAlarmList;
