<template>
  <div class="mch-search inline">
    <input class="inline" type="text" placeholder="请输入关键字" @input="doInput" @change="doChange">
    <Icon class="icon inline" type="md-search" size="20"/>
  </div>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['on-input', 'on-change', 'update:modelValue'],
  methods: {
    bindValue(value) {
      this.currentValue = value
      this.$emit('update:modelValue', value)
    },
    doInput(e) {
      this.bindValue(e.target.value)
      this.$emit('on-input', this.currentValue)
    },
    doChange(e) {
      this.bindValue(e.target.value)
      this.$emit('on-change', this.currentValue)
    }
  },
  data() {
    return {
      currentValue: this.modelValue
    }
  },
  watch: {
    modelValue: function(newValue) {
      this.currentValue = newValue
    }
  }
}
</script>
