<template>
  <div class="cmp-search-input">
    <div class="input-wrapper">
      <div class="icon-search"></div>
      <input
        v-model.trim="text"
        class="input"
        type="text"
        :placeholder="placeholder"
        placeholder-class="input-placeholder"
        confirm-type="search"
        @input="handleInput"
        @confirm="handleConfirm"
        :focus="focus"
      >
      <div v-if="text" class="icon-delete" @click="handleDelete"></div>
    </div>
    <div v-if="searchBtnShow" class="btn-search" @click="handleConfirm">搜索</div>
  </div>
</template>

<script>
import {debounce} from '@/utils'
export default {
  props: {
    searchBtnShow: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请输入商品名称'
    },
    focus: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      text: ''
    }
  },
  methods: {
    handleInput: debounce(function (e) {
      // console.log(e.detail.value)
      let value = e.detail.value
      // console.log(value)
      this.$emit('on-change', value)
    }, 500),
    handleConfirm (e) {
      // console.log(e.detail.value)
      let value = e.detail.value || this.text
      // console.log(value)
      this.$emit('on-change', value)
    },
    handleDelete () {
      this.text = ''
      this.$emit('on-change', '')
    }
  }
}
</script>

<style lang="scss">
@import './search-input.scss';
</style>