<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('ویرایش تخفیف')">
      <div class="grid grid-cols-3 gap-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full custom-input" v-model="date" />
            <label>{{ $t("تاریخ شروع") }}</label>
          </FloatLabel>
          <date-picker
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            display-format="jYYYY-jMM-jDD HH:mm"
            :timezone="true"
            color="dimgray"
            v-model="date"
            simple
            custom-input=".custom-input"
          ></date-picker>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full custom-input2" v-model="date2" />
            <label>{{ $t("تاریخ پایان") }}</label>
          </FloatLabel>
          <date-picker
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            display-format="jYYYY-jMM-jDD HH:mm"
            :timezone="true"
            color="dimgray"
            v-model="date2"
            simple
            custom-input=".custom-input2"
          ></date-picker>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="discount.code" />
            <label>{{ $t("کد تخفیف") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <Dropdown
              v-model="noe"
                  @change="setType"
              :options="['مبلغ', 'درصد']"
              :optionLabel="levels"
              :optionValue="levels"
              class="w-full"
            />
            <label>{{ $t("نوع تخفیف") }}</label>
          </FloatLabel>
        </div>
        <div v-if="noe === 'مبلغ'" class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="discount.price" />
            <label>{{ $t("مبلغ تخفیف") }}</label>
          </FloatLabel>
        </div>

        <div v-if="noe === 'درصد'" class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="discount.percent" />
            <label>{{ $t("درصد تخفیف") }}</label>
          </FloatLabel>
        </div>
      </div>

      <div class="flex pt-4 justify-end">
        <Button
          :label="$t('save')"
          icon="pi pi-save"
          severity="success"
          :loading="saving"
          @click="create(discount)"
        />
      </div>
    </Panel>
  </section>
</template>

<script setup>
import { useDiscountStore } from "@/stores/discounts";
import { ref, watchEffect, reactive } from "vue";
import moment from "moment-jalaali";
import { useRoute } from "vue-router";
const date = ref(null);
const date2 = ref(null);
const noe = ref("مبلغ");
const store = useDiscountStore();
const data = ref();
const setType = (val) => {
  if (val.value === 'درصد') {
    discount.discountType = 'percent'
  }else{
    discount.discountType = 'price'
  }
}
const discount = reactive({
  id: "",
  startDate: "",
  endDate: "",
  code: "",
  discountType: "",
  price: "",
  percent: 0,
  allUsers: true,
});
const route = useRoute();
const create = async(val) => {
 const posts = await store.update(val)
};
watchEffect(async () => {
  data.value = await store.getDiscount(route.params.id);
  console.log("this", data.value);
  discount.id = data.value.id;
  (discount.startDate = data.value.startDate),
    (discount.endDate = data.value.endDate),
    (discount.code = data.value.code),
    (discount.discountType = data.value.discountType),
    (discount.price = data.value.price),
    (discount.percent = data.value.percent);
  date.value = data.value.startDate;
  date2.value = data.value.endDate;
  if (data.value.discountType === "percent") {
    noe.value = "درصد";
  } else {
    noe.value = "مبلغ";
  }
});
</script>