import React from 'react';
import styles from './index.less';
import commonStyles from '../common.less';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';

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 history = useHistory();
  const goPath = item => {
    confirmRead(false, [message.id]);
    let path = item.webPath
      ? `/civweb4/${item.webPath}`
      : `/civweb4/product/scada/AlertMonitoring/AlertMonitoring`;
    history.push(path);
  };
  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="点击查看详情">
            {alarmContent.alarmValue.split(' ')[0]}
          </font>
          {alarmContent.alarmValue.split(' ')[1] +
            ' / ' +
            alarmContent.alarmThreshold.split(' ').join('')}
        </p>
        <p className={commonStyles.messageTime}>{message.time}</p>
      </div>
    </div>
  );
};

export default Alarm;
