import * as React from "react";

type defaultProps = {
    style: 1,     //样式1：1：方形，2：圆形
    bgColor: "#fff",  //背景颜色：16进制
    borderColor: "#fff",  //框体颜色：16进制
    textColor: "#fff",   // 文字颜色：16进制
    hotWord: [], //搜索热词
    historyWord: [],  //历史搜索
    disabled: true,  //是否跳页：true:跳页，false:不跳页
}

type ContentData = {
    style: number,
    bgColor: string,
    borderColor: string,
    textColor: string,
    disabled: boolean
} & defaultProps

interface LPData {
    content: Array<ContentData>,

    [propsName: string]: any
}

interface LPType {
    content: any,

    [propsName: string]: any
}

type IPropTypes = {
    source?: ContentData,
    [propsName: string]: any
}


const CLASS = 'm-search-';

class MPro extends React.Component<IPropTypes, any> {
    state: any;

    constructor(props: IPropTypes) {
        super(props);
        this.clearValue = this.clearValue.bind(this)
        this.changeFn = this.changeFn.bind(this)
        this.focusFn = this.focusFn.bind(this)
        this.keyPressFn = this.keyPressFn.bind(this)
        this.gotoSearch = this.gotoSearch.bind(this)
        this.gotoReturn = this.gotoReturn.bind(this)

        this.state = {
            showFlag: false,
            value: props.value || ""
        }
    }

    componentDidMount(): void {
        if (this.props.id && this.props.id.length > 0) {
            let test = document.createElement('div'), that = this;
            test.id = 'test';
            document.body.appendChild(test);
            test.addEventListener('mousedown', function () {
                document.getElementById(that.props.id).click()
                document.getElementById(that.props.id).focus()
            }, false)
            setTimeout(() => {
                var myEvent = new Event('mousedown');
                test.dispatchEvent(myEvent); // => true
            }, 200)

        }
    }

    componentWillReceiveProps(nextProps): void {
        if (nextProps.value != this.state.value) {
            this.setState({
                value: nextProps.value
            })
        }
    }

    clearValue() {
        this.setState({
            value: ""
        })
        if (this.props.onChange) {
            this.props.onChange("")
        }
    }

    changeFn(e) {
        let value = e.target.value
        this.setState({
            value: value
        })
        if (this.props.onChange) {
            this.props.onChange(value)
        }

    }

    clickFn(flag) {
        if (flag == "autoFocus") {
            this.focusFn()
        }

    }

    gotoSearch(flag, e) {
        if (flag) {
            this.props.onClick(e)
        }

    }

    keyPressFn(e) {
        var keycode = e.keyCode;
        if (keycode == '13') {
            e.preventDefault();
            //请求搜索接口
            let value = e.target.value
            if (this.props.onKeyPress) {
                this.props.onKeyPress(value)
            }

        }
    }

    focusFn() {
        this.setState({
            showFlag: true
        })
    }

    gotoReturn(e) {
        if (this.props.onCancel) {
            this.props.onCancel();
        } else {
            this.setState({
                showFlag: false
            })
        }

    }

    render() {
        let source = this.props;
        let content = source;

        return (
            <div className={'lib-pro lib-pro2'}>
                {
                    content ?
                        <div className={CLASS + 'bg'} style={{background: content.bgColor}}>
                            <div
                                className={CLASS + 'content'}
                                onTouchStart={this.gotoSearch.bind(this, content.disabled)}
                                style={{
                                    width: this.state.showFlag && !content.disabled ? "calc(100% - 47px)" : "100%",
                                }}
                            >

                                <input
                                    className={
                                        CLASS + 'border ' + CLASS + 'con '
                                        + (content.style == 1 ? CLASS + "square" : CLASS + "circular")
                                    }
                                    style={{
                                        borderColor: content.borderColor,
                                        color: content.textColor ? content.textColor : '#323232',
                                        backgroundColor: content.backgroudColor ? content.backgroudColor : "#fff",
                                        // borderRadius:content.style == 1 ?"4px":"4px"
                                        pointerEvents: content.disabled ? 'none' : "auto",
                                    }}
                                    id={content.id ? content.id : ""}
                                    type="search"
                                    placeholder={"请输入要搜索的商品内容"}
                                    value={this.state.value}
                                    readOnly={content.disabled}
                                    disabled={content.disabled}
                                    // autoFocus={content.autoFocus}
                                    onChange={this.changeFn}
                                    onKeyUp={this.keyPressFn}
                                    onFocus={this.focusFn}
                                    onKeyPress={this.keyPressFn}>
                                </input>

                                <div className={'icon ' + CLASS + "iconP"}>
                                <span
                                    className={'iconfont icon-mxd-search icon ' + CLASS + 'icon'}></span>
                                </div>
                                {
                                    this.props.clear && this.state.value && this.state.value.length > 0 ?
                                        <i className={CLASS + "clear"}
                                           onClick={this.clearValue}></i>
                                        : ""
                                }

                                {/*<span className="iconfont icon-search" style={{color: content.textColor ? content.textColor : '#fff'}}></span>*/}
                            </div>
                            {
                                this.state.showFlag && !content.disabled ?
                                    <span className={CLASS + "word"}
                                          onClick={this.gotoReturn.bind(this)}>取消</span> : " "
                            }

                        </div> : ''
                }
            </div>
        );
    }
}

export default MPro;