import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
import PropTypes from 'prop-types';
import { Tag, Tooltip, Modal } from 'antd';
import { EnvironmentOutlined } from '@ant-design/icons';
import { monitorService } from './api';
import moment from 'moment';
import classnames from 'classnames';
import { switchTimeToPeriod } from './utils';
import NormChart from './NormChart/NormChart';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.min.css';
import 'swiper/components/navigation/navigation.min.css';
import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core';

SwiperCore.use([Autoplay, Pagination, Navigation]);
/*
 *   1. 获取当前所有数据;
 *   2. 倒序滚动播放;
 *   3. 初始化进入时,取截止到当前时间为止的所有的实时报警数据。
 *   4. 播放结束后,重新获取实时报警数据进行第二轮的播放。
 * */
const InfoItem = ({ info }) => {
  const returnClassName = (type, key) => {
    let _className = '';
    if (type === '普通') {
      _className = 'normal';
    } else if (type === '紧急') {
      _className = 'warning';
    }
    return `${_className}${key}`;
  };
  const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info;

  return (
    <div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
      <Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
      <span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span>
      <Tooltip title={deviceAddress} placement={'topLeft'}>
        <span className={styles.location}>
          <EnvironmentOutlined
            style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }}
          />
          {deviceAddress || ' - '}
        </span>
      </Tooltip>
      <Tooltip title={alertMsg} placement={'topLeft'}>
        <span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span>
      </Tooltip>
      <div className={styles.periodWrapper}>
        <span className={styles.period}>{switchTimeToPeriod(startTime)}</span>
      </div>
    </div>
  );
};
let timer = null;
const AlarmScrollAssembly = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentInfo, setCurrentInfo] = useState({});
  const [enableToGetData, setEnableToGetData] = useState(false);
  const constanceRef = useRef({
    level: '1,2',
    type: '直接取值,取变化量,取变化率,取是否',
    userID: window.globalConfig.userInfo.OID,
    userAccess: true,
  });
  const [realTimeDataList, setRealTimeDataList] = useState(null);
  // const getDeviceNumber = () => {
  //   return monitorService.getEquipmentInfo({
  //     deviceTypes: props.deviceType,
  //     pageIndex: 1,
  //     pageSize: 1,
  //     ...constanceRef.current,
  //   });
  // };
  const getRealTimeData = (pagination) => {
    return monitorService.GetAlarmListRealTime({
      deviceType: props.deviceType,
      ...constanceRef.current,
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
      userAccess: props.userAccess === void 0 ? true : props.userAccess,
      /*            dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'),
                              dateTo: moment().format('YYYY-MM-DD 23:59:59'),*/
    });
  };
  const getData = async () => {
    // let firstRequest = await getDeviceNumber();
    let secondRequest = await getRealTimeData({
      pageIndex: 1,
      // pageSize: firstRequest.data.totalCount,
      pageSize: 10,
    });
    setRealTimeDataList(secondRequest?.data?.list || []);
    setEnableToGetData(false);
    runTimer(secondRequest?.data?.list.length || 0);
  };
  const runTimer = (num) => {
    let _interval = props.interval || 0;
    if (num > 200) _interval = 0;
    timer = setTimeout(() => {
      setEnableToGetData(true);
    }, 1000 * 60 * _interval);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div className={styles.alarmScrollAssemblyWrapper}>
      {realTimeDataList && realTimeDataList.length ? (
        <div className={styles.content} style={{ display: 'flex' }}>
          {props.prefix ? (
            <span style={{ ...props.style, flex: 'none', marginRight: 10 }}>{props.prefix}</span>
          ) : (
            ''
          )}
          <div
            className={classnames(
              styles.alarmScrollAssembly,
              realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000,
            )}
            id={'alarmListDiv'}
          >
            <Swiper
              slidesPerView={1}
              // modules={[Pagination]}
              // pagination={
              //   props.showTotal
              //     ? {
              //         type: 'fraction',
              //         formatFractionCurrent: (num) => `第${num}条`,
              //         formatFractionTotal: (num) => `共${num}条`,
              //       }
              //     : false
              // }
              navigation={props.showTotal ? true : false}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
              }}
              loop
              direction="vertical"
              onSlideChange={(e) => {
                if (e.activeIndex === realTimeDataList.length - 1 && enableToGetData) getData();
              }}
            >
              {realTimeDataList.map((item, index) => {
                return (
                  <SwiperSlide
                    key={index}
                    virtualIndex={index}
                    onClick={() => {
                      setCurrentInfo(item);
                      setModalVisible(true);
                    }}
                  >
                    <InfoItem key={index} info={item} />
                  </SwiperSlide>
                );
              })}
            </Swiper>
            {modalVisible && (
              <Modal
                visible={modalVisible}
                onCancel={() => setModalVisible(false)}
                width={'80%'}
                destroyOnClose
              >
                <NormChart
                  info={currentInfo}
                  deviceType={currentInfo.deviceType}
                  deviceCode={currentInfo.stationCode}
                />
              </Modal>
            )}
          </div>
        </div>
      ) : (
        ''
      )}
    </div>
  );
};
AlarmScrollAssembly.defaultProps = {
  deviceType: '二供泵房,二供机组',
  prefix: '',
  showTotal: true,
  interval: 5,
  userAccess: false,
};
AlarmScrollAssembly.propTypes = {
  deviceType: PropTypes.string,
  prefix: PropTypes.string,
  showTotal: PropTypes.bool,
  interval: PropTypes.number,
  userAccess: PropTypes.bool,
};
export default AlarmScrollAssembly;