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===1){
          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!==1;
        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={style["oper"]}>
                    <p className={this.getStyle()}>
                      <span>开启模板智能推送：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={hideBtn?()=>changeType('config0',isOpen?1:0):null}>
                        <img src={isOpen?sopen:sclose} alt=""/>
                        {isOpen?'开':'关'}
                        </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、标准字号：</p>
                    <p>6、标准字体颜色：</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;