<template>
  <Input ref="input"
         type="textarea"
         class="vuc-combox-input no-radius size"
         v-model="value"
         :style="textareaStyle"
         @keydown.native="handleKeydown"
         @on-change="handleChange"
         v-click-outside:pointerdown="handleOutsideClick" />
</template>

<script>
export default {
  name: 'VucTreecomboxInput',
  props: {
    height: {
      type: [Number, String],
      default: 200
    },
    width: {
      type: [Number, String],
      default: 200
    }
  },
  data () {
    return {
      value: ''
    }
  },
  computed: {
    textareaStyle () {
      return `height:${this.height}px;width:${this.width}px;`
    }
  },
  methods: {
    show (val) {
      this.value = val || ''
      if (this.$refs.input) {
        this.$refs.input.focus()
        this.$refs.input.$el.click()
      }
    },
    handleKeydown (event) {
      if (event.keyCode === 13) {
        this.$emit('hidden-tip')
        return false
      }
      this.$emit('keydown', { event, value: this.value })
    },
    handleChange () {
      this.$emit('change', { value: this.value })
    },
    handleOutsideClick () {
      this.$emit('hidden-tip')
    }
  }
}
</script>

<style>
</style>
