import React from 'react';

import classNames from 'classnames';

import commonStyles from '../common.less';
import styles from './index.less';

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 }) => {
  let alarmContent = message.infoContent;
  const goPath = item => {
    debugger
    confirmRead(false, [message.id]);
    const widgetID = "widget_city_综合运营_管网监控_实时监控_报警监控";
    const webPath = item.webPath || "product/scada/AlertMonitoring/AlertMonitoring";
    window.share.event.emit("listenerMointer", {
      widgetId: widgetID,
      label: '报警监控',
      url: webPath,
    });  
  };
  const alarmValue = alarmContent && alarmContent.alarmValue && alarmContent.alarmValue.split(' ');
  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]);
          }}
          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>
          {alarmContent.alarmDevice}
        </p>
        <p>{alarmContent.alarmContent}</p>
        <p>
          <font style={{ color: '#ff0000' }} title="点击查看详情">
            { alarmValue.length > 0 && alarmValue[0]!== 'undefined' && alarmValue[0] || ''}
          </font>
          {
            ( alarmValue.length > 0 && alarmValue[1]!== 'undefined' &&  alarmValue[1] || '') +
            ' / ' +
            alarmContent.alarmThreshold.split(' ').join('')}
        </p>
        <p className={commonStyles.messageTime}>{message.time}</p>
      </div>
    </div>
  );
};

export default Alarm;
