import React, { PureComponent, ReactDOM } from "react";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import { Icon } from "antd";
import moment from "moment";
import styles from "./index.less";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index";

class NoticeDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {
    const { dispatch, location } = this.props;
    const additems = [
      {
        key: "/buyer/NoticeDetail",
        title: "公告详情"
      }
    ];
    dispatch({
      type: "global/additems",
      additems: additems
    });
    const id = location[`noticeId`];
    if (!id) {
      dispatch(
        routerRedux.push({
          pathname: "/buyer/announcement"
        })
      );
    }
    dispatch({
      type: "noticeDetail/getNoticeDetailData",
      payload: {
        id: id
      }
    }).finally(() => {
      const { noticeDetailData } = this.props;
      if (noticeDetailData && noticeDetailData.isRead != "Y") {
        dispatch({
          type: "noticeDetail/updateNoticeRead",
          payload: {
            id: noticeDetailData.id
          }
        });
      }
    });
  }
  componentDidUpdate() {
    const { noticeDetailData } = this.props;
    if (noticeDetailData) {
      const content = this.escapeChars(noticeDetailData.content || "");
      document.getElementById("noticeDetailContent").innerHTML = content;
    }
  }
  // 特殊字符处理
  escapeChars(str) {
    // 转义字符
    str = str.replace(/&lt;/g, "<");
    str = str.replace(/&gt;/g, ">");
    str = str.replace(/&quot;/g, '"');
    // 十进制
    str = str.replace(/&#34;/g, '"');
    str = str.replace(/&#39;/g, "'");
    str = str.replace(/&#60;/g, "<");
    str = str.replace(/&#62;/g, ">");
    return str;
  }
  render() {
    const { noticeDetailData } = this.props;
    if (!noticeDetailData) return null;
    // 转换时间
    const timeCheck = noticeDetailData => {
      if (!noticeDetailData) return null;
      return moment(noticeDetailData.time).format("YYYY-MM-DD");
    };
    return (
      <div className={styles.noticeDetailBox}>
        {/* <BreadcrumbPackage additems={BreadcrumbPaths} /> */}
        <div className={styles.titleBox}>
          {!noticeDetailData ? "" : noticeDetailData.title}
        </div>
        <div className={styles.timeBox}>
          发布时间：{timeCheck(noticeDetailData)}
        </div>
        <div id="noticeDetailContent" className={styles.contentBox} />
      </div>
    );
  }
}
export default connect(state => ({
  noticeDetailData: state.noticeDetail.noticeDetailData
}))(NoticeDetail);
