import React, { Component } from 'react';
import style from './index.less';
import DiagnosticItem from '@containers/DiagnosticItem'
import { SearchOption } from '@commonComp';
import ScrollArea from 'react-scrollbar';
import $ from 'jquery';
class DiagResultSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };

    this.getSearchList = this.getSearchList.bind(this)

  }
  componentWillReceiveProps(nextProps) {
  }
  componentDidMount() {
    const that = this
    $(document).click(function (e) {
      var diagSearch = $('#diagSearch')[0];
      var diagTcmSearch = $('#diagTcmSearch')[0];
      var diagSymSearch = $('#diagSymSearch')[0];
      var addDiag = $('#addDiag')[0];
      var addTcmDiag = $('#addTcmDiag')[0];
      var addSymDiag = $('#addSymDiag')[0];
      var confirm = $('#confirm')[0];
      if (diagSearch||diagTcmSearch||diagSymSearch) {
        if (!confirm&&!that.isBar) {//onMousedown的目标为滚动条时，删除弹窗不关闭
          if (diagSearch&&e.target != diagSearch && e.target != addDiag && e.target.parentNode != addDiag && !$.contains(diagSearch, e.target)) {
            that.props.hideSearch();
            that.props.setHighter(48)
          }
          if (diagTcmSearch&&e.target != diagTcmSearch && e.target != addTcmDiag && e.target.parentNode != addTcmDiag && !$.contains(diagTcmSearch, e.target)) {
              that.props.hideTcmSearch();
              that.props.setHighter(48)
          }
          if (diagSymSearch&&e.target != diagSymSearch && e.target != addSymDiag && e.target.parentNode != addSymDiag && !$.contains(diagSymSearch, e.target)) {
              that.props.showSymSearch(false);
              that.props.setHighter(48)
          }
        }
      }
    });
    document.addEventListener('mousedown',function(e){
      //onMousedown的目标为滚动条时，标签填写单不关闭
      if(e.target.className=='scrollbar'){
        that.isBar = true;
      }else{
        that.isBar = false;
      }
    });
  }

  getSearchList(searchResult, isShowNoDataInfo) {
    // console.log(searchResult,'searchResult');
    // console.log(isShowNoDataInfo,'isShowNoDataInfo');
    const {isTcm,showSym,setHighter} = this.props;
    if (isShowNoDataInfo === true && searchResult.length === 0 ){
      return <div className={style['search-result-noItem']}><span>暂无筛选项</span></div>
    }
    return <div className={style['search-result']} style={{'min-height':'120px','max-height':'205px',width:'412px',overflow:'auto'}}>
      {
        searchResult.length !== 0  && searchResult.map((item,idx) => {
          return (<div key={idx} className={style['search-result-item']}>
            <DiagnosticItem setHighter={setHighter} isTcm={isTcm} showSym={showSym} title={true} item={item} clearInput={this.clearInput} type='search'/>
          </div>)
        })
      }
    </div>
  }

  render() {
    const { show,showTcm,showSym, searchResult, refreshScroller, handleChangeValue, pageTop, windowHeight, isShowNoDataInfo,isTcm } = this.props;

    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    const idName = showSym?"diagSymSearch":(showTcm?'diagTcmSearch':'diagSearch');
    return (
        ((isTcm&&showSym)||(isTcm&&showTcm)||(show&&!isTcm)) && <div id={idName} className={style['search-box']}>
        <SearchOption showSym={showSym} handleChangeValue={handleChangeValue} refreshScroller={refreshScroller} pageTop={pageTop} windowHeight={windowHeight} height={180} visible={true}>
            {this.getSearchList(searchResult, isShowNoDataInfo)}
        </SearchOption>
      </div>
    )


  }
}

export default DiagResultSearch;
