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 tableIcon from '@common/images/table.png';
import printIcon from '@common/images/team.png';
import allTableIcon from '@common/images/all-table.png';
import level1 from "@common/images/级别1.png";
import checkIcon from '@common/images/check.png';
import {ComplexModal,MiniToast,Radio} from '@commonComp';
import ScaleTable from '@containers/ScaleTable';
import $ from "jquery";
/**
 * 来源于页面选择
 *
 * **/
class ScaleItem extends Component {
  constructor(props) {
    super(props);
    this.$area = React.createRef();
    this.state = {
      scaleId:'',
      scaleName:'',
      parentId:'',
      showScale:false,
      optionId:'',
      possible:props.possible||{},
      radioVal:props.radioVal||{},
      formulaId:''
    };
    this.getItems = this.getItems.bind(this);
    this.getDetailItems = this.getDetailItems.bind(this);
    this.showScaleFn = this.showScaleFn.bind(this);
    this.closeScaleFn = this.closeScaleFn.bind(this);
    this.showOption = this.showOption.bind(this);
    this.closeOption = this.closeOption.bind(this);
    this.closeFormula = this.closeFormula.bind(this);
    this.onPrint = this.onPrint.bind(this);
  }
  showOption(id){
    this.setState({
      optionId:id
    })
  }
  closeOption(){
    this.setState({
      optionId:null
    })
  }
  confirmOption(parent,pIndex){
    const {radioVal,possible} = this.state;
    this.setState({
      possible:Object.assign({},possible,radioVal),
      radioVal:Object.assign({},possible,radioVal),//不设置radioVal只有最近一次选中的值
      optionId:null
    })
  }
  handleRadio(item,parent,pIndex){
    let {radioVal} = this.props;
    this.setState({
      radioVal:Object.assign({},radioVal,{[pIndex]:item.detailName})
    })
  }
  handleForRadio(){

  }
  showFormula(id){
    this.setState({
      formulaId:id
    })
  }
  confirmFormula(){

  }
  closeFormula(){
    this.setState({
      formulaId:null
    })
  }
  getDetailItems(item,i){
    let arr = [],temp='';
    const {indexs} = this.props;
    const {optionId,radioVal,possible,formulaId} = this.state;
    item.details.map((it,j)=>{
      if(indexs[i]&&indexs[i].includes(j)){
        if(it.type==1){     //量表
          temp =<span className={style['scale']} onClick={()=>this.showScaleFn(it.content.name,it.content.id,item.id)}>【{it.content.name}】</span>;
        }else if(it.type==2){      //计算公式
          temp = <div className={style['results']}>
                    <span>计算公式：</span>
                    <span className={style["blue"]} onClick={this.showFormula.bind(this,item.id)}>请选择</span>
                    <img src={level1} />
                    <MiniToast title={it.content.name}
                               icon={allTableIcon}
                               show={formulaId&&formulaId==item.id?true:false}
                               close={this.closeFormula}
                               confirm={this.confirmFormula.bind(this,item,i)}
                               footer="true">
                      <table>
                        {it.content.details.map((item,idd)=>{
                          if(item.controlType==0){//单选
                            return <tr>
                              <td>
                                <span>{'请选择'+item.name+'：'}</span>
                              </td>
                              <td>
                                {item.details.map((ii,ind)=>{
                                  return <div className={style["chooseItem"]}>
                                    <Radio label={ii.detailName}
                                           isSelect={radioVal[i]==ii.detailName}
                                           handleClick={this.handleForRadio.bind(this,ii,item,i)}>
                                    </Radio>
                                  </div>
                                })}
                              </td>
                            </tr>
                          }else if(item.controlType==1){//多选

                          }else if(item.controlType==2){//输入框
                            return <tr>
                              <td>
                                <span>{'请输入'+item.name+'：'}</span>
                              </td>
                              <td>
                                <input type="text" placeholder="请输入"/>
                              </td>

                            </tr>
                          }else if(item.controlType==3){//下拉
                            return <tr>
                              <td>
                                <span>{'请选择'+item.name+'：'}</span>
                              </td>
                              <td>
                                {item.details.map((ii,ind)=>{
                                  return <div className={style["chooseItem"]}>
                                    <Radio label={ii.detailName}
                                           isSelect={radioVal[i]==ii.detailName}
                                           handleClick={this.handleForRadio.bind(this,ii,item,i)}>
                                    </Radio>
                                  </div>
                                })}
                              </td>

                            </tr>
                          }
                        })}
                      </table>
                      <div className={style["forMulBtn"]}>计算</div>
                    </MiniToast>
                </div>
        }else if(it.type==3){
          temp = <div className={style['results']}>
                    <span>可能结果：</span>
                    <span onClick={this.showOption.bind(this,item.id)} className={style["blue"]}>{possible[i]?possible[i]:'请选择'}</span>
                    <img src={level1} />
                    <MiniToast title='结果选择'
                         icon={checkIcon}
                         show={optionId&&optionId==item.id?true:false}
                         close={this.closeOption}
                         confirm={this.confirmOption.bind(this,item,i)}
                         footer="true">
                        <div className={style["infoOption"]}>
                          <span>{it.content.name?it.content.name+'：':''}</span>
                          {it.content.details&&it.content.details.map((lis,ind)=>{
                            return <div className={style["chooseItem"]}>
                              <Radio label={lis.detailName}
                                     isSelect={radioVal[i]==lis.detailName}
                                     handleClick={this.handleRadio.bind(this,lis,item,i)}>
                              </Radio>
                            </div>
                          })}
                        </div>
                    </MiniToast>
                  </div>;
        }
        arr.push(<li>
          <span>{item.name}：</span>
          <div className={style['row']}>{temp}</div>
          <div className={style["recommend"]} onClick={()=>this.props.handleRemove(i,j)}>
            <img src={deleteIcon} />
          </div>
        </li>);
      }
    });
    return arr;
  }
  getItems(){
    const { data } = this.props;
    return data&&data.map((it,i)=>{
      return this.getDetailItems(it,i);
    });
  }
  showScaleFn(name,id,pid){
    const {getScaleData,scaleInfo} = this.props;
    this.setState({
      scaleId:id,
      scaleName:name,
      parentId:pid,
      showScale:true
    });
    if(!scaleInfo[id]){
      getScaleData&&getScaleData({id,name});
    }
  }
  closeScaleFn(){
    this.setState({
      showScale:false
    })
  }
  onPrint() {
    let dom = this.state.showTable?$("#printcontent"):$("#AssistResult");
    dom.jqprint({
      debug: false,
      importCSS: true,
      printContainer: true,
      operaSupport: false,
    });
  }
  componentDidMount(){
    if(this.props.text){
      this.$area.current.value = this.props.text;
    }
  }
  render() {
    const {title,handleInp,scaleInfo,disabled} = this.props;
    const {scaleName,scaleId,parentId,showScale} = this.state;
    const footer = <div className={style['footer']}>
      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
      <span className={style['okBtn']} onClick={()=>{}}>确定</span>
    </div>;
    const scaleFooter = <div className={style['footer']}>
      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
      <span className={style['okBtn']} onClick={()=>this.closeTable()}>确定</span>
    </div>;
    return <div className={style['assess-item']}>
      <h2>{title}</h2>
      <div className={style['item-content']}>
        <ul>
          {
            this.getItems()
          }
          <li>
            <textarea className={style['edit-row']}
                      ref={this.$area}
                      name="supplement"
                      rows="6"
                      placeholder='评估描述' onBlur={disabled?null:(e)=>handleInp(e.target.value)} disabled={disabled}></textarea>
          </li>
        </ul>
      </div>
      {showScale?<ComplexModal onclose={this.closeScaleFn} footer={scaleFooter}
                               title={scaleName}
                               icon={tableIcon}
                               top={20}
                               bottom={20}
                               width={820}>
        <ScaleTable title={scaleName} tableId={scaleId} parentId={parentId}></ScaleTable>
      </ComplexModal>:''}
    </div>;
  }
}

export default ScaleItem;