<template>
  <el-input
    v-model="copyValue"
    :placeholder="placeholder"
    clearable
    @change="handleChange"
    @input="handleInput">
  </el-input>
</template>

<script>
export default {
  name: 'InlineInput',
  props: {
    value: {
      type: String
    },
    placeholder: {
      type: String,
      default: '请输入'
    }
  },
  watch: {
    value (val, oldVal) {
      console.log('watch', val, oldVal)
      if (val !== oldVal) {
        this.copyValue = val
      }
    }
  },
  data () {
    return {
      copyValue: ''
    }
  },
  created () {
    this.copyValue = this.value
  },
  methods: {
    inputEmit () {
      this.$emit('change', this.copyValue)
    },
    handleChange () {
      this.$emit('change', this.copyValue)
    },
    handleInput () {
      this.$emit('change', this.copyValue)
      this.$emit('input', this.copyValue)
    },
    reset () {
      this.copyValue = ''
    }
  }
}
</script>

<style>

</style>