<template>
  <div>
    <textarea class="textarea" rows="6" maxlength="300" placeholder="Nhập tối đa 300 kí tự" v-model="text" id="refinput"></textarea>
    <p class="mt-5 pt-3">
      <button class="button is-primary" @click="changeNote()">Cập nhật</button>
      <button class="button is-danger ml-5" @click="remove()">Xóa</button>
    </p>
</div> 
</template>
<script>
export default {
  props: ['note'],
  data() {
    return {
      text:  this.note? this.$copy(this.note) : ''
    }
  },
  mounted() {
    document.getElementById('refinput').focus()
  },
  methods: {
    changeNote() {
      let stext = this.$empty(this.text)? null : this.text.trimLeft().trimRight()
      this.$emit('modalevent', {name: 'changenote', data: {note: this.$empty(stext)? null : stext}})
    },
    remove() {
      this.text = null
      this.changeNote()
    }
  }
}
</script>