newICSS/src/components/ChronicInfo/index.jsx

import React from 'react';
import style from './index.less';
import infoPic from "../../common/images/info-pic.png";
import chronicPic from "../../common/images/chronic.png";
import level1 from "../../common/images/级别1.png";
import close from "../../common/images/close-icon.png";
import printIcon from '@common/images/team.png';
import manageIcon from '@common/images/manage.png';
import allIcon from '@common/images/all-table.png';
import tableIcon from '@common/images/table.png';
import allTableIcon from '@common/images/all-table.png';
import add from '@common/images/add-result.png';
import added from '@common/images/first.png';
import checkIcon from '@common/images/check.png';
import {ComplexModal,ConfirmModal} from '@commonComp';
import AssessResult from '@containers/AssessResult';
import ScaleTable from '../ScaleTable';

/***
慢病右侧推送模块规则:
慢病--显示慢病名称以及管理和评估
普通病--显示主诊断的名称，不显示管理和评估,显示量表按钮
明细--量表-计算公式-核心指标
controlType:0-radio  1-checkbox  2-text  3-dropdownlist
**/
class ChronicInfo extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      show:true,
      showInfo:false,
      showOption:false,
      showTable:false,
      showAssess:false,      //评估弹窗
      infoId:null,  //静态知识
      formulaId:null, //计算公式
      optionId:null,  //可能结果,
      isAssessConfirm:false,    //是否点击评估弹窗确定按钮
    };
    this.showInfo = this.showInfo.bind(this);
    this.closeInfo = this.closeInfo.bind(this);
    this.showOption = this.showOption.bind(this);
    this.closeOption = this.closeOption.bind(this);
    this.showTable = this.showTable.bind(this);//显示量表弹窗
    this.closeTable = this.closeTable.bind(this);//关闭量表弹窗
    this.showAssessFn = this.showAssessFn.bind(this); //开关评估弹窗
    this.close = this.close.bind(this); //关闭量表列表
    this.showFormula = this.showFormula.bind(this); //打开计算公式
    this.closeFormula = this.closeFormula.bind(this); //关闭计算公式
    this.handleAddAssessItem = this.handleAddAssessItem.bind(this);   //加入病例记录
    this.handleSaveAssess = this.handleSaveAssess.bind(this);       //评估弹窗确定
  }
  showTableList(id){//量表
    const {getTableList,questionId} = this.props;
    // getTableList(questionId&&questionId.id);
    if(id){
      getTableList(id);
    }
  }
  showInfo(id){//显示静态知识
    this.setState({
      infoId:id
    })
  }
  closeInfo(){//关闭静态知识
    this.setState({
      infoId:null
    })
  }
  showOption(id){
    this.setState({
      optionId:id
    })
  }
  closeOption(){
    this.setState({
      optionId:null
    })
  }
  showTable(){
    // 密西根糖尿病周围神经病评分（MDNS） 为例
    const item = {
      id:40744,
      name:'密西根糖尿病周围神经病评分（MDNS）'
    }
    this.props.getScaleInfo(item);
    this.setState({
      showTable:true
    })
  }
  closeTable(){
    this.setState({
      showTable:false
    })
  }
  showAssessFn(){
    this.setState({
      showAssess:!this.state.showAssess,
      isAssessConfirm:false
    });
  }
  close(){
    const {hideList} = this.props;
    hideList&&hideList();
  }
  showFormula(id){//计算公式
    this.setState({
      formulaId:id
    })
  }
  closeFormula(){
    this.setState({
      formulaId:null
    })
  }
  handleAddAssessItem(v,pIndex,i){
    const {addAssessItem} = this.props;
    addAssessItem(v,pIndex,i);
  }
  handleSaveAssess(){
    this.setState({
      isAssessConfirm:true
    });
    const that=this;
    setTimeout(()=>{
      that.showAssessFn();
    });

  }
  getDetail(){
    const {data,indexs} = this.props;
    const {showInfo,showOption,infoId,formulaId,optionId} = this.state;
    let list = data&&data.map((v,i)=>{
                    return <div className={style["list"]}>
                      <p>
                        <span>{'患者可能有'+v.name}</span>
                        <img src={infoPic} className={style["infoPic"]} onClick={this.showInfo.bind(this,v.id)}/>
                        ：
                      </p>
                      <div className={style["infoBox"]} style={{display:infoId&&infoId==v.id?'block':'none'}}>
                        <p className={style["infoTitle"]}>
                          <img src={allTableIcon} />
                          静态知识
                          <img src={close} onClick={this.closeInfo} className={style["closeIcon"]}/>
                        </p>
                        <div className={style["infoCon"]}>
                          在美国，接受关节置换的病例中约8.5%为糖尿病患者。而糖尿病是关节置换术后各种并发症和死亡的危险因素之一，血糖控制不佳会加大此风险。 　　糖化血红蛋白（HbA1c）水平是衡量糖尿病控制是否良好的标准之一。研究发现HbA1c >7.0%者术后并发症率明显增加，但与术后深部感染并无特别关系。 　　美国学者Giori NJ等所在医院从2004年10月1日起对所有拟行全关节置换的糖尿病患者常规检测术前HbA1c水平。如果HbA1c >7.0%，则要求患者由其初级保健提供者
                        </div>
                      </div>
                      {v.details.map((it,j)=>{
                        if(it.type==1){
                          return <p>
                                <span className={style["listName"]} onClick={this.showTable.bind(this,it.content)}>{'【'+it.content.name+'】'}</span>
                                {indexs[i]&&indexs[i].includes(j)?<span className={style["addResult"]}>
                                  <img src={added} />
                                  已加入
                                </span>:<span className={style["listResult"]} onClick={()=>this.handleAddAssessItem(v,i,j)}>
                                  <img src={add} />
                                  加入病历记录
                                </span>
                                }
                              </p>
                        }else if(it.type==2){
                          return <div className={style["marTop"]}>
                            <span>计算公式结果：</span>
                            <span className={style["blue"]} onClick={this.showFormula.bind(this,v.id)}>请选择</span>
                            <img src={level1} />
                            {indexs[i]&&indexs[i].includes(j)?<span className={style["addResult"]}>
                                  <img src={added} />
                                  已加入
                                </span>:<span className={style["listResult"]} onClick={()=>this.handleAddAssessItem(v,i,j)}>
                                  <img src={add} />
                                  加入病历记录
                                </span>
                            }
                            <div className={style["infoBox"]} style={{display:formulaId&&formulaId==v.id?'block':'none'}}>
                              <p className={style["infoTitle"]}>
                                <img src={allTableIcon} />
                                {it.content.name}
                                <img src={close} onClick={this.closeFormula} className={style["closeIcon"]}/>
                              </p>
                              <div className={style["infoCon"]}>
                                {it.content.details.map((item,i)=>{
                                  if(item.controlType==0){//单选
                                    return <div>
                                      <span>{item.name}</span>
                                      {item.details.map((ii,ind)=>{
                                        return <label>
                                          <input type="radio" name={item.name} />{ii.detailName}
                                        </label>
                                      })}
                                    </div>
                                  }else if(item.controlType==1){//多选

                                  }else if(item.controlType==2){//输入框
                                    return <div>
                                      <span>{item.name}</span>
                                      <input placeholder="请输入"/>
                                    </div>
                                  }else if(item.controlType==3){//下拉
                                    return <div>
                                      <span>{item.name}</span>
                                      {item.details.map((ii,ind)=>{
                                        return <label>
                                          <input type="radio" name={item.name} />{ii.detailName}
                                        </label>
                                      })}
                                    </div>
                                  }
                                  
                                })}
                              </div>
                            </div>
                          </div>
                        }else if(it.type==3){
                          return <div className={style["marTop"]}>
                            <span>可能结果：</span>
                            <span onClick={this.showOption.bind(this,v.id)} className={style["blue"]}>请选择</span>
                            <img src={level1} />
                            {indexs[i]&&indexs[i].includes(j)?<span className={style["addResult"]}>
                                  <img src={added} />
                                  已加入
                                </span>:<span className={style["listResult"]} onClick={()=>this.handleAddAssessItem(v,i,j)}>
                                  <img src={add} />
                                  加入病历记录
                                </span>
                            }
                            <div className={`${style["infoBox"]} ${style["mainBox"]}`} style={{display:optionId&&optionId==v.id?'block':'none'}}>
                              <p className={style["infoTitle"]}>
                                <img src={checkIcon} />
                                结果选择
                                <img src={close} onClick={this.closeOption} className={style["closeIcon"]}/>
                              </p>
                              <div className={style["infoCon"]}>
                                <div className={style["infoOption"]}>
                                  <span>是否贫血：</span>
                                  <span>
                                    <img src={infoPic} />
                                    是
                                  </span>
                                  <span>
                                    <img src={infoPic} />
                                    否
                                  </span>
                                </div>
                                <div className={style["infoConBtn"]}>
                                  <span>确定</span>
                                </div>
                              </div>
                          </div>
                          </div>
                        }
                      })}
                    </div>
                  })
    return list;
  }
  render(){
    const {chronicMagItem,showList,tableList,scaleInfo,saveAssessInfos} = this.props;
    const {showInfo,showOption,showTable,showAssess,isAssessConfirm} = this.state;
    const footer = <div className={style['footer']}>
      <span className={style['print']}><img src={printIcon} alt=""/>打印</span>
      <span className={style['okBtn']} onClick={()=>this.handleSaveAssess()}>确定</span>
    </div>;
    return <div className={style["tips"]} style={{marginBottom:'15px'}}>
              <div className={`${style["tips-title"]} ${style["chronic"]}`}>
                <div className={style["tips-name"]}>
                  <img src={chronicPic} />
                  <h2>{chronicMagItem&&chronicMagItem.name||'冠状动脉'}</h2>
                  <span className={style["redTips"]}>(页面信息有更新可能影响评估结果)</span>
                </div>
                <div className={style["tips-btn"]}>
                  <span
                    className={style["tipsDetails"]}
                    style={{width:'70px'}}
                    onClick={this.showAssessFn}
                  >
                    管理和评估
                  </span>
                  <span
                    className={style["tipsDetails"]}
                    onClick={() => this.showTableList(chronicMagItem&&chronicMagItem.id)}
                  >
                    量表
                  </span>
                </div>
              </div>
              <div className={style["content"]}> 
                  {this.getDetail()}
              </div>
              <ConfirmModal visible={showList} noFooter='true' title='全部量表' close={this.close} titleBg="#DFEAFE" icon={allTableIcon} height={300}>
                      <ul className={style['toast-cont']}>
                        {tableList&&tableList.map((v,i)=>{
                          return <li>
                          <span>{'【'+v.name+'】'}</span>
                          </li>
                        })}
                      </ul>
              </ConfirmModal>
              {showTable?<ComplexModal onclose={this.closeTable} footer={footer}
                      title='密西根糖尿病神经筛查表（MDNS）' 
                      icon={tableIcon}
                      top={20}
                      bottom={20}
                      width={820}>
                <ScaleTable data={scaleInfo}></ScaleTable>
              </ComplexModal>:''}
              {showAssess?<ComplexModal onclose={this.showAssessFn} footer={footer}
                      title='管理和评估' 
                      icon={manageIcon}
                      top={20}
                      bottom={20}
                      width={820}>
                <AssessResult handleSave={saveAssessInfos} isAssessConfirm={isAssessConfirm}></AssessResult>
              </ComplexModal>:''}
      </div>
  }
}
export default ChronicInfo;