<template>
  <el-input
    v-bind="$attrs"
    class="o-search-input"
    maxlength="50"
    suffix-icon="el-icon-search"
    clearable
    v-on="$listeners"
    @keydown.enter.native="search"
    @clear="onClear"
    @focus="onFocus"
    @blur="onBlur"
  />
</template>

<script>
export default {
  name: 'SearchInput',
  methods: {
    onFocus () {
      this.$focus = true
    },
    onBlur () {
      this.$focus = false
      if ((this.$presentValue || this.$attrs.value) && this.$presentValue !== this.$attrs.value) {
        this.search()
      }
    },
    onClear () {
      if (this.$focus) {
        return
      }
      this.search()
    },
    search () {
      this.$presentValue = this.$attrs.value
      this.$emit('search')
    }
  }
}
</script>

<style lang="scss" scoped>
.o-search-input {
  width: 200px;

  ::v-deep .el-input__suffix-inner .el-input__icon:nth-last-child(2) {
    display: none;
  }
}
</style>
