<template>
  <div :class="className">
    <div class="hive-input__input">
      <textarea
        ref="curTextarea"
        class="hive-input__input-input"
        @input="onChange"
        v-bind="$attrs"
      />
      <span class="hive-input-textarea__limit" v-if="showLimit&&maxLength ">
        {{ curValue.length }}/{{ maxLength }}
      </span>
    </div>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';

  const name = 'hive-input';

  export default {
    name: 'hive-input-textarea',
    components: {},
    mixins: [FormSize, WatchCurValue],
    props: {

      value: {
        type: String,
        default: '',
      },
      maxLength: Number,
      autosize: Boolean,
      showLimit: Boolean,
    },
    data() {
      return {
        curValue: this.value,
        curDisabled: this.disabled,
        setSizeT: null,
      };
    },
    computed: {
      className() {
        return 'hive-input hive-input-textarea';
      },
    },
    watch: {
      curValue(value) {
        const textareaElem = this.$refs.curTextarea;
        if (textareaElem) {
          textareaElem.style.height = 'auto';
          textareaElem.style.height = textareaElem.scrollHeight + 'px';
        }
        clearTimeout(this.setSizeT);
        this.setSizeT = setTimeout(() => {
          textareaElem.style.height = textareaElem.scrollHeight + 'px';
        }, 10);
      },
    },

    created() {},

    beforeMount() {},
    beforeDestroy() {
      clearTimeout(this.setSizeT);
    },

    methods: {
      onChange(e) {
        const onChange = this.onChange;
        const maxLength = this.maxLength;
        if (maxLength && e.target.value.length > maxLength) {
          e.target.value.substr(0, maxLength);
          e.target.value = e.target.value.substr(0, maxLength);
        }
        this.curValue = e.target.value;
        this.$emit('change', this.curTags);
      },
    },
  };
</script>
