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';
import radio_off from '@images/icon-radio-default.png';
import radio_on from '@images/icon-radio-active.png';


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

    }
    getStyle(flag){
        const {hideBtn,config0} = this.props;
        if(flag===1&&config0!==0){
          return style['fade'];
        }
        return hideBtn?'':style['fade'];
    }
    render(){
        const {closeConfigModal, changeType, confirmType, config0,config1,config2,config3,config4,hideBtn} = this.props;
        const domNode = document.getElementById('root');
        const isOpen = config0===0;
        const general = +config1!==1;
        const ohis = +config2!==1;
        const fontsize = +config3!==1;
        const color = +config4!==1;
        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="scroller">
                  <div className={style["oper"]}>
                    <p className={this.getStyle()}>
                      <span>选择模式：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config0',0):null}>
                        <img src={config0===0?radio_on:radio_off} alt=""/>
                        智能模板推送
                      </a>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config0',1):null}>
                        <img src={config0===1?radio_on:radio_off} alt=""/>
                        非智能模板推送
                      </a>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config0',2):null}>
                        <img src={config0===2?radio_on:radio_off} alt=""/>
                        自由文本输入
                      </a>
                    </p>
                    <p className={this.getStyle(1)}>
                      <span>开启一般情况默认值：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn&&isOpen?()=>changeType('config1',general?1:0):null}>
                        <img src={general?sclose:sopen} alt=""/>
                        {general?'关':'开'}
                      </a>
                    </p>
                    <p className={this.getStyle(1)+" "+style['big-marb']}>
                      <span>开启其他史默认值：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn&&isOpen?()=>changeType('config2',ohis?1:0):null}>
                        <img src={ohis?sclose:sopen} alt=""/>
                        {ohis?'关':'开'}
                      </a>
                    </p>
                    <p className={this.getStyle()}>
                      <span>默认字体大小：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config3',0):null}>
                        <img src={fontsize?radio_on:radio_off} alt=""/>
                        标准
                      </a>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config3',1):null}>
                        <img src={fontsize?radio_off:radio_on} alt=""/>
                        增大
                      </a>
                    </p>
                    <p className={this.getStyle()}>
                      <span>默认字体颜色：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config4',0):null}>
                        <img src={color?radio_on:radio_off} alt=""/>
                        标准
                      </a>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config4',1):null}>
                        <img src={color?radio_off:radio_on} alt=""/>
                        增黑
                      </a>
                    </p>
                  </div>
                  <div className={style["explain"]}>
                    <p>说明：</p>
                    <p>1、智能推送模式只针对问诊模块中的“主诉”、“现病史”、“其他史”展示科室模版功能；</p>
                    <p>2、慢病模式下，该模版智能推送的设置功能不可用；</p>
                    <p>3、一般情况默认值：神清、精神可、胃纳可、睡眠可、二遍无殊、体重无明显减轻；</p>
                    <p>4、其他史默认值：既往史无殊、过敏史无殊、个人史无殊；</p>
                    <p>5、病历书写模块，字体大小标准为14px，增大为18px；</p>
                    <p>6、病历书写模块，字体颜色标准为灰黑色，增黑为全黑色；</p>
                  </div>
                </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;