<template>
  <div class="form-group micro-textarea">
    <label :for="'inputMicro' + _uid">{{ caption }}</label>
    <textarea 
        class="form-control"
        :id="'inputMicro' + _uid"
        :value="value"
        :placeholder="placeholder"
        :disabled="disabled"
        autocomplete="off"
        @input="handleInput"></textarea>
    <div v-if="allowmaxLength" class="container d-flex justify-content-between px-1 mt-1"> 
     <small class="form-text text-muted">
        {{ description }}
     </small>
     <small class="text-muted">
      {{ count }} / {{ maxLength }}
     </small>
    </div>
  </div>
</template>

<script>
export default {
  props: {
  caption: String,
  value: [String, Number],
  description: String,
  placeholder: String,
  field: String,
  disabled: Boolean,
  maxLength: {
    type: Number,
    default: 500,
  },
  allowmaxLength: {
    type: Boolean,
    default: false,
  }
},
  data() {
    return {
      count: 0
    }
  },

  methods: {
    handleInput(e) {
      let val= e.target.value;
      if(this.allowmaxLength && val.length > this.maxLength){
        val = val.slice(0,this.maxLength);
        e.target.value = val;
      }
      this.count = val.length;
      this.$emit('input', val);
    },
  }
}
</script>

<style lang="scss">
  .micro-textarea {
    textarea {
      height: 100px;
    }
  }
</style>