<template>
  <div class="form-group" v-if="vshow">
    <slot name="before:label"></slot>
    <slot name="label">
      <blabel :label="label" :disabled="disabled"></blabel>
    </slot>
    <slot name="after:label"></slot>
    <input
      :class="{ 'has-error': errors.has(id), ...inputClass }"
      :disabled="vdisabled"
      class="form-control inputnumright"
      type="text"
      :min="min"
      :maxlength="COL_SIZE"
      :id="id"
      :name="id"
      autocomplete="off"
      v-bind="$attrs"
      v-on="inputListeners"
      :value="value"
      v-formate="numericConfig"
    />
    <slot name="after:input"></slot>
    <span class="bar"></span>
    <slot name="after:input:bar"></slot>
    <!-- <span class="error_msg" v-show="errorMsg">{{errorMsg}}</span> -->
  </div>
</template>
<script>
 /* eslint-disable */ 
import formatePrice from "@/directives/comma-seprator.js";
import Blabel from "./Blabel.vue";
import {
  isUndef,
  isPlainObject,
} from "@credenceanalytics/utilities";

const numberConfig = {
  preventDecimal: true,
  preventNegative: true,
  preventCommaSepration: false
}
export default {
  inheritAttrs: false,
  components: {
    Blabel,
  },
  props: {
    value: null,
    numberConfig: {
      type: Object,
      default: function() {
        return numberConfig
      }
    },
    min: {
      type: [String, Number],
      default: 60,
    },
    NumCutmStyles: {
      type: String,
      reuired: false,
    },
    id: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: "",
    },
    COL_SIZE: {
      type: [String, Number],
      default: 100,
    },
    hide: {
      type: [String, Boolean, Object],
      default: true,
    },
    disabled: {
      type: [String, Boolean, Object],
      default: false,
    },
    errorMsg: {
      type: String,
      default: "",
    },
  },
  computed: {
    inputClass() {
      if(this.numericConfig.preventCommaSepration) return {
        "text-align-left": true
      };
      return {
        "text-align-right": true 
      };
    },
    numericConfig(){
      const config = {};
      Object.entries(numberConfig).forEach(function(param) {
        if (this.hasOwn(this.numberConfig, param[0]))
          config[param[0]] = this.numberConfig[param[0]];
        else
          config[param[0]] = param[1];
      }.bind(this));
      return config;
    },
    inputListeners: function () {
      var vm = this;
      // eslint-disable-next-line
      return Object.assign({}, this.$listeners, {
        input: function (event) {
          vm.$emit("input", event.target.value);
        },
      });
    },
    lLabel() {
      return this.$t(this.label.toLowerCase());
    },
    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;
    },
  },
  directives: {
    formate: formatePrice,
  },
};
</script>
<style lang='scss' scoped>
.form-group .text-align-left {
  text-align: left;
}
.form-group .text-align-right {
  text-align: right;
}
.has-error {
  border-color: #f57878 !important;
}
</style>
