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 bannerDown from "../../common/images/bannerDown.png";
import setup from "../../common/images/setup.png";
import emergIcon from '../../common/images/emergency.png'
import left3 from '../../common/images/left3.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 { CHANGEHOSPITAL } from "@store/types/homePage";
import {getPreMsg} from '@store/async-actions/preIcss';
import ModeChange from './ModeChange'
import {ConfirmModal} from '@commonComp';
import { embedPush} from '../../store/async-actions/pushMessage'
import { clearMessages } from "../../store/async-actions/print";
import {debounce} from '../../utils/tools'
import $ from 'jquery';
import store from '@store';
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,
      showHos:false,
      showM:false,
      hosName:"",
      hosId:"-1",
      hosNameTmp:"",
      hosIdTmp:"-1",
    };
    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.showHospitalLis = this.showHospitalLis.bind(this);
    this.setInitConfig = this.setInitConfig.bind(this);
    this.handleEmbedPush = this.handleEmbedPush.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
    this.cancel = this.cancel.bind(this);
    this.close = this.close.bind(this);
    this.showCheckModal  = this.showCheckModal.bind(this);
    this.showConnect  = this.showConnect.bind(this);
  }

  componentDidMount(){
    $(document).click((e) => {
      let showHospitalLis = document.getElementById("showHospitalLis");         // 公共填写单
      if(!$.contains(showHospitalLis, e.target)){
        this.setState({
          showHos:false
        })
      }
    })
  }

  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')
  }
  // 处理点击的默认推送
  handleEmbedPush(){
    store.dispatch(embedPush({
      action: "patientia",
      mode: 1
    }))
  }
  showHospitalLis(){
    let tmpshow = this.state.showHos
    this.setState({
      showHos:!tmpshow
    })
  }
  showCheckModal(id,name,connect){
    this.setState({
      hosIdTmp:id,
      hosNameTmp:name,
      connectTmp:connect,
      showM:true,
    })
  }
  deleteItem() {
      const {changeHospital,clearAll} = this.props
      this.setState({
          showM: false,
          hosName:this.state.hosNameTmp,
          hosId:this.state.hosIdTmp,
          connect:this.state.connect
      })
      changeHospital({
        hosName:this.state.hosNameTmp,
        hosId:this.state.hosIdTmp,
        connect:this.state.connectTmp
      })
      clearAll()
      store.dispatch(embedPush({
        action: "patientia",
        mode: 1
      }))
      Notify.success('切换成功')
  }
  cancel() {
      this.setState({
        showM: false
      })
  }
  close() {
      this.setState({
        showM: false
      })
  }
  showConnect(e){
    this.setState({
      showHos: false
    })
    e.stopPropagation()
  }
  render() {
    const {visible,pre,ifShow,deptName, closeConfigModal,hasMain,hasCurrent,hasOther,preShow,show,hospitalMsg,curHos} = this.props;
    const {emergencyBox,showHos,showM,hosName,hosNameTmp} = this.state;
    const {showConfigModal, changeType, showHospitalLis,showCheckModal,showConnect} = this;
    const domNode = document.getElementById('root');
    const disabled = !(hasMain||hasCurrent||hasOther);
    return (
      <div className={style["logo"]}>
        <img src={logo} onClick={this.handleEmbedPush}/>
        <span className={style["logo-name"]} onClick={this.handleEmbedPush}>|&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["showHospitalLis"]} onClick={showHospitalLis} id="showHospitalLis">
            <p className={`${style["selectedHos"]}`}>
              <span className={style["ellipsis"]} title={curHos.hosName||hospitalMsg[0].name}>{curHos.hosName||hospitalMsg[0].name}</span>
              <i style={{color:curHos.connect==1?'#3B9ED0':'#FF545B'}} onClick={(e)=>{showConnect(e)}}><img src={left3}/>{curHos.connect==1?'术语已关联':'术语未关联'}</i>
              <img className={style['bannerDown']} src={bannerDown} />
            </p>
            <ul className={`${style["hospitalLis"]}`} style={{"display":showHos?"block":"none"}}>
              {
                hospitalMsg&&hospitalMsg.map((item)=>{
                  return <li className={style['ellipsis']} key={item.id} title={item.name} onClick={()=>showCheckModal(item.id,item.name,item.connect)}>{item.name}</li>
                })
              }
            </ul>
          </div>
          {/* <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}
        <ConfirmModal visible={showM} 
            okText='确定' 
            cancelText='取消' 
            confirm={this.deleteItem}  
            cancel={this.cancel}
            close={this.close}
            okBorderColor={'#3B9ED0'}
            okColor={'#fff'}
            oKBg={'#3B9ED0'}
            >
            <div className={style['changeHos']}>确定要切换至{hosNameTmp}吗？医院切换后将清空当前页面。</div> 
        </ConfirmModal>
      </div>
    );
  }
}

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

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