newICSS/src/components/ScaleSearch/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'

class ScaleSearch extends Component {
  constructor(props) {
    super(props);
    this.$inp = React.createRef();
    this.$cont = React.createRef();
    this.$ul = React.createRef();
    this.state={
      val:'',
      hasSearch: false,
      msg:''
    };
    this.search = this.search.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.clear = this.clear.bind(this);
    this.handleEnter = this.handleEnter.bind(this);
  }
  getResult(id){
    const {formulaResult} = this.props;
    const scale=formulaResult&&formulaResult[id];
    let result = scale&&scale.calcalculate?scale.calcalculate.result:null;
    if(result){
      return <i>( 结果：{result.value} {result.text} )</i>;
    }
    return '';
  }
  showScale(item){
    const {scaleInfo,getScale,showScaleFn} = this.props;
    if(scaleInfo&&scaleInfo[item.conceptId]){
      showScaleFn&&showScaleFn(item);
    }else{
      getScale(item);
    }
  }
  getSearchList() {
    const { searchResult } = this.props;
    const that = this;
    if(searchResult&&searchResult.length>0){
      setTimeout(function(){
        that.$ul.current.style.height = getWindowInnerHeight()-248+'px';
      },100);
    }
    return searchResult && searchResult.map((item) => {
      return <li key={item.conceptId}
                 title='点击查看详情'
                 onClick={this.showScale.bind(this,{conceptId:item.conceptId,name:item.name})}>
        <span className={style['scale-name']}>{item.name}{this.getResult(item.conceptId)}</span>
        {item.showType===0?<p>• {item.searchName}</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);
  }
  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();
  }
  componentDidMount(){
    const height = getWindowInnerHeight()-148;
    this.$cont.current.style.height = height+"px";
    windowEventHandler('resize', ()=>{
      if(this.$cont.current){
        const height = getWindowInnerHeight()-148;
        this.$cont.current.style.height = height+"px";
      }
      if(this.$ul.current){
        const height = getWindowInnerHeight()-248;
        this.$ul.current.style.height = height+"px";
      }
    });
  }
  componentWillReceiveProps(){
    this.setState({
      hasSearch: false
    });
  }
  render() {
    const {searchResult} = this.props;
    const {val, hasSearch,msg} = this.state;
    return (
        <div className={style['search-cont']} ref={this.$cont}>
          <div className={style['search-box']}>
            <p className={style['cont']}>
              <input type="text" placeholder="量表搜索" className={style['input']} ref={this.$inp} onInput={this.handleChange} onKeyUp={this.handleEnter}/>
              {val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
              <button onClick={this.search}>搜索</button>
            </p>
          </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 ScaleSearch;