<template>
  <div class="search_input">
    <x-input
      v-model="currentValue"
      :placeholder="placeholder"
      :min="min"
      :max="max"
      :show-clear="showClear"
      :title="title"
      @on-change="handleChange"
      @on-focus="handleFocus"
      @on-blur="handleBlur"
      @on-click-clear-icon="handleClickClear"
    >
      <slot
        slot="label"
        name="label"
      />
      <img
        slot="right"
        src="../../assets/icon-search.png"
        class="search_icon"
        @click.stop="handleSearch"
      >
    </x-input>
  </div>
</template>
<script>
import XInput from '../x-input/index'
export default {
  components: { XInput },
  props: {
    placeholder: {
      type: String,
      default: '搜索'
    },
    value: {
      type: String,
      default: ''
    },
    min: Number,
    max: Number,
    showClear: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handleBlur() {
      this.$emit('on-blur')
    },
    handleChange() {
      this.$emit('on-change', this.currentValue)
    },
    handleFocus() {
      this.$emit('on-focus')
    },
    handleSearch() {
      this.$emit('on-search')
    },
    handleClickClear() {
      this.$emit('on-click-clear-icon')
    }
  }
}
</script>
