import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
import { useBoolean } from 'ahooks';
import { Flex, Space } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';

const LatestWarning: React.FC = () => {
  const [playingStatus, { setTrue, setFalse }] = useBoolean(true);
  const eventHtmlRef = useRef<HTMLDivElement>(null);
  const { dispatch } = useGlobalModalServices();

  const [dataSource, setDataSource] = useState<
    {
      name: string;
      address: string;
      time: string;
      type: string;
    }[]
  >([]);

  /** 获取数据*/
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-gjlb',
      params: {
        pageNo: 0,
        pageSize: 10,
      },
    }).then((res) => {
      if (res.code === 200) {
        const { list, page } = res.data?.data?.records[0];

        const data = list.map((v: any) => {
          return {
            name: v.alarmEventDetailName,
            address: v.deviceName,
            time: dayjs(v.alarmGenerateTime).format('YYYY-MM-DD HH:mm:ss'),
            type: v.alarmStatus === 'close' ? '关闭' : '告警中',
          };
        });

        setDataSource(data);
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);
  /** 实现翻牌器滚动 */
  useEffect(() => {
    let intervalId!: NodeJS.Timeout;
    if (!eventHtmlRef.current) {
      return;
    }

    const viewBoxH = eventHtmlRef.current?.clientHeight;
    // 进度条速度
    const speed = 50;
    if (playingStatus) {
      // 开始计时任务
      intervalId = setInterval(() => {
        const top = (eventHtmlRef.current as HTMLDivElement)?.scrollTop;
        if (!eventHtmlRef.current) {
          clearInterval(intervalId);
        }
        if (
          (eventHtmlRef.current as HTMLDivElement)?.scrollHeight - viewBoxH <=
          top + 10
        ) {
          eventHtmlRef.current?.scrollTo({ top: 0, behavior: 'instant' });
          return;
        }
        eventHtmlRef.current?.scrollTo({
          top: top + speed,
          behavior: 'smooth',
        });
      }, 2500);
    } else {
      // 清除定时器
      clearInterval(intervalId);
    }
    // 在组件卸载时清除定时器
    return () => {
      clearInterval(intervalId);
    };
  }, [playingStatus]);

  return (
    <BaseCard
      w={755}
      h={153}
      title="最新告警"
      headerRight={
        <Space
          style={{
            fontSize: 16,
            color: 'rgb(179, 214, 247)',
            cursor: 'pointer',
          }}
          onClick={() => {
            dispatch.push('LightingAlarmList', {}, 1);
          }}
        >
          <span>更多</span>
          <DoubleRightOutlined />
        </Space>
      }
    >
      <div
        className={styles.tableBody}
        ref={eventHtmlRef}
        onMouseMove={setFalse}
        onMouseLeave={setTrue}
      >
        {dataSource.map((item, index) => {
          return (
            <Flex
              key={index}
              align="center"
              className={classNames(styles.tableRow, {
                [styles.tableRowWarning]: item.type === '告警中',
              })}
            >
              <img
                src={require('@/assets/images/warn.png')}
                style={{ width: 36, height: 36 }}
                alt=""
              ></img>
              <div className={styles.nameCell}>{item.name}</div>
              <div className={styles.addressCell}>{item.address}</div>
              <div className={styles.timeCell}>{item.time}</div>
              <div
                className={
                  item.type === '告警中'
                    ? styles.warningTypeCell
                    : styles.successTypeCell
                }
              >
                {item.type}
              </div>
            </Flex>
          );
        })}
      </div>
    </BaseCard>
  );
};

export default LatestWarning;
