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 {handleTailClick(obj,saveText)}}>
}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 ;
}
return
{this.handleChange(e)}}
handleClick={this.handleClick}
handleBlur={this.handleBlur}
data={datas}>
{datas.length>0?{this.getInlineTag()}
:(saveText[0]?saveText[0]:'')}
{/*没有推送结果就不显示*/}
{symptomFlag && !searchFlag ?
: ( searchFlag ?
:"")}
}
}
export default MainSuit;