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>
  );
};
const AlarmScrollAssembly = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentInfo, setCurrentInfo] = useState({});
  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,
    });
    setRealTimeDataList(secondRequest.data.list);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div className={styles.alarScrollAssembly} id={'alarmListDiv'}>
      {realTimeDataList && realTimeDataList.length ? (
        <Swiper
          slidesPerView={1}
          modules={[Pagination]}
          pagination={{
            type: 'fraction',
            formatFractionCurrent: (num) => `第${num}条`,
            formatFractionTotal: (num) => `共${num}条`,
          }}
          navigation
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          loop
          direction="vertical"
          onSlideChange={(e) => {
            if (e.activeIndex === realTimeDataList.length - 1) 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>
  );
};
AlarmScrollAssembly.defaultProps = {
  deviceType: '二供泵房,二供机组',
};
AlarmScrollAssembly.propTypes = {
  deviceType: PropTypes.string,
};
export default AlarmScrollAssembly;