newICSS/src/components/Banner/index.jsx

import React, { Component } from "react";
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 {Notify} from '@commonComp';

class Banner extends Component {
  constructor(props){
    super(props)
    this.state = {
      mode: props.typeConfig,
      zIndex:40
    };
    this.showConfigModal = this.showConfigModal.bind(this);
    this.closeConfigModal = this.closeConfigModal.bind(this);
    this.changeType = this.changeType.bind(this);
    this.confirmType = this.confirmType.bind(this);
  }

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

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

  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:40
    })
  }
  /*componentDidUpdate(){
    const {failed} = this.props;
    if(failed){
      //弹窗提醒
      Notify.error("模式切换失败，请稍后再试");
    }
  }*/
  render() {
    const {visible} = this.props;
    const {mode,zIndex} = this.state;
    const {showConfigModal, closeConfigModal, changeType, confirmType} = this;

    return (
      <div className={style["logo"]} style={{zIndex:zIndex}}>
        <img src={logo} />
        <span>|&nbsp;&nbsp;智能辅助临床决策系统</span>
        <div className={style["buon"]} onClick={showConfigModal}>
          <img className={style["st"]} src={setup} />
          设置
        </div>
        {visible?<div className={style['modal']}>
          <div className={style['shade']}></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>:''}
      </div>
    );
  }
}

export default Banner;