import { Component }  from 'react'
import Taro  from '@tarojs/taro'
import { View ,Text,Input} from '@tarojs/components'

import './index.scss'

// export default ()=>{
//   return <View>123</View>
// }

class Search extends Component {
  // static options = {
  //   addGlobalClass: true
  //   }
  static defaultProps = {
    onSearch: () => { }
  }
  constructor(props) {
    super(props);
    this.state = {
      keyword: ''
    }
  }
  
  handleInput=(e)=> {
    this.setState({ keyword: e.detail.value })
    this.props.onInput(e.detail.value)
  }
  handleSearch() {
    this.props.onSearch(this.state.keyword)
  }
  render() {
    const { placeholder } = this.props
    return (
      <View className='search'>
        <View className='search-wrap'>
          <Text className="iconfont icon-sousuo search-btn" onClick={this.handleSearch} ></Text>
          <Input
            type="text"
            confirm-type="search"
            placeholder={placeholder}
            class="search-input"
            maxlength="30"
            onInput={this.handleInput}
            onConfirm={this.handleSearch}
          />
        </View>
      </View>
    )
  }
}
export default Search