import Taro, { Component } from '@tarojs/taro'

import './index.scss'

export default class Search extends Component {
  // static options = {
  //   addGlobalClass: true
  //   }
  static defaultProps = {
    onSearch: () => { }
  }
  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>
    )
  }
}
