<template>
  <div class="form-group" v-if="vshow">
    <blabel :label="label" :disabled="disabled"></blabel>
    <input :value="value" :id="id" :name="id" v-show="false" />
    <date-picker
      :disabled="vdisabled"
      class="form-control"
      v-model="valueProxy"
      v-bind="cDateProps()"
      v-on="inputListeners"
    ></date-picker>
    <span class="bar"></span>
    <!-- <span class="error_msg" v-show="errorMsg">{{errorMsg}}</span> -->
  </div>
</template>

<script>
 /* eslint-disable */ 
import Blabel from "./Blabel.vue";
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import {
  isUndef,
  isPlainObject,
} from "@credenceanalytics/utilities";
export default {
  components: {
    Blabel,
    DatePicker
  },
  props: {
    id: {
      type: String,
      // required: true
    },
    label: {
      type: String,
      default: "",
    },
    dateCutmStyles: {
      type: String,
    },
    value: {
      default: "",
    },
    hide: {
      type: [String, Boolean, Object],
      default: true,
    },
    disabled: {
      type: [String, Boolean, Object],
      default: false,
    },
    dateProps: {
      type: Object,
      default: () => {
        return {};
      },
    },
    errorMsg: {
      type: String,
      default: "",
    },
  },
  computed: {
    inputListeners: function () {
      // eslint-disable-next-line
      return Object.assign({}, this.$listeners, {});
    },
    type() {
      return this.isDef(this.dateProps.format)
        ? this.dateProps.format
        : (this.globalDateFormat || this.globaldateformate);
    },
    lLabel() {
      return this.$t(this.label.toLowerCase());
    },
    valueProxy: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", 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;
    },
  },
  methods: {
    cDateProps() {
      return {
        ...this.dateProps,
        format: this.dateProps.format || this.globalDateFormat || this.globaldateformate,
        titleFormat: this.dateProps.titleFormat || this.globalDateFormat || this.globaldateformate,
        type: this.dateProps.type || "date",
        valueType: this.dateProps.valueType || "format",
        editable: this.dateProps.editable || false,
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>
