import classNames from "classnames";
import {Component} from "react";
import ScrollArea from 'react-scrollbar';
import {getIds} from '@utils/tools.js';
import LiItem from '@common/components/LiItem';
import style from './index.less';

class ListItem extends Component{
  constructor(props){
    super(props);
    this.getData = this.getData.bind(this);
    this.getLis = this.getLis.bind(this);
  }
  handleClick(item,i,e){
    e.stopPropagation();
    // window.event? window.event.cancelBubble = true : e.stopPropagation();
    const {handleClick,isExclu,isRadio,data,exists,noneIds,withs,joint,listIndex} = this.props;
    const index=listIndex+''+i;
    //列单选处理
    if(isRadio){
      let selected = exists.find((i)=>{
        return i.questionId===item.questionId;
      })||withs.find((i)=>{
        return i.questionId===item.questionId;
      })||noneIds.find((i)=>{
        return i.id===item.questionId;
      });
      /*const selected = data.find((it)=>{console.log(exists)
        return exists.findIndex((i)=>i.questionId===it.id)!==-1||noneIds.includes(it.id)||withs.findIndex((i)=>i.questionId===it.id)!==-1;
      });*/
      if(selected&&selected.id!=item.id){     //该列已有选中项，传回已选中的id,name取消选中
        handleClick&&handleClick(item,isExclu,joint,index,{id:selected.id,name:selected.name,questionId:selected.questionId});
      }else{
        handleClick&&handleClick(item,isExclu,joint,index);
      }
      return;
    }
    handleClick&&handleClick(item,isExclu,joint,index);
  }
  getLis(){
    const {exclusion,noneIds,exists,withs,ban,isSpecialPos,datas} = this.props;
    let type='';    //选中样式类型
    let selected = false;  //是否选中
    const list = Object.keys(ban).length>0?[...exists,...withs,ban]:[...exists,...withs];
    const arrs = [...noneIds,...getIds(list)];   //非无殊选中项id集合
    return datas&&datas.map((it,i)=>{
      if(isSpecialPos){
        //无殊部分，非无殊项有选中，则无殊项灰显（仍可点，选中非无殊项取消选中，反之亦然）
        selected = exclusion===it.id;
        return <LiItem handleClick={this.handleClick.bind(this,it,i)}
                       key={it.id}
                       noHover={true}
                       selected={selected}
                       noDot={true}
                       disabled={(exclusion&&!selected)||arrs.length>0}
                       type='check'
                       >{it.name}</LiItem>
      }
      //非无殊项，有无殊项被选中，则灰显，“无”选中黑√随后选中的项也黑√选中，
      type = noneIds.includes(it.id)?'noneCheck':'check';
      selected = arrs.includes(it.id);
      return <LiItem handleClick={this.handleClick.bind(this,it,i)}
                     key={it.id}
                     type={type}
                     noHover={true}
                     selected={selected}
                     disabled={exclusion}
                     title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</LiItem>
    })
  }
  getData(){
    const {datas} = this.props;
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'6px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    if(!datas||datas.length===0){
      return <li className={style['no-push-data']}>暂无推送</li>
    }
    const liArr = this.getLis();
    if(datas&&datas.length>11){
      //超过最多显示条数，添加自定义滚动条，不能全部添加，不需要滚动条时不能阻止外部滚动条滚动事件
      return <ScrollArea speed={0.8}
                         horizontal={false}
                         stopScrollPropagation={true}
                         style={{maxHeight:'330px'}}
                         className={style["area"]}
                         verticalContainerStyle={contStyle}
                         verticalScrollbarStyle={barStyle}
                         contentClassName="content">
        {liArr}
      </ScrollArea>;
    }
    return liArr;
  }

  getMainData(){//主诉添加症状-带搜索框
    const {exists,withs,ban,datas} = this.props;
    if(!datas||datas.length===0){
      return <li className={style['no-push-data']}>暂无推送数据，可通过搜索查找更多内容~ </li>
    }
    const arrs = getIds([...exists,...withs,ban]);   //非无殊选中项id集合
    return datas&&datas.map((it,i)=>{
      return <LiItem handleClick={this.handleClick.bind(this,it,i)}
                 key={it.id}
                 noHover={true}
                 selected={arrs.includes(it.id)}
                 title={it.name.length>4?it.name:''}
                 style={{'width':'58px','display':'inline-block'}}>
        {it.name&&it.name.length>4?it.name.slice(0,4)+'...':it.name}
      </LiItem>
    });
  }

  render(){
    const {isSpecialPos,boxMark,tagType,listIndex,isSingle,pos} = this.props;
    const posit = isSpecialPos?style['independent']:'';
    const ifMainSear = boxMark==1 && tagType==11 && !pos?true:false;
    // 单列直接设置宽度，多列则第二列设置(伴字ul不设置宽度)
    const main = ifMainSear&&!isSingle&&listIndex==1?style['mainUl']:(ifMainSear&&isSingle?style['mainUl']:'');
    return  <ul className={classNames(style['row'],posit,main)} onBlur={(e)=>e.stopPropagation()}>
      {ifMainSear?this.getMainData():this.getData()}
    </ul>
  }
}

export default ListItem;