newICSS/src/components/SpreadDrop/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import config from '@config/index.js';
import style from './index.less';
import {setPosition,deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
import {Notify} from '@commonComp';
import ScrollArea from 'react-scrollbar';
import SearchBox from '@containers/SearchBox'
import $ from 'jquery';
/****
 * 标签组合下拉,选中的项目展开
 * author:zn@2018-11-21
 * 接收参数：
 * data:下拉内容
 * value:选中成文
 * placeholder:灰显文字
 * ikey：当前标签的index
 * copyType:选中后是否复制本身（仅展开类型使用）
 * selecteds：选中选项（仅展开类型使用）
 * show：是否显示下拉
 * order：成文顺序，0点选顺序，1从上到下从左到右
 * isImports：是否高亮显示（仅查体中使用）
 * type:所在模块：现病史、查体等
 * tagType：标签类型
 * id:id
 * flag:仅主诉中使用
 *
 * ***/


class SpreadDrop extends Component{
  constructor(props){
    super(props);
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName} = deepClone(props.selecteds||[]);
    this.state = {
      nones:nones||'',       //无,字符串拼接
      exists:exists||[],      //主症状id
      excluName:excluName||'',
      withs:withs||[],       //伴随 id
      noneIds:noneIds||[],
      noneOn:noneOn||false,       //无是否选中
      withOn:withOn||false,       //伴是否选中
      nowOn:nowOn||'',           //最近选中“无”还是“伴”
      exclusion:exclusion||'',      //选中互斥项id
      timer:null,  //延时，区分单击双击
      ban:{},  //放'伴'字段
      editable:false,      //双击编辑
      labelVal:'',  //存放标签原有的值--主诉字数限制用
      left:'auto',
      tmpDom:null
    };
    this.$div = React.createRef();
    this.$list = React.createRef();
    this.handleSelect = this.handleSelect.bind(this);
    this.clearState = this.clearState.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleShow = this.handleShow.bind(this);
    this.handleConfirm = this.handleConfirm.bind(this);
    this.changeToEdit = this.changeToEdit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.onChange = this.onChange.bind(this);
    /*是否点击确定按钮标记，处理点击其他等同于确定操作bug,
      如不区分确定按钮提交和点击其他提交，确定按钮提交后会多更新一次状态导致数据重复*/
    this.btnClickFlag = false;
  }
  handleShow(e){//单击
    e&&e.stopPropagation();
    const {ikey,handleShow,placeholder,flag,id,value,tagType,type,data,windowWidth,setHighter} = this.props;
    let num = 0;//判断为五类切超出页面
    data && data.map((item)=>{
      if(item.formPosition != 1){
        ++num
      }
    });
    const listWidth = 30+$(this.$list.current).width();
    if(num >= 5 && windowWidth-getPageCoordinate(e).boxLeft < listWidth){
      this.setState({
        left:windowWidth-listWidth-150
      })
    }
    //高度超出时,增加左侧大容器padding
    setPosition(e,this.$list.current,setHighter);
    // window.event? window.event.cancelBubble = true : e.stopPropagation();
     this.setStateInit();      //恢复初始选中状态
    const that = this;
    this.btnClickFlag = false;
    clearTimeout(this.state.timer);
    this.state.timer = setTimeout(()=>{
      if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
        return
      }else{
        document.activeElement.blur()//chrome41有效，但是失去焦点的span仍能编辑
        $(e.target).parent().prev().attr({"contentEditable":false})
        this.setState({
          tmpDom:e.target
        })
        handleShow&&handleShow({ikey,placeholder,flag,id,value,tagType,type});
      }
    },300)

  }

  changeToEdit(e){//双击
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    const {value,id,placeholder,handleDbclick,handleHide} = this.props;
    let text = e.target.innerText || e.target.innerHTML;
    handleHide&&handleHide();       //展开情况下双击收起
    // clearTimeout(this.state.timer);//取消延时的单击事件
    e.stopPropagation();
    // e.preventDefault();
    if(value&&value.trim()){//有选中值的标签才能双击编辑
      this.setState({
        labelVal:text,
        editable:true
      });
      //失焦关闭编辑状态
      setTimeout(()=>{
        e.target.focus();
      })
      handleDbclick && handleDbclick({value,id,placeholder});
    }
  }

  onChange(e){
    const {mainSaveText,ikey,type,handleLabelChange} = this.props;
    const {labelVal,editable} = this.state;
    let mainText = filterDataArr(mainSaveText);//主诉字数
    if(editable){//避免IE中点击标签也会触发
      let val = e.target.innerText || e.target.innerHTML;
      if(+type==1){// 主诉字数达到上限时不允许输入
        if(mainText.length >= config.limited){
          if(val.length > labelVal.length){
            e.target.innerText?(e.target.innerText = labelVal):(e.target.innerHTML = labelVal);
            Notify.info(config.limitText);
            return
          }else if(val.length == labelVal.length){
            this.setState({
              labelVal:val
            });
          }else{
            handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
          }
        }
      }
    }
  }

  handleBlur(e){
    e.stopPropagation();
    const {ikey,type,handleLabelChange} = this.props;
    const {editable} = this.state;
    const ev = e || window.event;
    if(editable){
      // 更改标签的value值
      let changeVal = ev.target.innerText || ev.target.innerHTML;
      if(!isIE()){
        e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML = '');      //避免出现重复输入值
      }
      handleLabelChange && handleLabelChange({ikey,changeVal,type});
    }
    this.setState({
      editable:false
    });


  }
  setStateInit(){
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName,ban} = deepClone(this.props.selecteds||[]);
    this.setState({
      nones:nones||'',
      exists:exists||[],
      excluName:excluName||'',
      withs:withs||[],
      noneIds:noneIds||[],
      noneOn:noneOn||false,
      withOn:withOn||false,
      nowOn:nowOn||'',
      exclusion:exclusion||'',
      ban:ban||{},
    });
  }
  clearState(){
    this.setState({
      nones:'',
      exists:[],
      //existsName:{},
      //withsName:{},
      withs:[],
      noneIds:[],
      noneOn:false,
      withOn:false,
      nowOn:'',
      exclusion:'',
      excluName:'',
      ban:{}
    });
    this.btnClickFlag = false;
  }
  handleClear(e){
    e.stopPropagation();
    this.clearState();
  }
  handleConfirm(e){
    // e.stopPropagation();
    const {handleConfirm,ikey,type,tagType,order,mainSaveText,copyType,value,mainData} = this.props;
    const params = Object.assign({},this.state,{ikey,type,tagType,order,mainSaveText,copyType,value,mainData});
    delete params.tmpDom;       //避免上面deepClone selecteds报错
    handleConfirm&&handleConfirm(params);
	this.btnClickFlag = true;
    //点确定后隐藏弹窗
    this.props.handleHide();
  }
  handleSelect(item,isExclu,joint,listIndex,selected){//console.log(item,selected)
    let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
    /*if(this.props.selecteds)
    console.log(exists,this.props.selecteds.exists,exists===this.props.selecteds.exists)*/
    const id = item.id;
    const linkStr = joint||'';
    const name = item.name+linkStr;
    if(isExclu){      //操作“互斥项”
      if([...noneIds,...exists,...withs].length>0){     //已选非互斥项，清空已选项，选中该互斥项
        this.clearState();
        this.setState({
          exclusion:id,
          excluName:name
        });
        return;
      }
      //未选中互斥项，直接选中该互斥项
      let temp = '';
      if(exclusion==''){
        temp = id;
      }else if(exclusion!=''&&exclusion!==id){
        temp = exclusion;
      }
      this.setState({
        exclusion:temp,
        excluName:temp ===''?'':name
      });
      return;
    }
    //操作单选项
    if(selected){
      const tIndex= exists.findIndex((it)=>it.questionId===item.questionId);
      const bIndex= withs.findIndex((it)=>it.questionId===item.questionId);
      if(tIndex!=-1){
        exists.splice(tIndex,1,Object.assign({},item,{name}));    //修改单选列连接字符不显示bug
        this.setState({
          exists,
        })
      }
      if(bIndex!=-1){
        withs.splice(tIndex,1,item);
        this.setState({
          withs,
        })
      }
      return;
    }
    if(exclusion!==''){     //互斥项已选中，清空互斥项
      this.setState({
        exclusion:'',
        excluName:''
      });
    }
    if(+item.code===1){     //操作“伴”类型
      this.setState({
        withOn:!withOn,
        // withs:withOn?[]:[...withs,id],     //取消“伴”选中，伴随症状全部取消选中    
        // withs:withOn?[]:[...withs,{id:item.id,name:name}],
        withs:withOn?[]:withs,
        ban:withOn?{}:{id:id,name:name,value:name},
        //withsName:withOn?"":withsName+name,     //取消“伴”选中，伴随症状全部取消选中
        nowOn:withOn?(noneOn?'none':''):'with'
      });
      return;
    }
    if(+item.code===2){     //操作“无”类型
      this.setState({
        noneOn:!noneOn,
        noneIds:noneOn?[]:[...noneIds,id],
        nones:noneOn?'':name,
        nowOn:noneOn?(withOn?'with':''):'none'
      });
      return;
    }
    //操作普通项
    let existsIds = exists.length>0? getIds(exists):[];
    let withsIds = withs.length>0? getIds(withs):[];


    if(existsIds.includes(id)){
      let existsData = exists;
      exists.forEach((it,i)=>{
        if(it.id==id){
         existsData.splice(i,1); 
        }
      })
      exists = existsData;
    }else if(noneIds.includes(id)){
      nones = nones.replace(name+'、','');
      noneIds.splice(noneIds.indexOf(id),1);
    }else if(withsIds.includes(id)){
      let withsData = withs;
      withs.forEach((it,i)=>{
        if(it.id==id){
         withsData.splice(i,1); 
        }
      })
      withs = withsData;
    }else{        //选中普通项
      if(nowOn=='none'){
        nones += name+'、';
        noneIds.push(id);
      }else if(nowOn=='with'){
        // withs.push({id:id,name:name,questionId:item.questionId});
        withs.push({id:id,name:name,questionId:item.questionId,conceptId:item.conceptId});
      }else{
        // exists.push({id:id,name:name,listIndex,questionId:item.questionId});
        exists.push({id:id,name:name,listIndex,questionId:item.questionId,conceptId:item.conceptId});
      }
    }
    this.setState({
      nones,
      noneIds,
      exists,
      withs,
      ban
      //existsName,
      //withsName,
    });
  }
  getClass(){
    const {isImports,show,value,isExtBlue} = this.props;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const orgBorder = isImports&&!value?style['orange-border']:'';
    const ext = isExtBlue?style['ext']:'';
    if(show){
      $(this.$div.current).addClass(style['borderd']);
    }else{
      $(this.$div.current).removeClass(style['borderd']);
    }
    if(value){
      return classNames(style['selected-tag'],blueBorder);
    }
    return classNames(style['tag'],orgBorder,ext);
  }

  componentDidMount(){
    if(isIE()){
      $(this.$div.current).onIe8Input(function(e){
        this.onChange(e)
      },this);
    }
  }
  /*componentWillReceiveProps(nextProps){
    const {setHighter} = this.props;
    if(!nextProps.show){console.log(22)
      setHighter&&setHighter(48);
    }
  }*/
  render(){
    const {placeholder,value,show,data,order,type,tagType,ikey} = this.props;
    const {tmpDom,left} = this.state
    const clickIndx = ikey.split('-')[1];//展开下拉的index
    if(!show&&tmpDom){
      $(tmpDom).parent().prev().attr({"contentEditable":true})
    }
    const {editable} = this.state;
    return  <div className={style['container']}
              onFocus={(e)=>e.stopPropagation()}
              onBlur={(e)=>e.stopPropagation()}
              onInput={(e)=>e.stopPropagation()}>
        <div
        ref={this.$div}
        onClick={this.handleShow}
        className={this.getClass()}
        contentEditable={editable}
        onDoubleClick={this.changeToEdit}
        onBlur={this.handleBlur}
        onInput={this.onChange}
        onkeydown={handleEnter}
        >{value||placeholder}</div>
          <ListItems parDiv={this.$list} data={data} order={order} left={left} boxMark={type} tagType={tagType}
             show={show} cliIndex={clickIndx} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>
      </div>
  }
}

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
    }
  }
  render (){
    const {handleClear,handleConfirm,order,parDiv,boxMark,tagType,show,cliIndex} = this.props;
    return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
        <p className={style['orderTips']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>
        {this.getLabels()}
        <div className="oper clearfix">
          <span className={style['clear']} onClick={handleClear}>清空选项</span>
          <span className={style['confirm']} onClick={this.clickConfirm}>确定</span>
        </div>

        {boxMark==1 && tagType==11 && <div className="search">
                  <div className={style["line"]}></div>
                  <SearchBox show={show} cliIndex={cliIndex} onSelect={handleConfirm} onRef={(child)=>{this.child = child;}}/>
                </div>}
      </div>
  }
}

class ListItem extends Component{
  constructor(props){
    super(props);
    this.getData = this.getData.bind(this);
  }
  handleClick(e,item,i){
    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);
  }
  getClass(id){     //无之后显示黑色，之前显示蓝色
    const {exclusion,nones,noneIds,exists,withs,isExclu,ban} = this.props;
    if(exclusion!=''){
      if(+id===+exclusion){
        return style['selected'];
      }else{
        return style['exclusion'];
      }
    }else{
      if(isExclu&&([...noneIds,...exists,...withs].length>0||ban.id)){
        return style['exclusion'];
      }
      if(noneIds.includes(id)){
        return style['none-selected'];
      }
      let existsIds = getIds(exists);
      let withsIds = getIds(withs);
      // if(existsIds.includes(id)||withsIds.includes(id)){
      if(existsIds.includes(id)||withsIds.includes(id)||ban.id && ban.id==id){
        return style['selected'];
      }

      return '';
    }
  }
  getData(){
    const {datas,isSpecialPos} = 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>11){
      return <ScrollArea speed={0.8}
                    horizontal={false}
                    stopScrollPropagation={true}
                    style={{maxHeight:'330px'}}
                    className={style["area"]}
                    verticalContainerStyle={contStyle}
                    verticalScrollbarStyle={barStyle}
                    contentClassName="content">
          {datas&&datas.map((it,i)=>{
            if(isSpecialPos){
              return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
            }
            return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
          })}
        </ScrollArea>;
    }
    return datas&&datas.map((it,i)=>{
      if(isSpecialPos){
        return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
      }
      return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
    });
  }

  getMainData(){//主诉添加症状-带搜索框
    const {datas,isSpecialPos} = this.props;
    return datas&&datas.map((it,i)=>{
      return <li onClick={(e)=>this.handleClick(e,it,i)}
            className={this.getClass(it.id)}
            title={it.name.length>4?it.name:''}
            style={{'width':'55px','display':'inline-block'}}>
            {it.name&&it.name.length>4?it.name.slice(0,4)+'...':it.name}
          </li>
    });
  }

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