import React, { Component } from 'react'
//引入redux
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as searchAction from './store'
//引入antd-mobile组件
import { SearchBar } from 'antd-mobile'
//引入路由跳转装饰器
import { withRouter } from 'react-router-dom'

import './search_header.scss'

class SearchHead extends Component {
    //默认参数
    static defaultProps = {
        returnbtn: false
    }
    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            selected: '',
            val: this.props.value || ''
        }
    }
    // 返回某个页面
    returnPage() {
       console.log(111);
    }
    //组件装载完毕
    componentDidMount() {
        this.refs.search.focus();
    }
   
    render() {
        return (
            <div className="search-head">
                {
                    this.props.returnbtn
                        ?
                        <div className="left" onClick={() => {
                            // 返回某个页面
                            this.returnPage()
                        }}>
                            {/* <img src={require("@common/images/return.png")} alt="return" /> */}
                            <i className="iconfont iconiconfront-68"></i>
                        </div>
                        : null
                }
                <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="搜索课程"></SearchBar>
                </div>
                <div className="right right-btn">
                    <div className="submit-btn" 
                        >搜索</div>
                </div>
            </div>
        )
    }
}
export default connect(
    ({ searchReducer }) => {
        return {
            searchVal: searchReducer.val
        }
    },
    (dispatch) => {
        return {
            search: bindActionCreators(searchAction, dispatch)
        }
    }
)(withRouter(SearchHead))