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

class PartTrd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      link0: [
        {
          message: '高血压伴休克体征、撕裂样胸痛，两上肢体血压相差20mmHg以上或者下肢血压较上肢血压低10mmHg',
          text: '主动脉夹层救治流程',
          link: 5
        },
        {
          message: '呼吸困难、顽固性低氧血症，低血压、颈静脉怒张，四肢水肿、晕厥',
          text: '肺栓塞救治流程',
          link: 3
        },
        {
          message: '呼吸困难、一侧肺呼吸音减弱或消失',
          text: '气胸救治流程',
          link: 2
        },
        {
          message: '症状体征提示心包积液',
          text: '心包积液救治流程',
          link: 1
        },
      ],
      prevAction: [
        { name: '告病重，立即送抢救室，停止活动，绝对卧床' },
        { name: '监测生命体征，持续心电监护，建立静脉通道（左侧肢体，1-2路）' },
        { name: '必要时给氧，保持血氧饱和度95%以上' },
        { name: '取血化验', list: ['血常规', '急诊生化', '心肌酶谱', 'Troponinl', '凝血功能', '术前免疫'] },
        { name: '床边心超检查' },
        { name: '询问相关病史和体格检查' }
      ],
      selects: [
        {
          basis: [
            '血流动力学不稳定或心源性休克',
            '再发性或药物治疗难以缓解的持续性胸痛',
            '危及生命的心律失常或心跳骤停',
            '心肌梗死的机械性并发症',
            '急性心衰',
            'ST-T动态改变，特别是间歇性ST段抬高',
            '以上依据都不符合'
          ],
        },
        {
          basis: [
            '肌钙蛋白水平升高或降低与心梗一致',
            '动态ST或T波改变（有或无症状）',
            'GRACE评分>140',
            '以上依据都不符合'
          ]
        },
        {
          basis: [
            '糖尿病',
            '肾功能不全（eGFR<60ml/min/1.73m2）',
            'LVEF<40%或充血性心力衰竭',
            '梗死后早起心绞痛',
            '近期PCI史',
            '之前CABG史',
            'GRACE评分>109且<140',
            '以上依据都不符合'
          ]
        },
        {
          basis: []
        },
      ],
      select3: ['呼吸科会诊'],
      select5: ['心外会诊','血管外科内会诊'],
      trdShow: true,
      trdFlg: '',
      currentIdx: 0,
      show0: false,
      show1: false,
      show2: false,
      show3: false,
      show0Lis: [],
      show1lis: [],
      show2lis: [],
      show3lis: [],
    }
    this.handleTrdPart = this.handleTrdPart.bind(this)
  }
  backSec(flg) {
    const { makeSureCom } = this.props
    makeSureCom('', false, 0,flg)
  }
  changeTrdShow(flg, num) {
    this.setState({
      trdShow: flg,
      trdFlg: num,
      currentIdx:0,
      show0: false,
      show1: false,
      show2: false,
      show3: false,
      show0Lis: [],
      show1Lis: [],
      show2Lis: [],
      show3Lis: [],
    })
  }
  changeCurrentIdx() {
    let num = this.state.currentIdx
    this.setState({
      currentIdx: ++num
    })
  }
  handleShowDetail(idx,name) {
    switch (idx) {
      case 0:
        let show0Lis = JSON.parse(JSON.stringify(this.state.show0Lis))
        if(show0Lis.indexOf(name) == -1){
          show0Lis.push(name)
        }else{
          show0Lis.splice(show0Lis.findIndex(item => item == name), 1)
        }
        this.setState({
          show0Lis:show0Lis
        })
        this.setState({
          show0: show0Lis.length>0,
          show1: false,
          show2: false,
          show3: false
        })
        break;
      case 1:
        let show1Lis = JSON.parse(JSON.stringify(this.state.show1Lis))
        if(show1Lis.indexOf(name) == -1){
          show1Lis.push(name)
        }else{
          show1Lis.splice(show1Lis.findIndex(item => item == name), 1)
        }
        this.setState({
          show1Lis:show1Lis
        })
        this.setState({
          show0: false,
          show1: show1Lis.length>0,
          show2: false,
          show3: false
        })
        break;
      case 2:
          let show2Lis = JSON.parse(JSON.stringify(this.state.show2Lis))
          if(show2Lis.indexOf(name) == -1){
            show2Lis.push(name)
          }else{
            show2Lis.splice(show2Lis.findIndex(item => item == name), 1)
          }
          this.setState({
            show2Lis:show2Lis
          })
        this.setState({
          show0: false,
          show1: false,
          show2: show2Lis.length>0,
          show3: false
        })
        break;
      case 3:
        this.setState({
          show0: false,
          show1: false,
          show2: false,
          show3: true
        })
        break;
    }
  }
  handleTrdPart() {
    const { idx, num, trdNum, makeSureCom } = this.props;
    const { link0, trdShow, trdFlg, prevAction, selects, currentIdx, show0,show1,show2,show3 } = this.state;
    if (idx == 0) {
      return <React.Fragment>
        <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
          <span>{num ? '是' : '否'}</span>
          <img onClick={() => { this.backSec() }} src={back} alt="" />
        </div>
        {
          num ? link0.map((item, idx) => {
            return <div className={`${styles.partLis} clearfix`} style={{ borderBottom: idx == 3 ? '0' : null }}>
              <p>{item.message}</p>
              <span onClick={() => makeSureCom(item.link, false, '')}>{item.text}</span>
            </div>
          }) : <h4>建议胸痛中心观察6-8h</h4>
        }
      </React.Fragment>
    } else if (idx == 2) {
      return <React.Fragment>
        <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
          <span>{num ? '是' : '否'}</span>
          <img onClick={() => { this.backSec(true) }} src={back} alt="" />
        </div>
        {
          num ? <React.Fragment>
            <span className={styles.emergencyBtnS}>急诊胸穿</span>
            <p className={styles.warMessage}>抢救室待救</p>
          </React.Fragment> : <React.Fragment>
              <h4>判断肺压缩大于25%或小于25%</h4>
              <p className={styles.warTips}>肺压缩大于25%</p>
              <h4>建议保守对症治疗止咳、祛痰、急诊留观</h4>
              <span className={styles.emergencyBtnS}>择期胸穿</span>
              <div className={styles.line}></div>
              <p className={styles.warTips}>肺压缩小于25%</p>
              <h4>建议保守对症治疗止咳、祛痰</h4><br />
              <div className={styles.hold}>
                <span className={styles.holdLeft}>病情未控制继续恶化</span>
                <span className={styles.holdRight}>择期胸穿</span>
              </div>
              <div className={`${styles.hold}`}>
                <span className={styles.holdLeft}>病情好转</span>
                <span className={styles.holdRight}>门诊随访</span>
              </div>
            </React.Fragment>
        }
      </React.Fragment>
    } else if (idx == 3) {
      if (trdNum == 0) {
        return <React.Fragment>
          <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
            <span>{num ? '右心负荷增加（DDI阳性）' : '右心负荷不增加（DDI阴性）'}</span>
            <img onClick={() => { this.backSec(true) }} src={back} alt="" />
          </div>
          {
            num ? <React.Fragment>
              <h4>生命体征不稳定</h4>
              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                <span>根据病史、体征、PE评分判断病情</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>ACLS（高级心脏生命支持）</span>
              </div>
              <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                <img src={down} alt="" />
              </div>
              <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                <span>收入ICU</span>
              </div>
              <h4>生命体征稳定建议检查CTPA（肺动脉造影）</h4>
              <h4>建议检查肺动脉增强CT</h4>
              <div className={`${styles.hold}`}>
                <span className={styles.holdLeft}>阳性</span>
                <span className={styles.holdRight}>按肺栓塞治疗</span>
              </div>
              <div className={`${styles.hold}`}>
                <span className={styles.holdLeft}>阴性</span>
                <span className={styles.holdRight}>请相关科室会诊寻找病因</span>
              </div>
            </React.Fragment> : <React.Fragment>
                <h4>建议ACLS（高级心脏生命支持）</h4>
                <h4>请相关科室会诊寻找病因</h4>
              </React.Fragment>
          }
        </React.Fragment>
      } else {
        return <React.Fragment>
          <div className={`${num ? styles.nextWar : styles.nextCom} ${styles.next}`}>
            <span>{num ? '评分高或DDI阳性' : '评分低且DDI阴性'}</span>
            <img onClick={() => { this.backSec(true) }} src={back} alt="" />
          </div>
          {
            num ? <React.Fragment>
              <h4>建议检查CTPA（肺动脉造影）</h4>
              <div className={`${styles.hold}`}>
                <span className={styles.holdLeft}>阳性</span>
                <span className={styles.holdRight}>按肺栓塞治疗</span>
              </div>
              <div className={`${styles.hold}`}>
                <span className={styles.holdLeft}>阴性</span>
                <span className={styles.holdRight}>请相关科室会诊寻找病因</span>
              </div>
            </React.Fragment> : <React.Fragment>
                <span className={styles.emergencyBtnS}>排除肺栓塞</span>
                <h4>请相关科室会诊寻找病因</h4>
              </React.Fragment>
          }
        </React.Fragment>
      }
    } else if (idx == 5) {
      return <React.Fragment>
        <div className={`${styles.nextWar} ${styles.next}`}>
          <span>立即检查CTA（血管造影）</span>
        </div>
        <h4>判断检查结果数据</h4>
        {
          trdShow ? <React.Fragment>
            <div className={`${styles.nextWar} ${styles.next}`}>
              <span>确诊AD（A型或B型）</span>
              <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
            </div>
            <div className={`${styles.nextCom} ${styles.next}`}>
              <span>排除AD</span>
              <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
            </div>
          </React.Fragment> : <React.Fragment>
              <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
                <span>{trdFlg ? '确诊AD（A型或B型）' : '排除AD'}</span>
                <img onClick={() => { this.changeTrdShow(true, '') }} src={back} alt="" />
              </div>
              <h4>{trdFlg ? '抢救室待床' : '请相关科室会诊寻找病因'}</h4>
            </React.Fragment>
        }
      </React.Fragment>
    } else if (idx == 4) {
      if (trdNum == 0) {
        return <React.Fragment>
          <h4>进一步诊疗</h4>
          <p>{'（STEMI处置时间<10min）'}</p>
          <ul className={styles.doList}>
            {
              prevAction.map((item, idx) => {
                return <li>
                  {idx + 1}、{item.name}{item.list ? ' : ' : ' ;'}
                  {
                    item.list ? item.list.map((part) => {
                      return <span>{part}</span>
                    }) : null
                  }
                </li>
              })
            }
          </ul>
          <h4>询问并立即服用负荷剂量的双抗药物（若未服用）</h4>
          <p style={{ color: '#000', textIndent: '2em', lineHeight: '20px' }}>阿司匹林0.3g+氯吡格雷300mg/600mg（急需手术）或 阿司匹林0.3g+替格瑞洛180mg（ "心拯救"）</p>
          <h4>患者发病时间！</h4>
          {
            trdShow ? <React.Fragment>
              <div className={`${styles.nextWar} ${styles.next}`}>
                <span>发病大于12小时</span>
                <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
              </div>
              <div className={`${styles.nextCom} ${styles.next}`}>
                <span>发病小于12小时</span>
                <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
              </div>
            </React.Fragment> : <React.Fragment>
                <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
                  <span>{trdFlg ? '发病大于12小时' : '发病小于12小时'}</span>
                  <img onClick={() => { this.changeTrdShow(true, 1) }} src={back} alt="" />
                </div>
                <h4>{trdFlg ? '判断患者是否有急诊PCI指证' : '启动导管室、获取知情同意联系床位'}</h4>
                {
                  trdFlg ? <React.Fragment>
                    <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>{'家属不同意或者导管室到达>60min'}</span>
                    </div>
                    <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                      <img src={down} alt="" />
                    </div>
                    <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                      <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
                    </div>
                    <br />
                    <div className={styles.line}></div>
                    <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
                      <span>{'家属同意-导管室直接运转'}</span>
                    </div>
                    <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
                      <span>{'控制D-B时间<90min'}</span>
                    </div>
                    <div className={styles.line} style={{ marginBottom: "-8px" }}></div>
                    <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>收住ICU/CCU</span>
                    </div>
                  </React.Fragment> : <React.Fragment>
                      <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                        <span>{'家属不同意或者导管室到达>60min'}</span>
                      </div>
                      <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                        <img src={down} alt="" />
                      </div>
                      <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                        <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
                      </div>
                      <br />
                      <div className={styles.line}></div>
                      <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
                        <span>{'家属同意-导管室直接运转'}</span>
                      </div>
                      <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
                        <span>{'控制D-B时间<90min'}</span>
                      </div>
                    </React.Fragment>
                }
              </React.Fragment>
          }
        </React.Fragment>
      } else {
        return <React.Fragment>
          <h4>进一步诊疗</h4>
          <p>{'（STEMI处置时间<10min）'}</p>
          <h4>查血：检查心肌酶谱+Troponinl</h4>
          <p style={{ color: "#000", lineHeight: "18px" }}>必要时可 Q1-4h 复查</p>
          <p style={{ color: "#000", lineHeight: "18px" }}>判读结果同时结果回馈心内科会诊</p>
          <h4>判断检查结果是否异常</h4>
          {
            trdShow ? <React.Fragment>
              <div className={`${styles.nextWar} ${styles.next}`}>
                <span>诊断NSTEMI-ACS</span>
                <i onClick={() => { this.changeTrdShow(false, 1) }}>确定</i>
              </div>
              <div className={`${styles.nextCom} ${styles.next}`}>
                <span>排除NSTEMI-ACS</span>
                <i onClick={() => { this.changeTrdShow(false, 0) }}>确定</i>
              </div>
            </React.Fragment> : <React.Fragment>
                <div className={`${trdFlg ? styles.nextWar : styles.nextCom} ${styles.next}`}>
                  <span>{trdFlg ? '诊断NSTEMI-ACS' : '排除NSTEMI-ACS'}</span>
                  <img onClick={() => { this.changeTrdShow(true, 1) }} src={back} alt="" />
                </div>
                <h4>{trdFlg ? '立即服用负荷剂量的双抗药物（若未服用）' : '已排除NSTEMI-ACS ，请其他诊室会诊！'}</h4>
                {
                  trdFlg ? <React.Fragment>
                    {/* <h4>询问并立即服用负荷剂量的双抗药物（若未服用）</h4> */}
                    <p style={{ color: '#000', textIndent: '2em', lineHeight: '20px' }}>阿司匹林0.3g+氯吡格雷300mg/600mg（急需手术）或 阿司匹林0.3g+替格瑞洛180mg（"心拯救"）</p>
                    <h4>判断患者危重程度</h4>
                    <ul className={`${styles.illDeep} clearfix`}>
                      <li className={currentIdx==0? styles.selectOn:''}>极高危患者</li>
                      <li className={currentIdx==1? styles.selectOn:''}>高危患者</li>
                      <li className={currentIdx==2? styles.selectOn:''}>中危患者</li>
                      <li className={currentIdx==3? styles.selectOn:''}>低危患者</li>
                    </ul>
                    <h4>判断依据</h4>
                    {selects[currentIdx].basis.length>0?<ul className={styles.doList} id="doList">
                      {
                        selects[currentIdx].basis.map((item, idx) => {
                          return <li key={item+idx}>
                            {
                              idx == (selects[currentIdx].basis.length - 1) ? <input type="checkbox" onClick={() => { this.changeCurrentIdx() }} /> : <input type="checkbox" onClick={() => { this.handleShowDetail(currentIdx,item) }} />
                            }
                            <i> {idx + 1}、{item}</i>
                          </li>
                        })
                      }
                    </ul>:null}
                    {
                      (show0 && currentIdx==0) ? <React.Fragment>
                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
                          <span>患者危机程度：极高危患者</span>
                        </div>
                        <h4>治疗方案</h4>
                        <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>{'家属不同意或者导管室到达>60min'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                          <img src={down} alt="" />
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                          <span>{'排除禁忌后考虑立即溶栓（D-D <30min）'}</span>
                        </div>
                        <br />
                        <div className={styles.line}></div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ color: '#2599ff', border: '1px solid #2599ff' }}>
                          <span>{'家属同意-导管室直接运转'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{ border: '0' }}>
                          <span>{'控制D-B时间<90min'}</span>
                        </div>
                      </React.Fragment> : (show1 && currentIdx==1) ? <React.Fragment>
                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
                          <span>患者危机程度：高危患者</span>
                        </div>
                        <h4>治疗方案</h4>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                          <span>{'推荐早期浸入治疗（<24h）'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                          <img src={down} alt="" />
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                          <span>{'收住ICU/CCU'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                          <img src={down} alt="" />
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{height:"80px"}}>
                          <span>{'限期冠脉造影、继续监测生命体征、心电图（q6h）、心肌酶谱变化（q6h）、若有变化随时心内科会诊'}</span>
                        </div>
                      </React.Fragment>: (show2&& currentIdx==2) ? <React.Fragment>
                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
                          <span>患者危机程度：中危患者</span>
                        </div>
                        <h4>治疗方案</h4>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                          <span>{'推荐浸入治疗（<72h）'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                          <img src={down} alt="" />
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`}>
                          <span>{'收住ICU/CCU'}</span>
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownImg}`}>
                          <img src={down} alt="" />
                        </div>
                        <div className={`${styles.goDownPub} ${styles.goDownB}`} style={{height:"80px"}}>
                          <span>{'限期冠脉造影、继续监测生命体征、心电图（q6h）、心肌酶谱变化（q6h）、若有变化随时心内科会诊'}</span>
                        </div>
                      </React.Fragment> :(currentIdx==3) ? <React.Fragment>
                        <div className={`${styles.goDownPub} ${styles.goDownD}`}>
                          <span>患者危机程度：低危患者</span>
                        </div>
                        <h4>留观或收住心内科</h4>
                      </React.Fragment>:null
                    }
                  </React.Fragment> : null
                }
              </React.Fragment>
          }
        </React.Fragment>
      }
    }
  }
  render() {
    const { idx, num } = this.props
    return <div className={`${styles.partTrd} ${styles.partPub}`}>
      {
        idx == 3 && num == 1 ? <React.Fragment><div className={`${styles.emergencyBtn} ${styles.btn}`}>{this.state.select3[0]}</div><br /></React.Fragment>
          : idx == 5 ? <React.Fragment>
            <div className={`${styles.commonBtn} ${styles.btn}`}>{this.state.select5[1]}</div>
            <div className={`${styles.emergencyBtn} ${styles.btn}`}>{this.state.select5[0]}</div>
            <br />
          </React.Fragment> : null
      }
      <p>步骤3</p>
      {
        this.handleTrdPart()
      }
    </div>
  }
}
export default PartTrd;