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 checkIcon from '@common/images/check.png';
import {ComplexModal} from '@commonComp';
import AssessResult from '@containers/AssessResult';
import ScaleTable from '../ScaleTable';

// 慢病右侧推送模块
class ChronicInfo extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      show:true,
      showInfo:false,
      showOption:false,
      showTable:false,
      showAssess: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); //关闭量表列表
  }
  showTableList(id){//量表
    const {getTableList,questionId} = this.props;
    // getTableList(questionId&&questionId.id);
    if(id){
      getTableList(id);
    }
  }
  showInfo(){//显示静态知识
    this.setState({
      showInfo:true
    })
  }
  closeInfo(){//关闭静态知识
    this.setState({
      showInfo:false
    })
  }
  showOption(){
    this.setState({
      showOption:true
    })
  }
  closeOption(){
    this.setState({
      showOption:false
    })
  }
  showTable(){
    this.setState({
      showTable:true
    })
  }
  closeTable(){
    this.setState({
      showTable:false
    })
  }
  showAssessFn(){
    this.setState({
      showAssess:!this.state.showAssess
    });
  }
  close(){
    const {hideList} = this.props;
    hideList&&hideList();
  }

  render(){
    const footer = <div className={style['footer']}>
      <span className={style['print']}><img src={printIcon} alt=""/>打印</span>
      <span className={style['okBtn']}>确定</span>
    </div>;
    const {chronicMagItem,showList,tableList} = this.props;
    const {showInfo,showOption,showTable,showAssess} = this.state;
    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"]}>
                <div className={style["list"]}>
                  <p>
                    <span>患者可能有糖尿病周围神经病变</span>
                    <img src={infoPic} className={style["infoPic"]} onClick={this.showInfo}/>
                    ：
                  </p>
                  <p>
                    <span className={style["listName"]} onClick={this.showTable}>【密西根糖尿病周围神经病筛查表】</span>
                    <span className={style["listResult"]}>
                      结果：
                      <i>轻度</i>
                      {/*<img src={level1} />*/}
                    </span>
                  </p>
                  <div className={style["infoBox"]} style={{display:showInfo?'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>
                </div>
              {/*核心指标*/}
                <div className={`${style["list"]} ${style["mainList"]}`}>
                  <p>
                    <span>患者可能有脑血管疾病</span>
                    <img src={infoPic} className={style["infoPic"]}/>
                    ：
                  </p>
                  <p>
                    <span className={style["listBtn"]}>加入病历记录</span>
                    <span className={style["listResult"]}>
                      可能结果：
                      <i onClick={this.showOption}>请选择</i>
                      <img src={level1} />
                    </span>
                  </p>
                  <div className={`${style["infoBox"]} ${style["mainBox"]}`} style={{display:showOption?'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>
            {showList?<ComplexModal onclose={this.close}
                      title='全部量表' 
                      icon={allTableIcon}
                      height={300}
                      width={400}>
            <ul className={style['toast-cont']}>
              {tableList&&tableList.map((v,i)=>{
                return <li>
                <span>{'【'+v.name+'】'}</span>
                </li>
              })}
            </ul>
        </ComplexModal>:''}
        {showTable?<ComplexModal onclose={this.closeTable} footer={footer}
                      title='密西根糖尿病神经筛查表（MDNS）' 
                      icon={tableIcon}
                      width={820}>
          <ScaleTable></ScaleTable>
        </ComplexModal>:''}
        {showAssess?<ComplexModal onclose={this.showAssessFn} footer={footer}
                      title='管理和评估' 
                      icon={manageIcon}
                      top={20}
                      bottom={20}
                      width={820}>
          <AssessResult></AssessResult>
        </ComplexModal>:''}
      </div>
  }
}
export default ChronicInfo;