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

import React, { Component } from "react";
import style from "./index.less";
import { Radio,ComplexModal} from '@commonComp';
import arrow from '@common/images/show.png';
import arrowDown from '@common/images/close.png';
import loadingIcon from '@common/images/loading.gif';
import ChooseItem from "../ChooseItem";
import ScaleItem from "../ScaleItem";
import ChartItem from "../ChartItem";
import printIcon from '@common/images/team.png';
import tableIcon from '@common/images/table.png';
import ScaleTableHis from '@components/ScaleTableHis';
import $ from "jquery";

class AssessResultHis extends Component {
  constructor(props) {
    super(props);
    this.state={
      chartTimeTypes:{},      //图表模块
      tableName:'',
      tableId:'',
      parentIndex:0,
      showAssess:false,     //显示收起数据
    };
    this.showAssessFn = this.showAssessFn.bind(this);
    this.getAssessContent = this.getAssessContent.bind(this);
    this.showScaleFn = this.showScaleFn.bind(this);
  }
  handleChartChange(i,selects){
    const {chartTimeTypes} = this.state;
    this.setState({
      chartTimeTypes:Object.assign(chartTimeTypes,{[i]:selects})
    });
  }
  showAssessFn(){
    //获取历史评估数据
    const {showAssess} = this.state;
    this.setState({
      showAssess:!showAssess
    });
    if(!showAssess){
      this.props.getAssessHis(this.props.inquiryId);
    }
  }
  handoutTypes(obj,item,i){
    const {wholeAssess,wholeIndexs,chooseSelecteds,scaleResult,wholeResults} =obj;
    const {getIndexData,inquiryDate,indexData,timeTypes} = this.props;
    const {chartTimeTypes} = this.state;
    const name = item.regionName+"：";
    const list = item.data&&item.data.rows;
    switch (+item.regionType){
      case 0:     //数据来源与右侧手动添加
        return <ScaleItem title={name}
                          data={wholeAssess}
                          showScaleFn={this.showScaleFn}
                          indexs={wholeIndexs}
                          formulaResult={scaleResult}
                          result={wholeResults}
                          disabled={true}
                          isRecommend={item.isRecommend}></ScaleItem>;
      case 1:     //数据来源于大数据
        return <ChooseItem title={name} data={list} selecteds={chooseSelecteds&&chooseSelecteds[i]} disabled={true}></ChooseItem>;
      case 10:    //数据来源于后台
        return <ChartItem title={name}
                          data={indexData||{}}
                          timeTypes={JSON.stringify(chartTimeTypes||{})=='{}'?timeTypes&&timeTypes[i]:chartTimeTypes[i]}
                          initFn={getIndexData}
                          endDate={inquiryDate}
                          pindex={i}
                          handleChange={this.handleChartChange.bind(this,i)}></ChartItem>;
      default:
        return '';
    }
  }
  getAssessContent(){
    const { list,inquiryId } = this.props;
    const obj = list&&list[inquiryId];
    const data = obj&&obj.data;
    if(data&&data.length>0){
      return data.map((it,i)=>{
        return this.handoutTypes(obj,it,i);
      });
    }else{
      return data===null||(data&&data.length==0)?<p className={style['no-data']}>没有历史评估记录！</p>:'';
    }
  }
  /*componentDidMount(){
    const indexTimeTypes = JSON.parse(JSON.stringify(this.props.indexTimeTypes));
    console.log(indexTimeTypes)
    this.setState({
      chartTimeTypes:indexTimeTypes
    });
  }*/
  showScaleFn(item,pid){
    const { list,inquiryId } = this.props;
    const obj = list&&list[inquiryId];
    if(item){
      this.setState({
        tableName:item.name,
        tableId:item.id,
        showScale:!this.state.showScale
      });
    }else{
      this.setState({
        showScale:!this.state.showScale
      });
    }

  }
  onPrint(){
    let dom = $("#printcontent");
    dom.jqprint({
      debug: false,
      importCSS: true,
      printContainer: true,
      operaSupport: false,
    });
  }
  componentWillReceiveProps(next){
    if(next.inquiryId!=this.props.inquiryId){
      this.setState({
        showAssess:false
      });
    }
  }
  render() {
    const { loading,isChronic, list,inquiryId } = this.props;
    const {tableName,tableId,showScale,showAssess} = this.state;
    const obj = list&&list[inquiryId];
    const scaleFooter = <div className={style['footer']}>
      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
      <span className={style['okBtn']} onClick={()=>this.showScaleFn()}>关闭</span>
    </div>;
    return <div className={style['assess-cont']}>
      <div className={style['assess-result']}>
        <p className={style['enter']}>{isChronic?'管理和评估':'推荐'}结果：{showAssess?<a onClick={this.showAssessFn}>收起结果<img src={arrowDown} /></a>:<a onClick={this.showAssessFn}>查看结果<img src={arrow} /></a>}</p>
      </div>
      <div className={style['assess-box']} style={{display:showAssess?'block':'none'}}>
        {loading?<p className={style['loading']}><img src={loadingIcon} alt='loading...'/></p>:''}
        {/*以下必须做判断再执行getAssessContent，否则再次打开评估历史时图表显示有问题，因为提前渲染*/}
        {showAssess?this.getAssessContent():''}
      </div>
      {showScale?<ComplexModal onclose={this.showScaleFn} footer={scaleFooter}
                                          title={tableName}
                                          icon={tableIcon}
                                          top={20}
                                          bottom={20}
                                          width={820}>
        <ScaleTableHis title={tableName} tableId={tableId} result={obj.scaleResult&&obj.scaleResult[tableId]} data={obj.scaleInfo&&obj.scaleInfo[tableId]}></ScaleTableHis>
      </ComplexModal>:''}
    </div>;
  }
}

export default AssessResultHis;