import React from 'react';
import styles from './index.less';
import clear from './imgs/clear.png';
import search from './imgs/search.png';
import config from '@config/index';
import $ from 'jquery';
/**
 * 前提条件父元素有定位
 * visible  搜索显示隐藏
 * handleChangeValue  函数参数为输入框的value值
 */
class SearchList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val:'',
            border:'',
            show:false,
            timer:null
        }
        this.textInput = React.createRef();
        this.handleClearVal = this.handleClearVal.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }
    componentDidMount(){
      this.props.handleChangeValue('');
    //   this.textInput.current.focus();
      const {windowHeight,pageTop,height,refreshScroller} = this.props;
    }
    handleClearVal(){
        const { handleChangeValue,handleChangeIpt,handleClearValue } = this.props;
        this.textInput.current.value = '';
        this.textInput.current.focus();
        this.setState({
            val:'',
            show:false
        });
        handleChangeIpt('');
        handleChangeValue('');
        handleClearValue&&handleClearValue()
    }
    handleInput(e){
      const { handleChangeValue,handleChangeIpt } = this.props;
        clearTimeout(this.state.timer);
        let timer = setTimeout(()=>{
            clearTimeout(this.state.timer);
            handleChangeIpt(e.target.value);
            if(e.target.value.trim() == ''){
                this.setState({
                    show:false
                })
                return  handleChangeValue('');
            }
            this.setState({
                val:e.target.value,
                show:true
            })
            handleChangeValue(e.target.value);
        },config.delayTime);
        this.setState({
            timer
        });
    }
    handleFocus(){
      if(this.state.val.trim() != ''){
        return;
      }else{
          this.setState({border:true})
      }
    }
    handleBlur(){
      this.setState({border:false,val:''})
    }
    componentWillReceiveProps(next){
        if(next.value&&(next.value != this.props.value)){
            this.textInput.current.value = next.value;
        }
    }
    render() {
        const { children,visible,zIndex } = this.props;
        const { show } = this.state;
        return (
            <div id="searchOption" className={styles.search} style={{zIndex:zIndex?zIndex:10}}>
                <img style={{display:show?'block':'none'}} className={styles.clearVal} src={clear} onClick={this.handleClearVal} alt="清空" />
                <input
                    className={this.state.border ?`${styles.border}`:`${styles.borderNone}`}
                    type="text"
                    maxLength="30"
                    ref={this.textInput}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    onInput={(e) => { 
                        this.handleInput(e)
                    }}
                    onPropertyChange={(e) => {  // 兼容ie
                        this.handleInput(e)
                    }}
                    placeholder="搜索"
                />
                <div className={styles.autoList}>
                    {children}
                </div>
            </div>
        )
    }
}
export default SearchList;