<template>
  <div class="row form-group mt-3" :key="$attrs.key">
    <label
      :for="localFormElement.key"
      :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ localFormElement.label }}</label
    >

    <date-picker
      v-if="localFormElement?.savetype == 'time'"
      append-to="body"
      :popover="{
        placement: 'left',
        offsetX: 10,
        offsetY: 10,
      }"
      editable
      color="#00acc1"
      container="form-group"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
      class="date-picker mt-2"
      v-model="textValue"
      @input="$emit('oninput', $event)"
      :placeholder="localFormElement.placeholder"
      :type="'time'"
    />
    <date-picker
      v-else-if="localFormElement?.subtype == 'simple'"
      append-to="body"
      :popover="{
        placement: 'left',
        offsetX: 10,
        offsetY: 10,
      }"
      editable
      simple
      color="#00acc1"
      container="form-group"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
      class="date-picker mt-2"
      v-model="textValue"
      :format="getFormat()"
      :display-format="getDisplayFormat()"
      @input="$emit('oninput', $event)"
      :placeholder="localFormElement.placeholder"
      :type="'date'"
    />
    <date-picker
      v-else
      append-to="body"
      :popover="{
        placement: 'left',
        offsetX: 10,
        offsetY: 10,
      }"
      editable
      color="#00acc1"
      container="form-group"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
      class="date-picker mt-2"
      v-model="textValue"
      :format="getFormat()"
      :display-format="getDisplayFormat()"
      @input="$emit('oninput', $event)"
      :placeholder="localFormElement.placeholder"
      :type="'date'"
    />
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
// import VuePersianDatetimePicker from "vue-persian-datetime-picker";

export default {
  mixins: [formBuilderMixin],
  data() {
    return {
      date: "",
    };
  },
  methods: {
    getFormat() {
      if (
        this.localFormElement?.savetype == "datetime" ||
        this.localFormElement?.savetype == "timestamp"
      )
        return "YYYY-MM-DD HH:mm";
      else if (this.localFormElement?.savetype == "date") return "YYYY-MM-DD";
      else if (this.localFormElement?.savetype == "jdate")
        return "jYYYY/jMM/jDD";
      else if (this.localFormElement?.savetype == "time") return "time";
      else return "jYYYY/jMM/jDD";
    },
    getDisplayFormat() {
      if (this.localFormElement?.displaytype == "datetime")
        return "jYYYY/jMM/jDD HH:mm";
      if (this.localFormElement?.displaytype == "jdatetime")
        return "jYYYY/jMM/jDD HH:mm";
      else if (this.localFormElement?.displaytype == "date")
        return "YYYY-MM-DD";
      else if (this.localFormElement?.displaytype == "jdate")
        return "jYYYY/jMM/jDD";
      else if (this.localFormElement?.displaytype == "time") return "time";
      else return "jYYYY/jMM/jDD";
    },
  },
  components: {
    // datePicker: VuePersianDatetimePicker,
    datePicker: () => import("vue-persian-datetime-picker"),
  },
};
</script>
<style lang="scss">
.form-group.inside-entity .date-picker .vpd-input-group .vpd-icon-btn {
  //right: 90% !important;
  right: unset !important;
  left:0;
  height: 100% !important;
}
</style>
