<template>
  <div class="form-group" v-if="vshow">
    <slot name="label" v-bind="{ label, disabled }">
      <blabel :label="label" :disabled="disabled"></blabel>
    </slot>
    <textarea
      :disabled="vdisabled"
      :class="{'form-control': true, 'disable-resize': resize === false}"
      type="text"
      :maxlength="COL_SIZE"
      :id="id"
      :name="id"
      v-bind="$attrs"
      v-on="inputListeners"
      :value.prop="value"
      :draggable="false"
    ></textarea>
    <span class="bar"></span>
    <!-- <span class="error_msg" v-show="errorMsg">{{errorMsg}}</span> -->
  </div>
</template>
<script>
import Blabel from "./Blabel.vue";
import {
  isUndef,
  isPlainObject,
} from "@credenceanalytics/utilities";

export default {
  components: {
    Blabel,
  },
  props: {
    TextareaCutmStyles: {
      type: String,
    },
    id: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: "",
    },
    COL_SIZE: {
      type: [String, Number],
      default: 90,
    },
    value: {
      type: [String, Number],
      default: "",
    },
    validate: {
      type: Object,
      default: function () {
        return {};
      },
    },
    hide: {
      type: [String, Boolean, Object],
      default: true,
    },
    disabled: {
      type: [String, Boolean, Object],
      default: false,
    },
    errorMsg: {
      type: String,
      default: "",
    },
    resize: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    topTooltipOptions() {
      return {
        content: this.lLabel,
        placement: "top",
      };
    },
    lLabel() {
      return this.$t(this.label.toLowerCase());
    },
    inputListeners: function () {
      var vm = this;
      // eslint-disable-next-line
      return Object.assign({}, this.$listeners, {
        input: function (event) {
          vm.$emit("input", event.target.value);
        },
      });
    },
    vshow() {
      return isUndef(this.hide)
        ? true
        : isPlainObject(this.hide)
        ? this.hide[this.id]
        : this.hide;
    },
    vdisabled() {
      return isUndef(this.disabled)
        ? false
        : isPlainObject(this.disabled)
        ? this.disabled[this.id]
        : this.disabled;
    },
  },
};
</script>
<style lang="scss" scoped>
.disable-resize {
  resize:none!important;
}
</style>
