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,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate,setFontColorSize,handleMouseUp} from '@utils/tools.js';
import {Notify} from '@commonComp';
import ListItems from '@components/ListItems';
import CommonSymptom from '@components/CommonSymptom';
import $ from 'jquery';
/****
 * 标签组合下拉,选中的项目展开
 * author:zn@2018-11-21
 * 接收参数：
 * data:下拉内容
 * value:选中成文
 * placeholder:灰显文字
 * ikey：当前标签的index
 * copyType:选中后是否复制本身（仅展开类型使用）
 * data.selecteds：选中选项（仅展开类型使用）
 * show：是否显示下拉
 * order：成文顺序，0点选顺序，1从上到下从左到右
 * isImports：是否高亮显示（仅查体中使用）
 * type:所在模块：现病史、查体等
 * tagType：标签类型
 * id:id
 * flag:仅主诉中使用
 * isExtBlue:是否为查体生命体征标签蓝色显示
 *
 * ***/


class SpreadDrop extends Component{
  constructor(props){
    super(props);
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName} = deepClone(props.selecteds||[]);
    const initEx = this.getInitExclu();
    this.state = {
      nones:nones||'',       //无,字符串拼接
      exists:exists||[],      //主症状id
      excluName:excluName||initEx.excName,
      withs:withs||[],       //伴随 id
      noneIds:noneIds||[],
      noneOn:noneOn||false,       //无是否选中
      withOn:withOn||false,       //伴是否选中
      nowOn:nowOn||'',           //最近选中“无”还是“伴”
      exclusion:exclusion||initEx.excluId,      //选中互斥项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,CommonSymptoms} = this.props;
    let num = 0;//判断为五类切超出页面
    data && data.map((item)=>{
      if(item.formPosition != 1){
        ++num
      }
    });
    const listWidth = 30+$(this.$list.current).width();
    const wleft = getPageCoordinate(e).boxLeft;
    if(num >= 4 && windowWidth-wleft < listWidth){
      this.setState({
        left:windowWidth-wleft-listWidth-50
      })
    }else{
      this.setState({
        left:'auto'
      })
    }
    //高度超出时,增加左侧大容器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,hasCommon:CommonSymptoms.length>0});
      }
    },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
    });
  }
  getInitExclu(){
    const {defaulted,data,value} = this.props;
    let excluId = '',excName='';
    let showDefaulted = this.ifDefault();
    if(showDefaulted&&defaulted&&value===undefined){
      const it = data[0];
      excluId = it.exclusionType===1?it.questionDetailList[0].id:'';
      excName = it.exclusionType===1?it.questionDetailList[0].name:'';
    }
    return {
      excluId,
      excName
    }
  }
  setStateInit(){
    const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName,ban} = deepClone(this.props.selecteds||[]);
    const initEx = this.getInitExclu();
    this.setState({
      nones:nones||'',
      exists:exists||[],
      excluName:excluName||initEx.excName,
      withs:withs||[],
      noneIds:noneIds||[],
      noneOn:noneOn||false,
      withOn:withOn||false,
      nowOn:nowOn||'',
      exclusion:exclusion||initEx.excluId,
      ban:ban||{},
    });
  }
  clearState(){
    this.setState({
      nones:'',
      exists:[],
      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){
    let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
    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;
      }
      //未选中互斥项，直接选中该互斥项
      console.log(id,isExclu,joint,listIndex,selected,exclusion,name)
      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,
        ban:withOn?{}:{id:id,name:name,value: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,conceptId:item.conceptId});
      }else{
        exists.push({id:id,name:name,listIndex,questionId:item.questionId,conceptId:item.conceptId});
      }
    }
    this.setState({
      nones,
      noneIds,
      exists,
      withs,
      ban
      //existsName,
      //withsName,
    });
  }
  handleCommonSelect(obj){
    const {handleConfirm,tagType,ikey,mainData,mainSaveText,type} = this.props;
    const param = {tagType,ikey,exists:obj.select,type,mainData,mainSaveText,withs:[],nones:'',ban:{},noneIds:[],isCommon:true};
    handleConfirm&&handleConfirm(param);
    this.btnClickFlag = true;
    //点确定后隐藏弹窗
    this.props.handleHide();
  }
  getClass(){
    const {isImports,show,value,isExtBlue,defaulted,mouseSelect} = this.props;
    const blueBorder = this.state.editable?style['blue-border']:'';
    const orgBorder = isImports&&!value?style['orange-border']:'';
    const selectedArea = mouseSelect?style['selected-area']:'';
    const ext = isExtBlue?style['ext']:'';
    let showDefaulted = this.ifDefault();
    if(show){
      $(this.$div.current).addClass(style['borderd']);
    }else{
      $(this.$div.current).removeClass(style['borderd']);
    }
    if(value||(showDefaulted&&value===undefined&&defaulted)){
      return classNames(style['selected-tag'],blueBorder,setFontColorSize(),selectedArea);
    }
    if(!value){
      return classNames(style['tag'],orgBorder,ext,setFontColorSize(2,6),selectedArea);
    }
    return classNames(style['tag'],orgBorder,ext,setFontColorSize(1),selectedArea);
  }
  ifDefault(){
    const {type,otherDefault,curDefault,showVal} = this.props;
    const showDefaulted = ((type=='2'&&curDefault)||(type=='3'&&otherDefault))&&showVal;
    return showDefaulted;
  }
  handleMouseDown(){
    const {i,setSelectArea,boxMark}= this.props;
    !this.state.editable&&setSelectArea({i,boxMark,dir:'start'});
  }
  componentDidMount(){
    if(isIE()){
      $(this.$div.current).onIe8Input(function(e){
        this.onChange(e)
      },this);
    }
  }
  render(){
    const {placeholder,value,show,data,order,type,tagType,pos,defaulted,showVal,CommonSymptoms,select_start,i,boxMark} = this.props;
    const {tmpDom,left} = this.state;
    let showDefaulted = this.ifDefault();
    let showV = showDefaulted&&value===undefined?showVal:value;      //未选中过值时展示默认选中
    const noPushData = (+tagType===11)&&(!data[1]||!data[1].questionDetailList||data[1].questionDetailList.length===0);    //无推送数据
    const showCommonData = (+type===2)&&(+tagType===11)&&noPushData&&CommonSymptoms.length>0?true:false;
    if(!show&&tmpDom){
      $(tmpDom).parent().prev().attr({"contentEditable":true})
    }
    const {editable} = this.state;
    return  <div className={style['container']}
              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}
        onMouseUp={()=>handleMouseUp({select_start,i,boxMark})}
        onMouseDown={this.handleMouseDown.bind(this)}
        >{showV||placeholder}</div>
      {showCommonData&&show?<CommonSymptom data={CommonSymptoms} show={true} onSelect={this.handleCommonSelect.bind(this)} isCurrent={true} />:
          <ListItems parDiv={this.$list} defaulted={showDefaulted&&defaulted} pos={pos} data={data} order={order} left={left} boxMark={type} tagType={tagType}
             show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>}
      </div>
  }
}

export default SpreadDrop;