newICSS/src/components/Banner/index.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import style from "./index.less";
import logo from "../../common/images/logoa.png";
import setup from "../../common/images/setup.png";
import close from '../../common/images/icon_close.png';
import ok from '../../common/images/confirm.png'
import emergIcon from '../../common/images/emergency.png'
import {Notify} from '@commonComp';
// import Emergency from '@components/Emergency';
import Emergency from '@containers/Emergency';
import {getAllHis} from '@store/async-actions/fetchModules.js';
import {timestampToTime} from '@utils/tools.js';
import {dragBox} from '@utils/drag';

class Banner extends Component {
  constructor(props){
    super(props)
    this.state = {
      mode: props.typeConfig,
      zIndex:204,
      emergency:true,
      emergencyBox:false
    };
    this.showConfigModal = this.showConfigModal.bind(this);
    this.closeConfigModal = this.closeConfigModal.bind(this);
    this.changeType = this.changeType.bind(this);
    this.confirmType = this.confirmType.bind(this);
    this.showHisModal = this.showHisModal.bind(this);
    this.handleHisClose = this.handleHisClose.bind(this);
  }

  showConfigModal(){
    this.setState({
      mode:this.props.typeConfig,
      zIndex:206
    });
    this.props.showConfigModal()
  }

  closeConfigModal(){
    this.props.closeConfigModal();
    this.setState({
      zIndex:204
    })
  }

  changeType(typeConfig){
    this.setState({
      mode:typeConfig
    });
  }

  confirmType(){
    const {typeConfig,confirmType} = this.props;
    const mode = this.state.mode;
    if(mode==typeConfig){
      this.closeConfigModal()
      return;
    }
    confirmType&&confirmType(mode);
    this.closeConfigModal()
    this.setState({
      zIndex:204
    })
  }
  /*componentDidUpdate(){
    const {failed} = this.props;
    if(failed){
      //弹窗提醒
      Notify.error("模式切换失败，请稍后再试");
    }
  }*/
  showHisModal(){
    const {getAllRecord} = this.props;
    const item = {
      current:1
    }
    getAllRecord&&getAllRecord(item);
    this.setState({
      emergencyBox:true,
      zIndex:206
    })
  }
  handleHisClose(){
    this.setState({
      emergencyBox:false,
      zIndex:204
    })
    dragBox('previewWrapper','previewStatic','del')    
  }
  render() {
    const {visible,disVisible,copyVisible} = this.props;
    const {mode,zIndex,emergency,emergencyBox} = this.state;
    const {showConfigModal, closeConfigModal, changeType, confirmType} = this;

    return (
      <div className={style["logo"]} style={{zIndex:disVisible||copyVisible?40:zIndex}}>
        <img src={logo} />
        <span className={style["logo-name"]}>|&nbsp;&nbsp;智能辅助临床决策系统</span>
        <div className={style["buon"]}>
          {emergency?<div className={style["buon1"]} onClick={this.showHisModal}>
                      <img className={`${style["st"]} ${style["his"]}`} src={emergIcon} />
                      本科室近期全部病历
                    </div>:''}
          <div className={style["buon1"]} onClick={showConfigModal}>
            <img className={style["st"]} src={setup} />
            设置
          </div>
        </div>
        {visible?<div className={style['modal']}>
          <div className={style['shade']} onClick={closeConfigModal}></div>
          <div className={style['content']}>
            <div className={style['close']}>设置<img src={close} onClick={closeConfigModal} /></div>
            <p className={style['title']}>模式切换<i>（模式说明：切换模式会清空当前所有的数据）</i></p>
            <ul>
              <li className={+mode===0?style['selected']:''} onClick={() => changeType(0)}><img src={ok} />智能推送模式</li>
              <li className={+mode===1?style['selected']:''} onClick={() => changeType(1)}><img src={ok} />纯文本模式</li>
            </ul>
            <div className={style['btn']} onClick={confirmType}>确认</div>
          </div>
        </div>:''}
        {emergencyBox?<div className={style['modal']}>
            <div className={style['shade']} onClick={this.handleHisClose}></div>
            <Emergency show={emergencyBox} close={this.handleHisClose}/>
          </div>:''}
        
      </div>
    );
  }
}

const mapStateToProps = function(state){
  return {

  }
}

const mapDispatchToProps = function(dispatch){
  return {
    getAllRecord(item){
      dispatch(getAllHis(item));
    }
  }
}
// export default Banner;
export default connect(mapStateToProps,mapDispatchToProps)(Banner);