newICSS/src/components/MedicalInfo/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import delIcon from '@common/images/del_nor.png';
import {windowEventHandler,getCurrentDate,getWindowInnerHeight} from '@utils/tools'
import Filters from './Filters';

class MedicalInfo extends Component {
    constructor(props) {
        super(props);
        this.$inp = React.createRef();
        this.$cont = React.createRef();
        this.$ul = React.createRef();
        this.state={
          val:'',
          hasSearch: false,
          msg:'',
          typeChecks:['0'],
        };
        this.search = this.search.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.clear = this.clear.bind(this);
        this.getSearchList = this.getSearchList.bind(this);
        this.handleEnter = this.handleEnter.bind(this);
        this.handleTypeCheck = this.handleTypeCheck.bind(this);
        this.showScale=this.showScale.bind(this);
    }
    showScale(item){
      const {scaleInfo,getScale,showScaleFn} = this.props;
      if(scaleInfo&&scaleInfo[item.conceptId]){
        showScaleFn&&showScaleFn(item);
      }else{
        getScale(item);
      }
    }
    getSearchList() {
        const { getAllConceptDetail,searchResult } = this.props;
        const that = this;
        if(searchResult&&searchResult.length>0){
          setTimeout(function(){
            that.$ul.current.style.height = getWindowInnerHeight()-278+'px';
          },100);
        }
        return searchResult && searchResult.map((item) => {
          return <li key={item.conceptId}
                     title='点击查看详情'
                     onClick={()=>+item.type===21?this.showScale(item):getAllConceptDetail({name: item.name, type: item.type, uname: item.uniqueName,position:0,showName:item.name})}>
            <span>{item.name}</span>
            <i>( {item.libTypeName} )</i>
            {item.retrievalName?<p>• {item.retrievalName}</p>:''}
            {/*<button>查看</button>*/}
          </li>;
            });
    }
    search(){
      if(this.state.hasSearch === false) {
        this.setState({
          hasSearch: true,
          msg:'暂无搜索结果！'
        })
      }
      const {handleChangeValue} = this.props;
      const val = this.$inp.current.value;
      handleChangeValue&&handleChangeValue(val,this.state.typeChecks);
    }
  handleChange(){
    const value = this.$inp.current.value;
    const {clearResult} = this.props;
      this.setState({
        val: value
      });
    if (value === '') {
      this.setState({
        val: '',
        hasSearch: false,
        msg: '',
      });
      
      clearResult && clearResult();
    }
  }
  handleEnter(e){
      if(e.keyCode==13){
        this.search();
      }
  }
  clear(){
      const {clearResult} = this.props;
      this.$inp.current.value = '';
      this.setState({
        val:'',
        hasSearch: false,
        msg:''
      });
      this.$inp.current.focus();
      clearResult&&clearResult();
  }
  handleTypeCheck(val){
    let {typeChecks} = this.state;
    //const allChecked = typeChecks.includes('0');
    const alli = typeChecks.findIndex((it)=>it==='0');
    const allChecked = alli!==-1;
    if(val==='0'){      //全部与其他互斥
      !allChecked?typeChecks=['0']:typeChecks.splice(alli,1);
    }else{
      allChecked&&typeChecks.splice(alli,1);
      if(!typeChecks.includes(val)){
        typeChecks.push(val);
      }else{
        const i = typeChecks.findIndex((it)=>val===it);
        typeChecks.splice(i,1);
      }
    }
    this.setState({
      typeChecks:typeChecks
    });
  }
  componentDidMount(){
    const height = getWindowInnerHeight()-148;
    this.$cont.current.style.height = height+"px";
    this.props.getFilters();
    windowEventHandler('resize', ()=>{
      if(this.$cont.current){
        const height = getWindowInnerHeight()-148;
        this.$cont.current.style.height = height+"px";
      }
      if(this.$ul.current){
        const height = getWindowInnerHeight()-278;
        this.$ul.current.style.height = height+"px";
      }
    });
  }
  componentWillReceiveProps(){
    this.setState({
      hasSearch: false
    });
  }
    render() {
        const {searchResult,filterList} = this.props;
        const {val, hasSearch,msg,typeChecks} = this.state;
        return (
            <div className={style['search-cont']} ref={this.$cont}>
              <div className={style['search-box']}>
                <p className={style['cont']}>
                  <input placeholder="医学知识搜索" type="text" className={style['input']} ref={this.$inp} onInput={this.handleChange} onKeyUp={this.handleEnter}/>
                  {val?<img src={delIcon} id='clearMedicalInfoSearch' alt="清空" onClick={this.clear}/>:''}
                  <button onClick={this.search}>搜索</button>
                </p>
                <Filters data ={filterList} checkeds={typeChecks} handleCheck={this.handleTypeCheck}></Filters>
              </div>
              {searchResult&&searchResult.length>0?<div className={style['result']}>
                    <p className={style['title']}>搜索内容</p>
                    <ul ref={this.$ul}>
                      {this.getSearchList()}
                    </ul>
              </div>:<p className={style['no-data']}>{hasSearch?'搜索中...':msg}</p>}
             </div>


        )

        
        
    }
}

export default MedicalInfo;