newICSS/src/components/EmergencyProcedure/EmergencyPart/PartSec/index.jsx

import styles from '../index.less'
import back from '../../img/back.png'
import down from '../../img/down.png'

class PartSec extends React.Component{
  constructor(props){
    super(props);
    this.state={
      partCom:true,//通用第二步
      num:'-1',
      partClick:false,
    }
  }
  componentWillReceiveProps(nextState){
    if(nextState.idx != this.props.idx){
      this.setState({partCom:true})
    }
  }
  makeSureCom(link,num){
    const {idx,makeSureCom,makeSureWar} = this.props
    if(idx == 0){
      if(link){
        makeSureCom(link,false,0)
      }
    }else if(idx == 3){
      makeSureWar(num)
    }else if(idx == 5){
      if(num == 0){
        makeSureCom(link,true,0)
      }
    }else if(idx == 4){
      makeSureCom(link,true,0)
      makeSureWar(num)
    }
    this.setState({
      partCom:false,
      num:num
    })
  }
  backSec(flg){
    const {makeSureCom} = this.props
    this.setState({
      partCom:true
    })
    makeSureCom('',false,0,flg)    
  }
  handleStepSecCom(){
    const {data} = this.props
    return data.items.map((item,idx)=>{
      return <div className={`${idx == 0?styles.nextWar:styles.nextCom} ${styles.next}`}><span>{item.actionname}</span> <i onClick={()=>{this.makeSureCom(item.link,idx)}}>{item.text?item.text:'确定'}</i></div>
    })
  }
  handleStepSecClick(){
    const {idx,makeSureCom,reback,resback} = this.props
    if(idx == 0){
      return <React.Fragment>
        <div className={`${styles.nextCom} ${styles.next}`}>
          <span>无异常</span> 
          <img onClick={()=>{this.backSec()}} src={back} alt=""/>
        </div>
        <h4>{'判断危机生命的胸痛（心率>110次/分，血压<90/60mmHg晕厥或呼吸次数>25次，全身湿冷）'}</h4>
        <div className={`${styles.nextWar} ${styles.next}`}>
          <span>是</span> 
          <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
        </div>
        <div className={`${styles.nextCom} ${styles.next}`}>
          <span>否</span> 
          <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
        </div>
      </React.Fragment>
    }else if(idx == 1){
      if(this.state.num == 0){
        return <React.Fragment>
          <div className={`${styles.nextWar} ${styles.next}`}>
            <span>心包积液</span> 
            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
          </div>
          <div className={`${styles.emergencyBtn} ${styles.btn}`}>心外会诊</div>
          <div className={`${styles.emergencyBtn} ${styles.btn}`}>心内会诊</div>
          <h4>{'判断是否心包填塞'}</h4>
          <div className={`${styles.goDownPub} ${styles.goDownY}`}>
            <span>是</span> 
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>心包穿刺</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>穿刺夜分析对症治疗</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>抢救室待床！</span>
          </div>
          <br/>
          <div className={`${styles.goDownPub} ${styles.goDownN}`}>
            <span>否</span> 
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>积液量少查找病因对症治疗</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>病情未控制病情恶化</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>心包穿刺</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>穿刺夜分析对症治疗</span>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
            <img src={down} alt=""/>
          </div>
          <div className={`${styles.goDownPub} ${styles.goDownB}`}>
            <span>抢救室待床！</span>
          </div>
        </React.Fragment>
      }else{
        return <React.Fragment>
        <div className={`${styles.nextCom} ${styles.next}`}>
          <span>非心包积液</span> 
          <img onClick={()=>{this.backSec()}} src={back} alt=""/>
        </div>
        <h4>{'查找其他原因'}</h4>
      </React.Fragment>
      }
    }else if(idx == 2){
      if(this.state.num == 0){
        return <React.Fragment>
          <div className={`${styles.nextWar} ${styles.next}`}>
            <span>气胸患者</span> 
            <img onClick={()=>{this.backSec(true)}} src={back} alt=""/>
          </div>
          <div className={`${styles.emergencyBtn} ${styles.btn}`} style={{"position":"relative","top":"30px"}}>胸外科会诊</div>
          <h4>{'结合症状体征是否危机生命是否'}</h4>
          <h4 style={{"padding":"0"}}>{'濒死休克'}</h4>
          <div style={{display:reback?'block':'none'}} className={`${styles.nextWar} ${styles.next}`}>
            <span>是</span> 
            <i onClick={()=>{makeSureCom('',true,1,false)}}>确定</i>
          </div>
          <div style={{display:reback?'block':'none'}} className={`${styles.nextCom} ${styles.next}`}>
            <span>否</span> 
            <i onClick={()=>{makeSureCom('',true,0,false)}}>确定</i>
          </div>
        </React.Fragment>
      }else{
        return <React.Fragment>
        <div className={`${styles.nextCom} ${styles.next}`}>
          <span>非气胸患者</span> 
          <img onClick={()=>{this.backSec(true)}} src={back} alt=""/>
        </div>
        <h4>{'查找其他原因'}</h4>
      </React.Fragment>
      }
    }else if(idx == 3){
      if(this.state.num == 0){
        return <React.Fragment>
          <div className={`${styles.nextWar} ${styles.next}`}>
            <span>伴低血压休克</span> 
            <img onClick={()=>{this.backSec(true)}} src={back} alt=""/>
          </div>
          <h4>判断右心负荷是否增加</h4>
          <div style={{display:resback?'block':'none'}} className={`${styles.nextWar} ${styles.next}`}>
            <span>右心负荷增加（DDI阳性）</span> 
            <i onClick={()=>{makeSureCom('',true,1,false)}}>确定</i>
          </div>
          <div style={{display:resback?'block':'none'}} className={`${styles.nextCom} ${styles.next}`}>
            <span>右心负荷不增加（DDI阴性）</span> 
            <i onClick={()=>{makeSureCom('',true,0,false)}}>确定</i>
          </div>
        </React.Fragment>
      }else{
        return <React.Fragment>
          <div className={`${styles.nextCom} ${styles.next}`}>
            <span>不伴低血压休克</span> 
            <img onClick={()=>{this.backSec(true)}} src={back} alt=""/>
          </div>
          <h4>根据临床经验或者PE评分规则评估PE可能性</h4>
          <div style={{display:resback?'block':'none'}} className={`${styles.nextWar} ${styles.next}`}>
            <span>评分高或DDI阳性</span> 
            <i onClick={()=>{makeSureCom('',true,1)}}>确定</i>
          </div>
          <div style={{display:resback?'block':'none'}} className={`${styles.nextCom} ${styles.next}`}>
            <span>评分低且DDI阴性</span> 
            <i onClick={()=>{makeSureCom('',true,0)}}>确定</i>
          </div>
        </React.Fragment>
      }
    }else if(idx == 5){
      if(this.state.num == 0){
        return <React.Fragment>
          <div className={`${styles.nextWar} ${styles.next}`}>
            <span>DDI阳性或TTE阳性</span> 
            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
          </div>
        </React.Fragment>
      }else{
        return <React.Fragment>
          <div className={`${styles.nextCom} ${styles.next}`}>
            <span>DDI阴性或TTE阴性</span> 
            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
          </div>
          {/* <span className={styles.emergencyBtnS}>排除AD</span> */}
          <h4>再次详细询问病史、查体，必要时行主动脉CTA</h4>
          <h4>请相关科室会诊寻找病因</h4>
        </React.Fragment>
      }
    }else if(idx == 4){
      if(this.state.num == 0){
        return <React.Fragment>
          <div className={`${styles.nextWar} ${styles.next}`}>
            <span>ST段抬高或新发LBBB</span> 
            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
          </div>
        </React.Fragment>
      }else{
        return <React.Fragment>
          <div className={`${styles.nextCom} ${styles.next}`}>
            <span>ST段压低或无特征性改变</span> 
            <img onClick={()=>{this.backSec()}} src={back} alt=""/>
          </div>
        </React.Fragment>
      }
    }
  }
  render(){
    const {data,idx} = this.props
    return <div className={`${styles.partSec} ${styles.partPub} clearfix`} style={{borderBottom:idx==1?'0':null}}>
      {/* {
        data.select.map((item,idx)=>{
          return <div className={`${idx == 0&&data.select.length>1?styles.commonBtn:styles.emergencyBtn} ${styles.btn}`}>{item}</div>
        })
      } */}
      <p>步骤2</p>
      {
        data.waring?<h4>{data.waring}</h4>:null
      }
      {
        data.tips?<p style={{marginTop:0}}>{data.tips}</p>:null
      }
      {
        this.state.partCom?this.handleStepSecCom():this.handleStepSecClick()
      }
    </div>
  }
}

export default PartSec;