<template>
  <div class="row form-group" :key="$attrs.key">
    <label
      :for="localFormElement.key"
      :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ localFormElement.label }}</label
    >
    <div
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
    >
      <label for="">از:</label>
      <date-picker
        editable
        color="#00acc1"
        auto-submit
        popover="bottom-left"
        class="date-picker mb-3"
        v-model="textValue1"
        format="YYYY-MM-DD"
        display-format="jYYYY-jMM-jDD"
        @input="emitInput()"
        :placeholder="localFormElement.placeholder"
      />
    </div>
    <div :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]">
      <label for="">تا:</label>
      <date-picker
        editable
        color="#00acc1"
        auto-submit
        popover="bottom-left"
        class="date-picker"
        v-model="textValue2"
        format="YYYY-MM-DD"
        display-format="jYYYY-jMM-jDD"
        @input="emitInput()"
        :placeholder="localFormElement.placeholder"
      />
    </div>
  </div>
</template>

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

export default {
  mixins: [formBuilderMixin],
  data() {
    return {
      date: "",
      textValue1: "",
      textValue2: "",
    };
  },
  watch: {
    textValue1: {
      handler(newValue) {
        this.setTextValueRange();
      },
    },
    textValue2: {
      handler(newValue) {
        this.setTextValueRange();
      },
    },
  },
  methods: {
    emitInput() {
      this.setTextValueRange();
      this.$emit("oninput", this.textValue);
    },
    setTextValueRange() {
      let date1 = this.textValue1 ? this.datefa(this.textValue1) : "";
      let date2 = this.textValue2 ? this.datefa(this.textValue2) : "";
      let a = "--";
      if (date1 || date2) {
        a = "--";
      } else {
        a = "";
      }

      this.textValue = date1 + a + date2;
    },
    datefa(item) {
      var m = item;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },
  },
  components: {
    // datePicker: VuePersianDatetimePicker,
    datePicker: () =>
      import(
         "vue3-persian-datetime-picker"
      ),
  },
};
</script>
<style lang="scss" scoped></style>
