newICSS/src/components/AssessResult/ScaleItem/index.jsx

import React, { Component } from "react";
import style from "../index.less";
import deleteIcon from '@common/images/delete.png';
import deleteIconNo from '@common/images/delete_no.png';
import {ComplexModal,MiniToast,Radio} from '@commonComp';
import {deepClone,preventDefault} from '@utils/tools';
import { getFormulaResult } from '@store/async-actions/fetchModules'
/**
 * 来源于页面选择
 *
 * **/
class ScaleItem extends Component {
  constructor(props) {
    super(props);
    this.$area = React.createRef();
    this.state = {
      text:props.text,
    };
    this.getItems = this.getItems.bind(this);
    this.getDetailItems = this.getDetailItems.bind(this);
  }
  getDetailItems(item,i){
    let arr = [],temp='';
    const {indexs,result,formulaResult,disabled,calcuResult} = this.props;
    const possible=result&&result.possible;
    item.details.map((its,j)=>{
      let it=its;
      if(indexs[i]&&indexs[i].includes(j)){
        if(its.type==1){     //量表
          let scaleRes=formulaResult&&formulaResult[it.content.conceptId]&&formulaResult[it.content.conceptId].calcalculate;
          const name = scaleRes&&scaleRes.result?(' 【'+it.content.name+'】 结果：'+scaleRes.result.value+" "+(scaleRes.result.text||'')):'【'+it.content.name+'】';
          temp =<span className={style['scale']}
                      title={name}>
                        {name}
                        </span>;
        }else if(its.type==2){      //计算公式
          const showRes = calcuResult&&calcuResult[item.conceptId]||it.content.result;
          const cresult = showRes&&showRes[1]&&showRes[1].text;
                    temp = <div className={style['results']}>
                    <span>患者可能有：</span>
                    <span className={style["blue"]}>{cresult}</span>
                </div>
        }else if(its.type==3){
          temp = <div className={style['results']}>
                    <span>可能结果：</span>
                    <span className={style["blue"]}>{possible[item.conceptId]}</span>
                  </div>;
        }
        const passId = item.details[j].type==1?item.details[j].content.conceptId:undefined;
        const li = disabled?<li>
            <span className={style['s-title']}>{item.name}：</span>
            <div className={style['row']}>{temp}</div>
          </li>:<li>
          <span className={style['s-title']}>{item.name}：</span>
          <div className={style['row']}>{temp}</div>
          <div className={style["recommend"]} onClick={this.props.handleRemove.bind(this,false,i,passId,j)}>
            <img className={style["deleteIconNo"]} src={deleteIconNo} />
            <img className={style["deleteIcon"]} src={deleteIcon} />
          </div>
        </li>;
        arr.push(li);
      }
    });
    return arr;
  }
  getItems(){
    const { data } = this.props;
    return data&&data.map((it,i)=>{
      return this.getDetailItems(it,i);
    });
  }
  getScales(){
    const {scaleItems,disabled,formulaResult} = this.props;
    let li='',temp='',arr=[],it={};
    if(!scaleItems){
      return '';
    };
    for( let i in scaleItems){
      it = {conceptId:i,name:scaleItems[i].name};
      if(!it) continue;
      let scaleRes=formulaResult&&formulaResult[it.conceptId]&&formulaResult[it.conceptId].calcalculate;
      const name = scaleRes&&scaleRes.result?(' 【'+scaleItems[i].name+'】 结果：'+scaleRes.result.value+" "+(scaleRes.result.text||'')):'【'+scaleItems[i].name+'】';
      //这里onClick不能用箭头函数，用箭头函数会一直绑定for的最后一个it
      temp =<span className={style['scale']}
                  title={name}>{name}</span>;
      li = disabled?<li>
        <span className={style['s-title']}>相关量表：</span>
        <div className={style['row']}>{temp}</div>
      </li>:<li>
        <span className={style['s-title']}>相关量表：</span>
        <div className={style['row']}>{temp}</div>
        <div className={style["recommend"]} onClick={this.props.handleRemove.bind(this,true,it.conceptId)}>
          <img className={style["deleteIconNo"]} src={deleteIconNo} />
          <img className={style["deleteIcon"]} src={deleteIcon} />
        </div>
      </li>;
      arr.push(li);
    };
    return arr;
  }
  handleInput(e){
    const text = e.target.value;
    this.setState({
      text
    });
  }
  componentWillReceiveProps(next){        //修复bug1329,第二次保存值不显示
    if(next.text!=this.state.text){
      this.setState({
        text:next.text
      });
    this.$area.current.value=next.text;
    }
  }
  render() {
    const {title,handleInp,disabled} = this.props;
    return <div className={style['assess-item']}>
      <h2>{title}</h2>
      <div className={style['item-content']}>
        <ul>
          {
            this.getItems()
          }
          {
            this.getScales()
          }
          <li>
            <textarea className={style['edit-row']}
                      ref={this.$area}
                      type="text"
                      disabled={disabled}
                      placeholder='评估描述'
                      onBlur={()=>handleInp(this.state.text)}
                      onInput={this.handleInput.bind(this)}>{this.state.text}</textarea>
            <div className={style['textareaStatic']}>评估描述：{this.state.text}</div>
          </li>
        </ul>
      </div>
    </div>;
  }
}

export default ScaleItem;