import React, {Component} from "react";
import SearchBox from '@containers/SearchBox'
import ListItem from '@components/ListItem';
import style from './index.less';

class ListItems extends Component{
  constructor(props){
    super(props);
    this.$cont = React.createRef();
    this.clickConfirm = this.clickConfirm.bind(this);
  }
  getLabels(){
    const {data,handleSelect} = this.props;
    let detail = [];
    let isSpecialPos = false;       //是否特殊位置（单行在上面，如无殊）
    let isExclu = false;      //是否与其他互斥
    let isRadio;      //是否为单选列，默认多选列
    let isSingle = data.length == 1?true:false; //是否为单列，无伴的情况
    const list = data&&data.map((it,i)=>{
      isSpecialPos = (+it.formPosition === 1);
      isExclu = (+it.exclusionType===1);
      isRadio = (+it.tagType ===1&&+it.controlType === 1);
      if(+it.controlType===0){
        detail = it.questionMapping;
      }else{
        detail = it.questionDetailList;
      }
      return <ListItem datas={detail}
                       isRadio={isRadio}
                       isSingle={isSingle}
                       joint={it.joint}
                       listIndex={i}
                       isSpecialPos={isSpecialPos}
                       isExclu={isExclu}
                       handleClick={handleSelect}
                       {...this.props}></ListItem>;
    });
    return list;
  }
  clickConfirm(){
    const {handleConfirm} = this.props;
    this.child&&this.child.reset();//重置搜索框中的数据
    handleConfirm();
  }
  getStyle(){
    const {show,left} = this.props;
    return {
      display:show?'block':'none',
      left:left
    }
  }
  searchSelect(item){
    const {handleSelect,handleConfirm} = this.props;
    //添加id字段，用于调尾巴
    const it = Object.assign({id:item.questionId},item);
    handleSelect&&handleSelect(it);     //添加到大数据推送一起选中
    handleConfirm&&handleConfirm();       //确定事件
  }
  getPushItemIds(list){         //获取推送症状的id数组，去重用
    return list&&list.map((it)=>{
      return it.conceptId;
    })||[];
  }
  render (){
    const {handleClear,order,parDiv,boxMark,tagType,show,data,pos} = this.props;
    const pushUl = data.find((it)=>it.controlType===99);
    const pushList = pushUl&&pushUl.questionDetailList;
    //推送标签没有推送结果时不显示顺序说明
    const noPush = tagType===11&&(!pushList||pushList.length===0);
    const noSearch = boxMark==1 && tagType==11 && !pos;       //非第一病程添加症状标签不显示搜索
    return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
      <div className='clearfix'>
        {noPush?'':<p className={order?style['orderTips']:style['orderTips-m']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>}
        <div className={style["oper"]}>
          <span className={style['clear']} onClick={handleClear}>清空选项</span>
          <span className={style['confirm']} onClick={this.clickConfirm}>确定</span>
        </div>
      </div>
      {this.getLabels()}
      {noSearch && <div className="search">
        <SearchBox show={show} pushIds={this.getPushItemIds(pushList)} onSelect={this.searchSelect.bind(this)} onRef={(child)=>{this.child = child;}}/>
      </div>}
    </div>
  }
}

export default ListItems;