import React,{Component} from 'react';
import PropTypes from 'prop-types';
import style from './index.less';
import Select from './Select';
import Multiple from './Multiple';

class CheckBox extends React.Component{
  constructor(props){
    super(props);
    this.handleBtnConfirm = this.handleBtnConfirm.bind(this);
    this.handleBtnClear = this.handleBtnClear.bind(this);
    this.handleFirst = this.handleFirst.bind(this);
    this.handleThen = this.handleThen.bind(this);
    this.handleNospencial = this.handleNospencial.bind(this);
    this.preventClick = this.preventClick.bind(this);
    this.handleSpenc = this.handleSpenc.bind(this);
    this.state={
      widthStyle:'small',//控制下拉框的宽度big--初为 后为；small--一列展示
      multiple:false,//true为三列，false为一列
    }
  }


  preventClick(e){
    //阻止冒泡,冒泡会使下拉框消失
    e.stopPropagation();
  }

  getCheckItems(){
    const items = [];
    const {selectVal,isClear,checks,noSpecialFlag} = this.props;
    const that = this;
    checks&&checks.map((v,i)=>{
      if(that.state.multiple){//三列显示
        items[i] = <Multiple {...v} handleClick={this.props.handleCheckBoxClick} key={v.id} selectVal={selectVal} isClear={isClear} />
      }else{//一列
        items[i] = <Select {...v} handleClick={this.props.handleCheckBoxClick} key={v.id} selectVal={selectVal} isClear={isClear} noSpecialFlag={noSpecialFlag} />
      }
      
    })
    return items;
  }

  handleSpenc(e,code){
    e.stopPropagation();
    // console.log(3333,e,code);
    if(code == 1){//伴

    }else if(code == 2){//无

    }
  }


  getTabs(){
    //datas为questionDetailList
    const {datas,handleCheckBoxClick,firstChoo} = this.props; 
    let list = datas.length>0 && datas.map((it,ind)=>{
      if(it.code){
          return <p contentEditable='false' onClick={(e)=>{this.handleSpenc(e,it.code)}} className={firstChoo?`${style['nospecial']} ${style['firstSel']}`:style['nospecial']}>{it.name}</p>
        }else {
          return <Multiple {...it} handleClick={this.props.handleCheckBoxClick} key={it.id} />
        }    
    })
    return list;
  }

  handleBtnConfirm(e){//确定
    e.stopPropagation();
    const {confirmCheckBox,showCheckBox,checkBoxId} = this.props;
    const data = {
      showCheckBox,
    }
    confirmCheckBox && confirmCheckBox(checkBoxId);   
  }

  handleBtnClear(e,){//清空
    e.stopPropagation();
    const {clearCheckBox,showCheckBox,checkBoxId} = this.props;
    clearCheckBox && clearCheckBox(checkBoxId);
  }

  handleFirst(){//初为
    const {firstChoo} = this.props;
    firstChoo && firstChoo(true);
  }

  handleThen(){//后为
    const {thenChoo} = this.props;
    thenChoo && thenChoo(false);
  }

  handleNospencial(e){
    e.stopPropagation();
    const {noSpecialClick} = this.props;
    noSpecialClick && noSpecialClick();
  }

  getNoSpecial(){
    // noSpecialFlag 0默认无选中，1选中标签，2选中无殊
    const {noSpecial,noSpecialFlag,noSpecialClick} = this.props;
    return noSpecialFlag==1?<p className={`${style['nospecial']} ${style['nospecialDis']}`} style={{display:this.state.multiple?'none':'block'}}>个人史无殊</p> : <p className={noSpecial?`${style['nospecial']} ${style['firstSel']}`:style['nospecial']} style={{display:this.state.multiple?'none':'block'}} onClick={this.handleNospencial}>个人史无殊</p>
  }

  render(){
    const {showCheckBox,selectVal,firstC,thenC,firstArr,showDrop} = this.props;
    const firstStyle = firstC;
    const thenStyle = thenC;
    {/*return <div className={`cb-box ${style['cb-container']}`} style={{display:'inline-block'}} onClick={this.preventClick}>*/}
    return <div style={{display:'inline-block'}} onClick={this.preventClick}>
      {this.getTabs()}
      {/*<div className={style['multiple-tab']} style={{display:this.state.multiple?'inline-block':'none'}}>
        <p contentEditable='false' onClick={this.handleFirst} className={firstStyle?`${style['nospecial']} ${style['firstSel']}`:style['nospecial']}>初为</p>
        <p contentEditable='false' onClick={this.handleThen} className={thenStyle?`${style['nospecial']} ${style['thenSel']}`:style['nospecial']}>后为</p>
      </div>
      {this.state.multiple?'':this.getNoSpecial()}
      <div className={style['multiple-con']}>{this.getCheckItems()}</div>
      <div className={style['btn']}>
        <button onClick={this.handleBtnClear} className={style['clear']}>清空选项</button>
        <button onClick={this.handleBtnConfirm} className={style['confirm']}>确定</button> 
      </div>*/}       
    </div>
  }
}

CheckBox.propTypes = {
    handleClick:PropTypes.func,
    datas:PropTypes.array
};
export default CheckBox;

