import React, { PureComponent } from 'react'
import { SearchBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

import './search_header.scss'

class SearchHead extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            selected: '',
            val: this.props.value || ''
        }
    }

    // 返回某个页面
    returnPage() {
        this.props.history.go(-1)
    }

    //组件装载完毕
    componentDidMount() {
        this.refs.search.focus();
    }

    render() {
        return (
            <div className="search-head">

                <div className="left" onClick={() => {
                    // 返回某个页面
                    this.returnPage()
                }}>
                    <i className="iconfont iconiconfront-68"/>
                </div>

                <div className="center">
                    <SearchBar
                        value={this.state.val}
                        showCancelButton
                        cancelText={" "}
                        ref="search"
                        focus={true}

                        onChange={(val) => {
                            this.setState({val})
                            this.props.search.changeVal(val)
                        }}
                        placeholder="搜索课程"/>
                </div>
                <div className="right right-btn">
                    <div className="submit-btn"
                    >搜索
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(SearchHead)