newICSS/src/components/MainSuit/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import {Button,InlineTag,ItemBox,DropDown,DropList,Textarea,Notify} from '@commonComp';
import TailInlineTag from '@commonComp/TailInlineTag';
import SearchDrop from '@components/SearchDrop';
import CommonSymptom from '@components/CommonSymptom';
import chooseType from '@containers/eleType.js';
import config from "@config/index";
import {isIE,getPageCoordinate,windowEventHandler} from "@utils/tools.js"
import $ from 'jquery';

class MainSuit extends Component{
  constructor(props){
    super(props);
    this.state = {
      boxEditable:true,
      show:false,
      showModule:false,
      inputData:"",
      boxLeft:null,
      boxTop:null,
      selecSearch:"",
      symptom:false,
      search:false,
      timer:null,
      blurTimer:null,
      inpText:'',
      clearTimer:null,
      overFlag:false,
      tmpScroll:0,
      tmpTop:0,
    };
    this.toggleEditable = this.toggleEditable.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }
  toggleEditable(){
    this.setState({
      boxEditable:!this.state.boxEditable
    })
  }


  getInlineTag(){
    const {datas,showArr,handleTailClick,selecteds,saveText,addModuleName,mainIds} = this.props;
    const boxMark = '1';
    let list = datas&&datas.map((item,i)=>{
      if(item.flag && item.flag==3){
        return <TailInlineTag {...item} showText={addModuleName} handleTailClick={(obj)=>{handleTailClick(obj,saveText)}}></TailInlineTag>
      }else {
        return chooseType({item,boxMark,i,hideTag:false,showArr,selecteds,saveText,mainIds});
      }

    })
    return list;
  }


  handleFocus(e){
    e.stopPropagation();
    const {getCommonSymptoms,datas} = this.props;
    let innerText = e.target.innerText;
    if(!isIE()){//IE会触发onfocus和onblur事件
      if(!innerText.trim()){//有内容就走搜索接口
        getCommonSymptoms && getCommonSymptoms();
        this.setState({
          symptom:true
        })    
      }else{
        this.setState({
          symptom:false,
          inpText:innerText
        }) 
      }
    }else{
      if(datas.length==0 && !innerText.trim()){
        getCommonSymptoms && getCommonSymptoms();
        this.setState({
          symptom:true
        })  
      }
    }
    
  }


  /*handleShow(e,show){
    e.stopPropagation();
    if(e.target.tagName=="INPUT"){
      return ;
    }
  }*/

  handleSelect(item){//选中的常见症状
    const {clearCommS,insertMain,getData} = this.props;
    // 获取主诉模板
    getData && getData();
    // 让模板出现
    this.setState({
        showModule:true,
        symptom: false,
      }) 
    //选中后清空下拉结果
    insertMain && insertMain(item);
    clearCommS && clearCommS();
    
  }


  handleSearchSelect(item){
    const {clearSearch,insertSearch,datas,span} = this.props;
    clearTimeout(this.state.timer);
    if(datas.length==0){//没有使用模板时点击搜索结构要展开模板
      insertSearch &&insertSearch({item,span});
      this.setState({
        search: false,
        showModule:true,
        inpText:''
      })
    }else{
      insertSearch &&insertSearch({item,span});
      this.setState({
        search: false,
      })
    }
    
     // 清空搜索结果
     clearSearch && clearSearch();
  }


  handleClick(e){//让搜索框跟随鼠标点击移动
    // e.stopPropagation(); //冒泡到最顶层关闭其他下拉
    //若使用e.target，因为是onClick事件中，值可能是itembox的而不是span因此会有bug  
    const ele = document.activeElement;
    // console.log(ele.toString())
    if(ele.toString().indexOf('HTMLSpanElement') == -1){     //点击的不是span无法聚焦就不再设置位置
      return;
    }
    const leftL = ele.offsetLeft;      //用焦点元素的左边距替换鼠标点击的左边距，高度还是鼠标点击的位置
    this.setState({
      // boxLeft:getPageCoordinate(e).boxLeft,
      boxLeft:leftL+90,
      boxTop:getPageCoordinate(e).boxTop,
      tmpScroll: $("#addScrollEvent")[0].scrollTop,
      tmpTop:getPageCoordinate(e).boxTop
    });
    windowEventHandler('scroll',()=>{      //弹窗跟随滚动条滚动或者关闭弹窗
      let scrollYs = $("#addScrollEvent")[0].scrollTop;
      this.setState({
        boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
      })
    },$("#addScrollEvent")[0])
  }

  handleChange(e){
    const ev = e || window.event;
    const data = ev.target.innerText;
    const {getSearchData,searchData,datas,pushMessage,reTotalHide} = this.props;
    const {overFlag,inpText} = this.state;
    reTotalHide && reTotalHide();//重置homePage中的控制项
    const that = this;
    if(data&&data.length > config.limited){
      Notify.info(config.limitText);
      if(overFlag){
        ev.target.innerText = inpText;
        ev.target.blur();
        return
      }
      ev.target.innerText = data.substr(0,config.limited);  //输入法内输入多个字再按enter的情况
      ev.target.blur();
      this.setState({
        inpText:data.substr(0,config.limited),
        overFlag:true
      })
      return false;
    }
    this.setState({
      inpText:data,
      overFlag:false
    })
    if(datas && datas.length > 0){//使用模板
      return false;
    }
    // 有输入内容或搜索结果时关闭，否则显示
    if(data && data.trim()||searchData.length>0){
      this.setState({
        symptom:false
      })
    }else{
      this.setState({
        symptom:true
      })
    }
    clearTimeout(this.state.timer);
    const timer = setTimeout(function(){
      pushMessage && pushMessage(data);
      //调搜索接口 使用模板走EditableSpan里的搜索方法
      getSearchData && getSearchData({inpStr:data,boxMark:1});
    },config.delayTime);
    this.setState({
      timer
    });

  }

  handleBlur(e){//隐藏常见症状下拉、存自由输入的值
    const {freeText,saveText,datas} = this.props;
    const that = this;
    let data = this.state.inpText;
    if(!isIE()){
      e.target.innerText="";
      freeText && freeText(data.trim());
    }else{
      if(datas.length==0){
        const ev = e || window.event;
        const data = ev.target.innerText;
        // freeText && freeText(data.trim());
        freeText && freeText(data);
      }
    }
    // 延时关闭常见症状下拉，不延时会影响选中
      clearTimeout(this.state.clearTimer);
      const clearTimer = setTimeout(function(){
        that.setState({
          symptom:false
        })
      },config.delayTime-200);
      this.setState({
        clearTimer
      });
    
  }


  render(){
    const {type,CommonSymptoms,searchData,fetchPushInfos,isRead,totalHide,handleInput,fuzhen,saveText,editClear,datas,commSymHide} = this.props;
    const {showModule,boxLeft,boxTop,show,symptom,search} = this.state;
    const symptomFlag = CommonSymptoms.length>0 ? true : false;
    const searchFlag = searchData.length>0 ? true : false;
    if(+type===1){      //文本模式
      return <Textarea title='主诉' boxMark='1' isRead={isRead} value={saveText[0]} handlePush={fetchPushInfos} handleInput={handleInput} />;
    }
    return  <div className={`${'mainsuit-box'} ${style['main-suit']}`} id="mainsuitBox">
      <ItemBox 
      fuzhen={fuzhen} 
      title='主诉' 
      editable={editClear||datas.length==0?true:false} 
      boxLineHeight="24px"
      handleFocus={this.handleFocus} 
      onchange={(e)=>{this.handleChange(e)}} 
      handleClick={this.handleClick} 
      handleBlur={this.handleBlur}
      data={datas}>
        {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:(saveText[0]?saveText[0]:'')}
      </ItemBox>
      {/*没有推送结果就不显示*/}
      {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:"")}
    </div>
  }
}

export default MainSuit;