import React,{Component} from 'react';
import classNames from 'classnames';
import $ from 'jquery';
import style from "./index.less";
/****
 * 主诉常见症状下拉--修改为横铺多选（3.13）
 * 接收参数：
 * data: json数组
 * show:true/false
 * textKey: 选项文字字段名
 * idKey: 选项id字段名
 * type: text选项为纯文本,label选项为标签
 * onSelect: 选中事件
 *
 * ***/

class CommonSymptom extends Component{
  constructor(props){
    super(props);
    this.state={
      select:[],
      ids:[],
      hide:false
    }
    this.handleSelect = this.handleSelect.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleConfirm = this.handleConfirm.bind(this);
  }
  getClass(){
    let name = style['text-list'];
    let isHide = this.props.show?'':style['hide'];
    switch (this.props.type){
      case 'text':
        name = style['text-list'];
        break;
      case 'label':
        name = style['label-list'];
        break;
      default:
        name = style['text-list'];
    }
    return classNames(style['list'],name,isHide);
  }

  handleSelect(e,item){
    e.stopPropagation();
    let {select,ids} = this.state;
    const id = item.questionId
    if(ids.includes(id)){
      ids.splice(ids.indexOf(id),1);
      let selectData = select;  
      select.forEach((it,i)=>{
        if(it.questionId==id){
         selectData.splice(i,1); 
        }
      })
      select = selectData; 
    }else{
      ids.push(id);
      select.push(item);
    }
    this.setState({
      select,
      ids
    })
  }
  getStyle(id){
    const {ids} = this.state;
    if(ids.includes(id)){
      return style['selected'];
    }
    return '';
  }
  handleClear(e){
    e.stopPropagation();
    this.setState({
      select:[],
      ids:[]
    })
  }
  handleConfirm(e){
    e.stopPropagation();
    const {onSelect} = this.props;
    const {select,ids} = this.state;
    onSelect&&onSelect({select,ids});
  }

  componentDidMount(){
    const {hideSymptom} = this.props;
    $(document).click((e)=>{     
      let itemBox = $('#mainSuit')[0];
      let divBox = $('#symptBox')[0];
      let listBox = $('#listBox')[0];
      let operBox = $('#oper')[0];
      if(e.target != itemBox && e.target.parentNode != divBox && e.target.parentNode != listBox && e.target.parentNode != operBox){
        this.setState({
          hide:true,
          select:[],
          ids:[]
        })
      }else{
        this.setState({
          hide:false
        })
      }
    })
  }

  render(){ 
    const {data} = this.props;
    const {hide} = this.state;
    return <div className={this.getClass()} contenteditable="false" id="symptBox" style={{'display':hide?'none':'block'}}>
      <ul className={style["listBox"]} id="listBox">
        {data&&data.map((it)=>{
          return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getStyle(it.questionId)} title={it.name.length>5?it.name:''}>{it.name.length>5?it.name.slice(0,4)+'...':it.name}</li>
        })}
      </ul>
      <div className={style['oper']} id="oper">
        <span className={style['clear']} onClick={this.handleClear}>清空选项</span>
        <span className={style['confirm']} onClick={this.handleConfirm}>确定</span>
      </div>
    </div>
  }
}

export default CommonSymptom;