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) => {
    const value = e.detail.value;
    this.props.onChange && this.props.onChange(value);
  }
  handleSearch = () => {
    const searchValue = this.props.value || '';
    // 触发父组件传入的 onSearch 方法
    this.props.onSearch && this.props.onSearch(searchValue);
  }

  render () {
    const { value = '', placeholder = '点击搜索商品', disabled } = 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)}
            disabled={disabled}
          />
          <View onClick={this.handleSearch} className="search-button">搜索</View>
        </View>
      </View>
    )
  }
} 