newICSS/src/components/ScaleTable/index.jsx

import React from 'react';
import style from './index.less';
import mocks from '../../mock/chronicTable.js'
import { Radio,CheckBtn } from '@commonComp';
 import Information from '../Information'
/**
*量表 具体信息页面
*title:量表标题/scaleName
*data:量表内容:scaleName量表标题，calculate量表计算结果，group分组，
*
*
**/
class ScaleTable extends React.Component{
  constructor(props){
    super(props);
    this.state={
      // originData:props.data && data[1].content|| [],
      originData:{},
      selecteds:{}
    }
  }
  handleRadio(name,value){
    const {selecteds,originData} = this.state;
    const content = originData && originData[1].content;//表格内容
    const datas = content && JSON.parse(content);//console.log(1111,originData,datas);
    this.setState({
      selecteds:Object.assign({},selecteds,{[name]:value})
    })
  }
  handleCheckbox(name,value){
    let {selecteds} = this.state;
    selecteds[name]?selecteds[name]:selecteds[name]=[];
    const index = selecteds[name].findIndex((i)=>i==value);
    if(index!=-1){
      selecteds[name].splice(index,1);
    }else{
      selecteds[name].push(value);
    }
    this.setState({
      selecteds:selecteds
    });
  }

  handleFormula(data){
    const {tableId,getResult,parentId} = this.props; 
    const params = {
      type:1,
      content:data, //选择后的数据--字符串形式
      id:parentId,
      scaleId:tableId,
    }
    // console.log("调计算接口");
    // getResult&&getResult(params);
  }
  componentWillReceiveProps(nextProps){ 
    const {tableId} = this.props;
    if(JSON.stringify(nextProps.scaleInfo) !== '{}'){
      this.setState({
        originData:nextProps.scaleInfo[tableId]
      })
    }
  }

  getContent(){
    const datas = mocks.newData;
    let {selecteds} = this.state;
    let content =  datas&&datas.group.map((v,i)=>{
                return <div className={style['group']}>
                  <p className={style['groupName']}>{v.groupName}</p>
                  {v.rows&&v.rows.map((it,ind)=>{
                    return <div>
                      {it.row.map((item,index)=>{
                        if(item.controltype==0){
                          return <div className={style['block']}>
                              <p className={style['miniName']}>{item.name}</p>
                              {item.details&&item.details.map((vv,ii)=>{
                                return <div className={style['item']}>
                                      <Radio label={vv.detailName}
                                         isSelect={selecteds[item.name]==vv.detailName}
                                         handleClick={this.handleRadio.bind(this,item.name,vv.detailName)}>
                                      </Radio>
                                      {vv.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
                                  </div>
                              })}
                              
                            </div>
                          }else{
                            return <div className={style['block']}>
                                <p className={style['miniName']}>{item.name}</p>
                                  {item.details&&item.details.map((vv,ii)=>{
                                    return <CheckBtn value={vv.detailName}
                                                    label={vv.detailName}
                                                    isSelect={selecteds[v.name]&&selecteds[item.name].includes(vv.detailName)}
                                                    handleClick={this.handleCheckbox.bind(this,item.name,vv.detailName)}>
                                          </CheckBtn>
                                    {vv.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
                                  })}
                            </div>
                          }
                        
                      })}
                    </div>
                  })}
                  {v.groupCalculate.isShow=='1(1-显示计算结果,0-不显示计算结果)'?<p className={style['subTotal']}>
                    <span>计分</span>
                    <span>{v.groupCalculate.result.value}</span>
                  </p>:''}  
                </div>
              })
    return content;
  }

  render(){
    const {title,scaleInfo,tableId} = this.props;
    const data = scaleInfo[tableId];
    let {selecteds} = this.state;
    const content = data && data[1].content;//表格内容
    const preContent = data && data[0].content;//表前文字
    const footContent = data && data[2].content; //表后文字
    // const datas = content && JSON.parse(content);
    const datas = mocks.newData;
    return <div className={style['tableBox']} id="printcontent">
            <div className={style['printShow']}>
              <Information></Information>
            </div> 
            {/*<h1>{title}</h1>*/}
            <h1>{datas.scaleName}</h1>
            <div dangerouslySetInnerHTML={{__html:preContent}} className={style['textlh']}></div>
            {/*<table className={style['table']}>
              <thead>
                <tr>
                  {datas&&datas.title.map((v,i)=>{
                    return <td>{v.name}</td>
                  })}  
                </tr>
              </thead>
              <tbody>
                {datas&&datas.rows.map((v,i)=>{
                    return <tr>
                    <td>{v.name}</td>
                    <td>
                      {v.controltype==0?v.details.map((it,index)=>{
                          return <td className={style['block']}>
                            <Radio label={it.detailName}
                                   id={it.id}
                                   isSelect={selecteds[v.name]==it.detailName}
                                   handleClick={this.handleRadio.bind(this,v.name,it.detailName)}>
                            </Radio>
                            {it.state==1?<span style={{color:'#3B9ED0'}}>（智能推荐）</span>:''}
                          </td>
                        }):v.details.map((it,index)=>{
                          return <td className={style['block']}>
                              <CheckBtn id={it.detailName}
                                        value={it.detailName}
                                        label={it.detailName}
                                        isSelect={selecteds[v.name]&&selecteds[v.name].includes(it.detailName)}
                                        handleClick={this.handleCheckbox.bind(this,v.name,it.detailName)}>
                              </CheckBtn>
                            </td>
                        })
                    }
                    </td>
                    <td>
                      {v.details.map((it,index)=>{
                        return <td className={style['block']}>{it.score}</td>
                      })}
                    </td>
                    <td></td>
                    </tr>
                  })} 
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4" className={style['sum']}>
                  总计：<i>95</i>
                  <span className={style['formulaBtn']} onClick={this.handleFormula.bind(this,datas)}>计算</span>
                  </td>
                </tr>
              </tfoot>
            </table>*/}
            <div className={style['textContent']}>
              {this.getContent()}
              <div className={style['total']}>
                <span>总分：</span>
                <span>{datas.calculate.result.value||'54' +'分'}</span>
                <span className={style['totalBtn']}>得分</span>
              </div>
            </div>
            <div dangerouslySetInnerHTML={{__html:footContent}} className={style['textlh']}></div>
          </div>
  }
}
export default ScaleTable;