newICSS/src/components/Banner/index.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import style from "./index.less";
import ReactDom from "react-dom";
import logo from "../../common/images/logoa.png";
import prec from "../../common/images/prec.png";
import setup from "../../common/images/setup.png";
import emergIcon from '../../common/images/emergency.png'
import {Notify} from '@commonComp';
import Emergency from '@containers/Emergency';
import PreInIcss from '@containers/PreInIcss';
import {getAllHis} from '@store/async-actions/fetchModules.js';
import {timestampToTime,getCurrentDate} from '@utils/tools.js';
import {dragBox} from '@utils/drag';
import {CLEAR_COMSYMPTOMS} from '@store/types/mainSuit';
import { GET_PREC_LIST,SET_PREC_SHOW } from "@store/types/preIcss";
import {getPreMsg} from '@store/async-actions/preIcss';
import ModeChange from './ModeChange'

class Banner extends Component {
  constructor(props){
    super(props);
    const conf = props.typeConfig;
    this.state = {
      config0: conf[0],    //模式
      config1:conf[1],   //一般情况默认
      config2:conf[2],      //其他史默认
      config3:conf[3],    //字体大小
      config4:conf[4],       //字体颜色
      emergencyBox:false
    };
    this.showConfigModal = this.showConfigModal.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);
    this.setInitConfig = this.setInitConfig.bind(this);
  }

  showConfigModal(){
    this.setInitConfig();
    this.props.showConfigModal()
  }

  changeType(type,typeConfig){
    if(type==='config0'&&typeConfig!==0){     //智能模式关闭，一般情况和其他史默认值也关闭
      this.setState({
        config0: typeConfig,
        config1: 0,
        config2: 0,
      });
      return;
    }
    this.setState({
      [type]:typeConfig
    });
  }

  confirmType(){
    const {typeConfig,confirmType,clearCommS,closeConfigModal,readMode} = this.props;
    // 清空主诉常见症状
    clearCommS();
    /*if(mode==typeConfig&&typeConfig==readMode){
      closeConfigModal();
      return;
    }*/
    const configs= this.parseConf();
    confirmType&&confirmType(configs);
    closeConfigModal();
  }
  parseConf(){
    let configs = Object.assign({},this.state);
    delete configs.emergencyBox;
    let obj = {};
    for(let i in configs){
      obj[i.replace('config','')] = configs[i];
    }
    return obj;
  }
  setInitConfig(){
    const conf = this.props.typeConfig;
    this.setState({
      config0: conf[0],
      config1:conf[1],
      config2:conf[2],
      config3:conf[3],
      config4:conf[4],
    });
  }
  showHisModal(){
    const {getAllRecord} = this.props;
    // 进入时默认展示当天的病例
    const item = {
      current:1,
      startDate:getCurrentDate(false)+' 00:00:00',
      endDate:getCurrentDate(false)+' 23:59:59'
    }
    getAllRecord&&getAllRecord(item);
    this.setState({
      emergencyBox:true,
    })
  }
  handleHisClose(){
    this.setState({
      emergencyBox:false,
    });
    dragBox('previewWrapper','previewStatic','del')    
  }
  render() {
    const {visible,pre,ifShow,deptName, closeConfigModal,hasMain,hasCurrent,hasOther,preShow,show} = this.props;
    const {emergencyBox} = this.state;
    const {showConfigModal, changeType, confirmType} = this;
    const domNode = document.getElementById('root');
    const disabled = !(hasMain||hasCurrent||hasOther);
    return (
      <div className={style["logo"]} >
        <img src={logo} />
        <span className={style["logo-name"]}>|&nbsp;&nbsp;智能辅助临床决策系统</span>
        <div className={style["buon"]}>
          {ifShow==1&&deptName=='急诊科'?<div className={`${style["buon1"]} ${style["buon2"]}`} onClick={this.showHisModal}>
                      <img className={`${style["st"]} ${style["his"]}`} src={emergIcon} />
                      <i>本科室近期全部病历</i>
                    </div>:''}
          {pre == 1?<div className={style.prec} onClick={()=>preShow(show)}>
            <img className={style["st"]} src={prec} alt="预问诊"/>
            <i> 预问诊信息</i>
          </div>:null}
          <div className={style["buon1"]} onClick={showConfigModal}>
            <img className={style["st"]} src={setup} />
            <i> 设置</i>
          </div>
        </div>
        {visible&& <ModeChange
          {...this.state}
          hideBtn={disabled}
          closeConfigModal = {closeConfigModal}
          changeType = {changeType}
          confirmType = {confirmType}
        >
          </ModeChange>}
        {emergencyBox? ReactDom.createPortal(<React.Fragment> 
            <div className={style['modal']}>
              <div className={style['shade']} onClick={this.handleHisClose}></div>
              <Emergency show={emergencyBox} close={this.handleHisClose}/>
            </div>
          </React.Fragment>
          , domNode):''}
        {show?<PreInIcss></PreInIcss>:null}
      </div>
    );
  }
}

const mapStateToProps = function(state){
  const {sysConfig} = state.homePage;
  const {message} = state.patInfo;
  return {
    ifShow:sysConfig.general_show,
    deptName:message.selfDeptName,
    show:state.preIcss.preShow,
    pre:sysConfig.connect_prec
  }
}

const mapDispatchToProps = function(dispatch){
  return {
    getAllRecord(item){
      dispatch(getAllHis(item));
    },
    clearCommS:()=>{//清除主诉常见症状
      dispatch({
        type: CLEAR_COMSYMPTOMS
      })
    },
    preShow(show){
      show?dispatch({type:SET_PREC_SHOW}):getPreMsg()
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Banner);