newICSS/src/components/Banner/ModeChange/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import ReactDom from "react-dom";
import close from '@images/icon_close.png';
import sopen from '@images/btn-open.png'
import sclose from '@images/btn-closed.png'

class ModeChange extends Component {
    constructor(props){
      super(props);
      this.getStyle=this.getStyle.bind(this);

    }
    getStyle(){
        const {hideBtn} = this.props;
        return hideBtn?'':style['fade'];
    }
    render(){
        const {closeConfigModal, changeType, confirmType, mode,hideBtn} = this.props;
        const domNode = document.getElementById('root');
        const isOpen = +mode===0;
        return ReactDom.createPortal(<React.Fragment>
            <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>
                <div className={style["oper"]}>
                    <p className={this.getStyle()}>
                      <span>开启模板智能推送：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType(isOpen?'1':'0'):null}>
                        <img src={isOpen?sopen:sclose} alt=""/>
                        {isOpen?'开':'关'}
                        </a>
                    </p>
                </div>
                <div className={style["explain"]}>
                    <p>说明：</p>
                    <p>1.该设置只针对问诊模块中的“主诉”、“现病史”、“其他史”功能；</p>
                    <p>2.慢病模式下，该模板智能推送的设置功能不可使用。</p>
                </div>
                {hideBtn?<div className={style['btn']} onClick={confirmType}><button>保存修改</button></div>:<div className={style['btn']} onClick={closeConfigModal}><button>&nbsp;&nbsp;关闭&nbsp;&nbsp;</button></div>}
            </div>
        </div>
      </React.Fragment>,domNode)
    }
}

export default ModeChange;