newICSS/src/components/OtherHistory/index.jsx

import React,{Component} from 'react';
import {Button,InlineTag,ItemBox,Textarea,Notify} from '@commonComp';
import chooseType from '@containers/eleType.js';
import SearchDrop from '@components/SearchDrop';
import {filterDataArr} from '@utils/tools'
import style from './index.less';

class OtherHistory extends Component{
  constructor(props){
    super(props);
    this.state = {
      boxMark:'3',
      editable:true,
      boxLeft:'0px',
      boxTop:'0px'
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.getData = this.getData.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }
  toggleEditable(){
    this.setState({
      boxEditable:!this.state.boxEditable
    })
  }
  handleSearchSelect(obj){
    const {questionId,name} = obj;
    const {fetchModules,focusTextIndex,span,searchInEnd} = this.props;
    fetchModules&&fetchModules({id:questionId,index:focusTextIndex,name,span,searchInEnd});
  }
  getLabels(){
    const {data,showArr,selecteds,saveText} = this.props;
    const {boxMark} = this.state;
    let list = data.map((item,i)=>{
      return chooseType({item,boxMark,i,hideTag:false,showArr,selecteds,saveText});
    });
    return list;
  }
  handleInput(e){     //主诉未填无法输入
    const {type,hasMain} = this.props;
    if(+type===0&&!hasMain){
      e.target.innerText='';
    }
  }
  getData(){
    //第一次聚焦其他史时，主诉有数据则获取最近一次其他史记录（没有的话显示初始模板），主诉无数据则显示提示；其他时间其他史模板数据不调接口
    const {hasMain,type,setInitData,data,saveText,changeEditClear} = this.props;
    const hasData = saveText.join("")||data.length>0;
    if(hasData){      //其他史已有数据不获取
      return;
    }
    if(+type===0&&!hasMain){
      Notify.error("无法操作，请先输入主诉");
      return;
    }
    //智能模式有主诉或者文本模式获取最近历史
    setInitData();

    //回读后容器框要不可编辑，否则自由文本标签onInput,onFocus事件失效（原因未知）
    /*if(data.length>0){
       this.setState({
         editable:false
       });
      changeEditClear(false)
    }*/
  }
  handleClick(e){//让搜索框跟随鼠标点击移动
    //e.stopPropagation();
    const {fetchPushInfos} = this.props;
    //fetchPushInfos&&fetchPushInfos();
    let boxLeft = e.pageX - 102 + 'px';
    let boxTop = (+e.target.offsetTop+22)+'px';
    this.setState({
      boxLeft:boxLeft,
      boxTop:boxTop
    });
  }
  /*componentWillReceiveProps(next){
    const isRead = this.props;
    this.setState({
      isRead:next.isRead !== isRead
    });
  }
  componentDidMount(){
    const {setInitData} = this.props;
    setInitData&&setInitData();
  }*/
  render(){
    const {data,hasMain,searchData,totalHide,showArr,focusTextIndex,isRead,type,fetchPushInfos,handleInput,saveText,editClear} = this.props;
    const {boxTop,boxLeft,boxMark} = this.state;
    const hasData = saveText.join("")||data.length>0;
    const show = showArr&&showArr[boxMark+focusTextIndex+'0'];

    if(+type===1){      //文本模式
      return <Textarea title='其他史' boxMark='3'
                       isRead={isRead}
                       value={saveText[0]}
                       handlePush={fetchPushInfos}
                       handleInput={handleInput}
                       handleFocus={this.getData}
                       hasMain={hasMain}/>;
    }
    return  <div>
      <ItemBox title='其他史' editable={hasData?false:true} isRead={isRead} handleClick={this.handleClick} handleFocus={this.getData} onchange={this.handleInput}>
        {this.getLabels()}
        <SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>
      </ItemBox>
    </div>
  }
}

export default OtherHistory;