newICSS/src/components/CurrentIll/index.jsx

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

class CurrentIll extends Component{
  constructor(props){
    super(props);
    this.state = {
      boxEditable:true,
      forbidInput:false,
      boxLeft:0,
      boxTop:0,
      setDataTimer:null
    }
    this.toggleEditable = this.toggleEditable.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.onchange = this.onchange.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  toggleEditable(){
    this.setState({
      boxEditable:!this.state.boxEditable
    })
  }

  handleFocus(e){
    // 判断主诉是否为空
    const {mainData,mainText,setData,moduleNum,mainIds,mainTailIds,data,changeEditIll,editClear,symptomFeature,isChronic} = this.props;
    const that = this;
    const ev = e || window.event;
    const text = ev.target.innerText || ev.target.innerHTML;
    let {setDataTimer} = this.state; 
    let mainFinallyText = filterDataArr(mainText);
    if(!mainFinallyText && !text){
      //弹窗提醒
      Notify.error("无法操作，请先输入主诉");
      this.setState({
        forbidInput:true
      })
    }else if(!text || (isIE() && text=='<br>')) {//现病史框里没有内容时才设置模板
      let num = moduleNum.num;//主诉使用了几个模板
      if(data.length==0 && !isChronic){
        clearTimeout(setDataTimer);
        setDataTimer = setTimeout(function(){//延时，等待主诉失焦数据返回
            setData && setData({num,mainData,mainIds,symptomFeature:symptomFeature.featureData,isChronic,mainTailIds});   
        },200)  
        this.setState({
          setDataTimer
        })
      }
      this.setState({
          forbidInput:false,
          boxEditable:false,
          setDataTimer
      })
      changeEditIll(false)
    }

  }

  onchange(e){//监听输入事件,主诉无数据不能输入
    const ev = e || window.event;
    ev.target.innerText?(ev.target.innerText = ""):(ev.target.innerHTML="");
  }

  handleClick(e){
    //搜索框位置
    const ele = document.activeElement;
    const height = ele.offsetHeight;
    let boxTop = (+(ele.offsetTop)+height);
    let boxLeft = ele.offsetLeft;
    this.setState({
      boxLeft:boxLeft,
      boxTop:boxTop
    });
  }

  handleSearchSelect(obj){
    const {questionId,name,conceptId} = obj;
    const {fetchModules,focusIndex,span} = this.props;
    fetchModules&&fetchModules({id:questionId,index:focusIndex,name,span,conceptId});
  }

  getInlineTag(){
    const {data,showArr,saveText,insertProcess,symptomIds,allModules} = this.props;
    const boxMark = '2';

    let list = data&&data.map((item,i)=>{
      if(item.flag && item.flag==3){
        return <TailInlineTag {...item} showText={item.relationModuleName} handleTailClick={(obj)=>{insertProcess(obj,allModules)}}></TailInlineTag>
      }else {
        return chooseType({item,boxMark,i,hideTag:false,showArr,saveText,mainIds:symptomIds});
      }
    })
    return list;
  }
  handleBlur(e){
    const {freeText,data} = this.props;
    if(data&&data.length==0){//无模板纯手动输入时存值
      const ev = e || window.event;
      const innerData = ev.target.innerText || e.target.innerHTML;
      if(!isIE()){
        e.target.innerText?(e.target.innerText=""):(e.target.innerHTML="")
        freeText && freeText(innerData.trim());
      }else{
        freeText && freeText(innerData);
      }
    } 
  }
  //componentWillReceiveProps(nextProps){
    /*const contHeightDiff =  nextProps.data&&this.props.data&&nextProps.data.length!==this.props.data.length;
    const dataDiff = !!nextProps.data!==!!this.props.data;
    if(contHeightDiff||dataDiff){*/     //走慢病否，现病史消失滚动才出现bug修改
   /* if(this.props.data&&this.props.data.length>0){
      return ;
    }
      this.context.scrollArea.refresh();*/
    //}
  //}
  render(){
    const {hasMain,readMode,fuzhen,isChronic,type,fetchPushInfos,handleInput,isRead,saveText,searchData,totalHide,editClear,data} = this.props;
    const {forbidInput,boxLeft,boxTop} = this.state;
    const searchFlag = searchData.length > 0 ? true : false;
    const mode = readMode===null||readMode===-1?type:readMode;
    if(+mode===1){      //文本模式
      return <Textarea  title='现病史' boxMark='2'
                        isRead={isRead}
                        value={saveText[0]}
                        fuzhen={fuzhen}
                        hasMain={hasMain}
                        isChronic={isChronic}
                        handlePush={fetchPushInfos}
                        handleInput={handleInput}/>;
    }
    return  <div className={style['current-ill']}>
      <ItemBox title='现病史' 
      editable={editClear||data.length==0?true:false} 
      handleFocus={this.handleFocus}
      handleChange={forbidInput?this.onchange:''}
      handleClick={this.handleClick}
      handleBlur={this.handleBlur}>
        {data.length>0?this.getInlineTag():(saveText[0]?saveText[0]:'')}
      </ItemBox>
      {searchFlag ? <SearchDrop data={searchData} show={!totalHide} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:""}
    </div>
  }
}

/*CurrentIll.contextTypes = {
  scrollArea: React.PropTypes.object
};*/
export default CurrentIll;