newICSS/src/components/CheckBody/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import {Button,InlineTag,ItemBox,EditableSpan,Notify} from '@commonComp';
import chooseType from '@containers/eleType.js';
import SearchDrop from '@components/SearchDrop';
import {getPageCoordinate,windowEventHandler,isIE,filterDataArr} from '@utils/tools';
import $ from "jquery";
import showImg from "../../common/images/show.png";
import hideImg from "../../common/images/close.png";
import config from '@config/index';

class CheckBody extends Component{
  constructor(props){
    super(props);
    this.state={
      boxMark:'4',
      boxLeft:0,
      boxTop:0,
      tmpScroll:0,
      tmpTop:0,
      showAll:false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.getData = this.getData.bind(this);
    this.showHide = this.showHide.bind(this);
    //this.handleInput = this.handleInput.bind(this);
  }
  componentWillReceiveProps(next){
    if((this.props.defaultShowAll&&!next.defaultShowAll)||(!this.props.defaultShowAll&&next.defaultShowAll)||(!this.props.isEmpty&&next.isEmpty)){
      this.setState({
        showAll:next.defaultShowAll
      })
    }
    this.setState({boxLeft:next.boxLeft})
  }
  isThereHigh(arr,ids){
    const item = arr.find((it)=>{
      return ids.includes(it.id);
    });
    if(item){
      return true;
    }
    return false;
  }
  getLabels(){
    const {data,showArr,saveText,selecteds,importLabel} = this.props;
    let arr = [],list=[];
    const {boxMark,showAll} = this.state;
    const moreNum =data.length-[...data].reverse().findIndex((it)=>it.showInCheck)-1;//被隐藏的位置
    const moreText = filterDataArr([...saveText].splice(moreNum+1));     //被收起的标签中是否有有值得，有则不能再收起showMoreBtn?more:''
    const hasHigh = this.isThereHigh([...data].splice(moreNum+1),importLabel);         //隐藏的标签中是否有高亮的
    const more = showAll?<span className={style['more']} onClick={this.showHide}>收起<img src={hideImg} /></span>:<span className={style['more']} onClick={this.showHide}>展开<img src={showImg} /></span>;
    const showMoreBtn = data.length>config.showCheckNum&&(data.length-1>moreNum&&!data[0].full)&&!moreText&&!hasHigh;
    let showArray = data.filter((it)=>{
      if(it.showInCheck)
        return it;
    });
    const showData = moreText||hasHigh||showAll?[...data]:showArray;//[...data].splice(0,config.showCheckNum*2+1);
    if(showData){
      list = showData;
      arr = list.map((it,i)=>{
        return chooseType({item:it,boxMark,i,showArr,saveText,selecteds,importLabel});
      });
    }
    showMoreBtn&&arr.push(more);      //是否显示收起展开按钮
    return arr;
  }
  handleClick(e){//让搜索框跟随鼠标点击移动
    // e.stopPropagation();
    const {totalHide,getSearchLocation} = this.props;
    this.getData();
    if(totalHide){
      return ;
    }
    //若使用e.target，因为是onClick事件中，值可能是itembox的而不是span因此会有bug
    
    let leftL=0;      //用焦点元素的左边距替换鼠标点击的左边距，高度还是鼠标点击的位置
    if(isIE()){
      leftL = getPageCoordinate(e).boxLeft
    }else{
      const ele = document.activeElement;
      if(ele.toString().indexOf('HTMLSpanElement') != -1){     //点击的不是span无法聚焦就不再设置位置
        leftL = ele.offsetLeft+90
      }
    }
    getSearchLocation(getPageCoordinate(e).boxTop,leftL);
    this.setState({
      tmpScroll: $("#addScrollEvent")[0].scrollTop,
      tmpTop:getPageCoordinate(e).boxTop
    });
    windowEventHandler('scroll',()=>{      //弹窗跟随滚动条滚动或者关闭弹窗
      let scrollYs = $("#addScrollEvent")[0].scrollTop;
      let boxTop = this.state.tmpTop - scrollYs + this.state.tmpScroll;
      getSearchLocation(boxTop,this.state.boxLeft)
    },$("#addScrollEvent")[0])
  }
  handleSearchSelect(obj){
   const {questionId,name} = obj;
   const {fetchModules,focusTextIndex,span,searchInEnd} = this.props;
    fetchModules&&fetchModules({id:questionId,index:focusTextIndex,name,span,searchInEnd});
  }
  getData(){
    //第一次聚焦查体时，主诉有数据则调接口，主诉无数据则显示提示；其他时间查体模板数据不调接口
    const {hasMain,isEmpty} = this.props;
    if(!hasMain&&isEmpty){
      Notify.error("无法操作，请先输入主诉");
      return;
    }
    //无主诉提示在EditableSpan里
    //有主诉时且本身无数据，第一次点击获取数据，(不论获取成功与否)再点击不获取（直到刷新成空白页或清空）
    if(hasMain&&isEmpty!=false){
      this.props.getInit();
    }
  }
  showHide(){
    this.setState({
      showAll:!this.state.showAll
    });
  }
  render(){
    const {searchData,totalHide,data,boxLeft,boxTop,saveText} = this.props;

    return <ItemBox title='查体' handleClick={this.handleClick}>
        {this.getLabels()}
        {/*{showMoreBtn?more:''}*/}
        {searchData && searchData.length>0?<SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>:''}
      </ItemBox>
  }
}

export default CheckBody;