import { View, Input } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { Component } from 'react'
import './index.less'

export default class SearchBar extends Component {
  handleChange = (e) => {
    this.props.onChange && this.props.onChange(e)
  }

  render () {
    const { value, placeholder } = this.props

    return (
        <View className="search-wrap">
        <View className="search-bar">
          <AtIcon
            className="search-icon"
            value="search"
            size="24"
            color="#ACACAC"
          ></AtIcon>
          <Input
            type="text"
            className="search-input"
            placeholder={placeholder}
            value={value}
            onInput={this.handleChange.bind(this)}
          />
          <View className="search-button">搜索</View>
        </View>
      </View>
    )
  }
} 