newICSS/src/components/CopyRight/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import close from '../../common/images/icon_close.png'
import { storageLocal } from "../../utils/tools"

class CopyRight extends Component {
  constructor(props) {
    super(props);

    this.showCopyModal = this.showCopyModal.bind(this);
    this.closeCopyModal = this.closeCopyModal.bind(this);
    this.showDisclatmerModal = this.showDisclatmerModal.bind(this);
    this.closeDisclatmerModal = this.closeDisclatmerModal.bind(this);
    this.disclatmerContent = this.disclatmerContent.bind(this);
    this.getNewVersion= this.getNewVersion.bind(this);
  }
  componentWillMount() {
    this.props.getDisMessage()

  }
  componentDidMount() {
    this.props.getMessage()
  }

  showCopyModal() {
    this.props.showCopyModal();
    if(this.props.copyRight.hasNewVersion) {
      this.props.closeVersionTip()
    }
  }

  closeCopyModal() {
    this.props.closeCopyModal();
  }

  showDisclatmerModal(){
      this.props.showDisclatmerModal()
  }

  closeDisclatmerModal(){
      this.props.closeDisclatmerModal()
  }
  disclatmerContent() {
    const { disContent } = this.props.copyRight;
    // const disclatmer = disContent.data.data[2].description
    if(disContent.data) {
      return (
        <div className={style['message']}>
          <div dangerouslySetInnerHTML={{__html: disContent.data.data[2].description}}></div>
        </div>
      );
    }
  }
  getNewVersion() {
    const newVersion = storageLocal.get('hasNewVersion')
  }


  render() {
    const { number, date, content, copyVisible, disVisible, disContent, hasNewVersion } = this.props.copyRight;
    const { showCopyModal, closeCopyModal, showDisclatmerModal, closeDisclatmerModal } = this;
    const copyContent = content.map(item => {
      return (
        <div className={style['message']}>
          {item.title}
          <div dangerouslySetInnerHTML={{__html: item.description}}></div>
        </div>
      );
    });

    // const disclatmerContent = disContent.map(item => {
    //   return (
    //     <div className={style['message']}>
    //       {item.title}
    //       <div dangerouslySetInnerHTML={{__html: item.description}}></div>
    //     </div>
    //   );
    // })

    return (
      <div className={style["container"]}>
        <div className={style["copy"]}>
          版本信息:{" "}
          <a lassName={style["copy-number"]} href="javascript:;" onClick={showCopyModal}>
            {number}
          </a>{" "}
          {hasNewVersion && <span>new</span>} &copy;<b>朗通医疗</b>
          <div className={style['disclaimer']} onClick={showDisclatmerModal}>免责声明</div>
        </div>
        {copyVisible && <div
          className={style["copyModal"]}
          style={copyVisible ? { display: "block" } : { display: "none" }}
        >
          <div className={style["shade"]}  onClick={closeCopyModal}/>
          <div className={style["copyContent"]}>
            <div className={style["header"]}>版本信息<img src={close} onClick={closeCopyModal} /></div>
            <div className={style["now"]}>
              当前版本：{number}
              <span>{date && date.substring(0, 10)}</span>
            </div>
            <div className={style["content"]}>{copyContent}</div>
          </div>
        </div>}
       {disVisible && <div
          className={style["disModal"]}
          style={disVisible ? { display: "block" } : { display: "none" }}
        >
          <div className={style["shade"]} onClick={closeDisclatmerModal}/>
          <div className={style["disContent"]}>
            <div className={style["header"]}>免责声明<img src={close} onClick={closeDisclatmerModal} /></div>
            <div className={style["content"]}>{this.disclatmerContent()}</div>
            <div className={style["btnBox"]}><span  className={style["btn"]} onClick={closeDisclatmerModal}>确定</span></div>
          </div>
        </div>}
      </div>
    );
  }
}

export default CopyRight;