import React from 'react';

import classNames from 'classnames';
import { findPathByWidget, isJSON } from '../../../../utils/utils';
import commonStyles from '../common.less';
import styles from './index.less';
/* eslint-disable */
export class AlarmContent {
  constructor({
    alarmType,
    deviceCode,
    alarmDevice,
    alarmContent,
    alarmValue,
    alarmThreshold,
    time,
  } = content) {
    this.alarmType = alarmType;
    this.deviceCode = deviceCode;
    this.alarmDevice = alarmDevice;
    this.alarmContent = alarmContent;
    this.alarmValue = alarmValue;
    this.alarmThreshold = alarmThreshold;
    this.time = time;
  }
}

const Alarm = ({ message, confirmRead, config }) => {
  const alarmContent = (config.mqtt_mess.MessageLevel === "2.0" && isJSON(message.infoContent)) ? JSON.parse(message.infoContent): message.infoContent;
  const goPath = item => {
    debugger
    confirmRead(false, [message.id]);
    const widgetID = 'widget_city_综合运营_管网监控_实时监控_报警监控';
    const webPath = 'product/scada/AlertMonitoring/AlertMonitoring';
    const widget = findPathByWidget("productex/water/IOTMonitor/RealTimeAlarm/RealTimeAlarm", config.widgets, "", "url");

    window.share.event.emit('listenerMointer', {
      widgetId: widgetID,
      label: '实时报警',
      url: widget.url || webPath,
    });
  };
  const alarmValue = alarmContent && alarmContent.alarmValue && alarmContent.alarmValue.split(' ');
  let alarmTitle = alarmContent && alarmContent.title && alarmContent.title.split(' ') || alarmContent.alarmDevice;
  alarmTitle = Array.isArray(alarmTitle) ? alarmTitle[1]: alarmTitle;
  return (
    <div
      className={classNames(styles.scada, commonStyles.messageContainer)}
      title="点击查看详情"
      onClick={() => goPath(message)}
    >
      <div className={commonStyles.title}>
        <span>消息</span>
        <img
          className={commonStyles.confirm}
          title="点击标为已读"
          onClick={e => {
            e.stopPropagation();
            confirmRead(false, [message.id]);
          }}
          alt=""
          src="https://panda-water.cn/Web4/assets/images/message/%E5%8B%BE%E6%B5%85.png"
        />
      </div>
      <div className={commonStyles.content}>
        <p>
          <i>{alarmContent.alarmType}</i>
          {alarmTitle}
        </p>
        <p>{alarmContent.alarmContent}</p>
        <p>
          <font style={{ color: '#ff0000' }} title="点击查看详情">
            {(alarmValue && Array.isArray(alarmValue) && alarmValue.length > 0 &&
              alarmValue[0] !== 'undefined' &&
              alarmValue[0]) ||
              ''}
          </font>
          {`${(alarmValue && Array.isArray(alarmValue) && alarmValue.length > 0 &&
            alarmValue[1] !== 'undefined' &&
            alarmValue[1]) ||
            ''} / ${alarmContent && alarmContent.alarmThreshold && alarmContent.alarmThreshold.split(' ').join('')}`}
        </p>
        <p className={commonStyles.messageTime}>{message.time}</p>
      </div>
    </div>
  );
};

export default Alarm;
