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:量表标题
*data:量表内容
**/
class ScaleTable extends React.Component{
  constructor(props){
    super(props);
    this.state={
      data:props.data && data[1].content|| [],
      selecteds:{}
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event){
    console.log(event.target.value);
  }
  handleRadio(name,value){
    const {selecteds} = this.state;
    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);
  }

  render(){
    const {data,title} = this.props;
    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);
    // console.log(555,datas,content);
    return <div className={style['tableBox']} id="printcontent">
            <div className={style['printShow']}>
              <Information></Information>
            </div> 
            <h1>{title}</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.details.map((it,index)=>{
                            return <td className={style['block']}>
                              <label>
                                <input type="radio" name={v.name} value={it.score} onChange={this.handleChange}/>{it.detailName}
                                <span style={{display:it.state==1?'inline':'none',color:'#3B9ED0'}}>（智能推荐）</span>
                              </label>
                            </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 dangerouslySetInnerHTML={{__html:footContent}} className={style['textlh']}></div>
          </div>
  }
}
export default ScaleTable;