<template>
  <div class="form-group">
    <label v-if="label" class="form-label" :for="id">
      {{ label }}:
      <span v-if="$attrs.required !== undefined" class="form-required">*</span>
    </label>

    <textarea
      ref="textarea"
      :id="id"
      :class="{ 'form-control': true, 'is-invalid': hasError }"
      :value.prop="value"
      v-on="$listeners"
      v-bind="$attrs"
      @input="$emit('update', $event.target.value)"
    ></textarea>

    <div v-if="hasError" class="invalid-feedback d-block">
      <slot name="invalid-feedback">{{ getError }}</slot>
    </div>
  </div>
</template>

<script>
import autosize from 'autosize';
import ErrorMixin from '../../../mixins/error-mixin';

export default {
  name: 'EbTextarea',
  inheritAttrs: false,
  mixins: [ErrorMixin],
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  model: {
    prop: 'value',
    event: 'update'
  },
  props: {
    id: {
      type: String,
      default() {
        return `textarea-input-${this._uid}`;
      }
    },
    label: String,
    value: String,
    autosize: Boolean
  },
  mounted() {
    if (this.autosize) {
      autosize(this.$refs.textarea);
    }
  }
};
</script>

<style scoped>
.el-table th div {
  padding-left: 0;
  padding-right: 0;
}
</style>
