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";

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
    };
    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} = this.props;
    let innerText = e.target.innerText;
    if(!innerText.trim()){//有内容就走搜索接口
      getCommonSymptoms && getCommonSymptoms();
      this.setState({
        symptom:true
      })    
    }else{
      this.setState({
        symptom:false,
        inpText:innerText
      }) 
    }

  }


  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(); //冒泡到最顶层关闭其他下拉
    let boxLeft = e.pageX -32 + 'px';
    // let boxTop = e.pageY - 112 + 'px';
    let offsetTop = e.target.offsetTop;
    let boxTop = offsetTop + 28 + 'px';
    this.setState({
      boxLeft:boxLeft,
      boxTop:boxTop
    })
  }

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

    clearTimeout(this.state.timer);
    const timer = setTimeout(function(){
      //调搜索接口 使用模板走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;
    e.target.innerText="";
    freeText && freeText(data.trim());
    // 延时关闭常见症状下拉，不延时会影响选中
    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}>
        {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:(saveText[0]?saveText[0]:'')}
      </ItemBox>
      {/*没有推送结果就不显示*/}
      {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onShow={(e)=>this.handleShow(e)} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onShow={(e)=>this.handleShow(e)} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:"")}
    </div>
  }
}

export default MainSuit;