import React from 'react';

import classNames from 'classnames';

import commonStyles from '../common.less';
import styles from './index.less';
import { isJSON } from '../../../../utils/utils';

export class NoticeContent {
  // eslint-disable-next-line no-undef
  constructor({ noticeTitle, noticeType, noticeContent, time } = content) {
    this.noticeTitle = noticeTitle;
    this.noticeType = noticeType;
    this.noticeContent = noticeContent;
    this.time = time;
  }
}

const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
  // eslint-disable-next-line no-debugger
  const noticeContent =
    config.mqtt_mess.MessageLevel === '2.0' && isJSON(message.infoContent)
      ? JSON.parse(message.infoContent)
      : message.infoContent;
  const goPath = item => {
    // eslint-disable-next-line no-debugger
    debugger;
    // eslint-disable-next-line no-debugger
    confirmRead(false, [message.id]);
    handlerSysDetail && handlerSysDetail(message);
  };
  return (
    <div
      className={classNames(styles.notice, 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"
          alt=""
        />
      </div>
      <div className={commonStyles.content}>
        <p>
          <i>{noticeContent.noticeType}</i>
          {noticeContent.noticeTitle}
        </p>
        {/* eslint-disable-next-line react/no-danger */}
        <p dangerouslySetInnerHTML={{ __html: noticeContent.noticeContent }} />
        <p className={commonStyles.messageTime}>{message.time}</p>
      </div>
    </div>
  );
};

export default Notice;
