import React from 'react';
import styles from './index.less';
import clear from './imgs/clear.png';
import search from './imgs/search.png';
import PropTypes from "prop-types";
/**
 * 前提条件父元素有定位
 * visible  搜索显示隐藏
 * handleChangeValue  函数参数为输入框的value值
 */
class SearchOption extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            val:'',
            border:'',
            show:false
        }
        this.textInput = React.createRef();
        this.handleClearVal = this.handleClearVal.bind(this);
    }
    
    componentWillReceiveProps(nextProps){
        if(nextProps.visible !== this.props.visible) {
            if(!nextProps.visible) {
                this.props.handleChangeValue('');
                this.textInput.current.value = '';
                this.setState({show:false})
            }
            setTimeout(() => {
                this.textInput.current.focus();
            }, 0);
        }
    }
    
    handleClearVal(){
        const { handleChangeValue } = this.props;
        this.textInput.current.value = '';
        this.textInput.current.focus();
        this.setState({
            val:'',
            show:false
        });
        handleChangeValue('');
    }

    render() {
        const { handleChangeValue,children,visible } = this.props;
        const { show } = this.state;
        return (
            <div id="searchOption" className={visible?`${styles.search} ${styles.show} searchOption`:`${styles.search} ${styles.hide} searchOption`}>
                <img className={styles.searchVal} src={search} alt="搜索" />
                <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={()=>{
                        if(this.state.val.trim() != ''){
                            
                        }else{
                            this.setState({border:true})
                        }
                    }}
                    onBlur={()=>{this.setState({border:false,val:''})}}
                    onKeyUp={(e) => { 
                        if((e.target.value).trim() != ''){
                            handleChangeValue(e.target.value);
                            this.setState({
                                val:e.target.value,
                                show:true
                            })
                        }else{
                            this.setState({
                                show:false
                            })
                        }
                    }}
                    placeholder="搜索"
                />
                <div className={styles.autoList}>
                    {children}
                </div>
            </div>
        )
    }
}
SearchOption.defaultProps = {
    visible: false
};

SearchOption.propTypes = {
    visible:PropTypes.bool,
    handleChangeValue: PropTypes.func
};
export default SearchOption;