newICSS/src/components/Treat/index.jsx

import React,{ Component } from 'react';
import style from './index.less';
import GeneralTreat from './GeneralTreat/index.jsx';
import DrugTreat from './DrugTreat/index.jsx';
import DrugHistory from './DrugHistory/index.jsx';
import FollowUp from './FollowUp/index.jsx';
import AdverseReactions from './AdverseReactions/index.jsx';
import TreatDesc from '@components/TreatDesc'
import DrugInfo from '@components/TreatDesc/DrugInfo';
import Notify from '@commonComp/Notify'
import close from './img/close.png';
import generalIcon from './img/general.png';
import surgicalIcon from './img/surgical.png';
import followUpIcon from './img/followUp.png';
import drugIcon from './img/drug.png';
import adverseReactionIcon from './img/adverseReaction.png';
import $ from "jquery";
import {dragBox} from '@utils/drag';
import ReactDom from "react-dom";
import NewPortal from './NewPortal'

class Treat extends Component {
    constructor(props){
        super(props);
        this.state = {
          zIndex:301,
        }
        this.hideTreat = this.hideTreat.bind(this);
        this.handlePrescription = this.handlePrescription.bind(this);
        this.handleDetermine = this.handleDetermine.bind(this);
        this.setTreatBox = this.setTreatBox.bind(this);
    }
    componentDidMount(){
      dragBox('dragModalWrap','dragModalTitle','add','treatDescBox')
    }
    
    hideTreat() {
        const { hideTreat,clearTreat, hideDrugInfo } = this.props;
        
        clearTreat && clearTreat();
        hideTreat && hideTreat();
        hideDrugInfo && hideDrugInfo();
        dragBox('dragModalWrap','dragModalTitle','del')
    }
    handlePrescription() {
        Notify.info('该功能即将上线，敬请期待。', 2000)
    }
    handleDetermine() {
        const { title, treatment, advice, treatItem, adversReactionList, saveAllAdverseReaction, setAllFollowUp } = this.props
        const { addScheme,refreshScroller } = this.props
        addScheme && addScheme(title, treatment);
        saveAllAdverseReaction && saveAllAdverseReaction(treatItem);
        setAllFollowUp && setAllFollowUp(treatItem)
        this.hideTreat();
        //滚动条滚到最底部，避免直接上滚滚动条消失bug
        setTimeout(function(){
          refreshScroller()&&refreshScroller().scrollBottom();
        },100);
    }
    showDrugInfo() {
        const {  showDrugInfo } = this.props;
        showDrugInfo && showDrugInfo();
    }
   
    setTreatBox(){
      $('#dragModalWrap').css({'z-index': 120});
      $('#drugWrapper').css({'z-index': 110});
    }
    render(){
        const {setDrugInfoMore,treatIndex,treatIndexSet, generalTreat, treatment, treatItem, surgeryTreat, drugHistory, 
                selectDrug, drugInfo, treatDesc, setOtherRecommend, setDrugInfo, showDrug, showDrugInfo,hideDrugInfo,
                title, drugInfoList, hideDrugInfoMore, adversReactionList, changeReact, followUp, setFollowUp, isRead, hasFollowUp} = this.props;
        const { zIndex,show } = this.state
        const domNode = document.getElementById('root');
        // return ReactDom.createPortal(
            return <NewPortal visible = 'true'>
            <div   className={style['treat-wrapper']}>
                <div className={style['treat-mask']} onClick={this.hideTreat}>
                </div>
                <div id="dragModalWrap" className={style['treat-box']}  onselectstart="return false">
                    <img className={style.close} onClick={this.hideTreat} src={close}/>
                    <div onMouseDown={this.setTreatBox} id="dragModalTitle" className={style['treat-title']}>治疗方案 ({treatItem.name})</div>

                    <div className={style['treat-inner-box']}>
                        <GeneralTreat icon={generalIcon} title='一般治疗' hasFold="true"  generalTreat={generalTreat}></GeneralTreat>
                        {hasFollowUp && <FollowUp icon={followUpIcon} title='回访时间' noTitle='true'  setFollowUp={setFollowUp} followUp = {followUp} isRead={isRead}></FollowUp>}
                        {/* 回访时间 */}
                        {/* {followUp && <div>回访时间： 
                            <span  className={style['follow-up-box']}
                                    contentEditable='true'
                                    onInput = {this.handleInputFollowUp}>
                                {followUp}</span>后回访，不适随诊
                        </div>} */}
                        { drugHistory && (drugHistory['慢病用药内容'] && drugHistory['慢病用药内容'].length > 0 || drugHistory['普通病用药内容'] && drugHistory['普通病用药内容'].length > 0) &&<DrugHistory icon={drugIcon} 
                            titleStyle={{background:'#EAF7FA',opacity:'1', filter:'alpha(opacity=100);',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=100);'}}
                            title='上次用药情况' 
                            drugHistory={drugHistory}  
                            showDrugInfo = {showDrugInfo} 
                            setDrugInfo={ setDrugInfo }>
                        </DrugHistory>}
                        {adversReactionList&&adversReactionList.length>0&&<AdverseReactions icon={adverseReactionIcon} 
                            titleStyle={{background:'#C72F2F',opacity:'0.1', filter:'alpha(opacity=10);',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=10);'}} 
                            title='不良反应' 
                            adversReactionList = {adversReactionList} 
                            changeReact = {changeReact}
                            showDrugInfo = {showDrugInfo} 
                            setDrugInfo={ setDrugInfo }>
                        </AdverseReactions>}
                        <DrugTreat treatmentPlan={ treatment } 
                                selectDrug={selectDrug} 
                                setOtherRecommend={ setOtherRecommend } 
                                showDrugInfo = {showDrugInfo}
                                setDrugInfo={ setDrugInfo }
                                setDrugInfoMore = {setDrugInfoMore} //查询多条药品说明数据
                            >
                        </DrugTreat> 
                        <GeneralTreat icon={surgicalIcon} title='手术治疗' titleStyle={{background:'#FAEAEA',opacity:'1', filter:'alpha(opacity=100);',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=100);'}} titleBg='#FAEAEA' generalTreat={surgeryTreat}></GeneralTreat>
                    </div>
                    <div className={style['bottom']}>
                        <span className={style['prescription-btn']} onClick={this.handlePrescription}>开处方</span> <span className={style['determine-btn']} onClick={this.handleDetermine}>确定</span>
                    </div>
                    {<TreatDesc 
                    treatment={treatment} 
                    treatDesc={treatDesc} 
                    selectDrug={selectDrug} 
                    setDrugInfo={ setDrugInfo } 
                    showDrugInfo = {showDrugInfo}
                    showDrug = {showDrug}
                    >
                    </TreatDesc>}
                </div>
                
                {showDrug && drugInfo && <DrugInfo setTreatBox={this.setTreatBox} treatIndexSet={treatIndexSet} drugInfo = {drugInfo} hideDrugInfo = {hideDrugInfo}></DrugInfo>}
                {/* 查询多个药品说明书 （添加数据查看药品说明书用）*/}
                {/* {showDrug && <DrugInfo drugInfoList = {drugInfoList} hideDrugInfoMore = {hideDrugInfoMore}></DrugInfo>} */}
            </div>
            </NewPortal>
        //     ,domNode
        // )
    }
}

export default Treat;