<script setup>
import { ref, watch, defineProps } from "vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const route = useRoute();
const dateRange = ref([]);
const props = defineProps({
  form:Object,
});
const setDateRange = (type) => {
  switch (Number(type)) {
    case 1:
      dateRange.value = [
        {
          key: "start_at",
          value: dayjs().startOf("month").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.start_date"),
        },
        {
          key: "end_at",
          value: dayjs().endOf("month").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.end_date"),
        },
      ];
      break;
    case 2:
      dateRange.value = [
        {
          key: "start_at",
          value: dayjs().startOf("week").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.start_date"),
        },
        {
          key: "end_at",
          value: dayjs().endOf("week").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.end_date"),
        },
      ];
      break;
    case 3:
      dateRange.value = [
        {
          key: "start_at",
          value: dayjs().startOf("year").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.start_date"),
        },
        {
          key: "end_at",
          value: dayjs().endOf("year").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.end_date"),
        },
      ];
      break;
      case 4:
      dateRange.value = [
        {
          key: "start_at",
          value: dayjs("2024-01-01").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.start_date"),
        },
        {
          key: "end_at",
          value: dayjs().endOf("year").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.end_date"),
        },
      ];
      break;
    default:
      dateRange.value = [
        {
          key: "start_at",
          value: dayjs("2024-01-01").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.start_date"),
        },
        {
          key: "end_at",
          value: dayjs().endOf("year").valueOf(),
          dateFormat: "yyyy-MM-dd",
          placeholder: t("alert.end_date"),
        },
      ];
      break;
  }
};

// 監聽路由參數變化
watch(
  () => route.params.type,
  (newVal) => {
      setDateRange(newVal)
  },
    { immediate: true }
);


// 監聽 dateRange 的變化
watch(
  dateRange,
  () => {
    if(dateRange.value.length > 0){
      props.form.start_time= dayjs(dateRange.value[0].value).format("YYYY-MM-DD");
      props.form.end_time= dayjs(dateRange.value[1].value).format("YYYY-MM-DD");
    }
  },
  { deep: true, immediate:true }
);


</script>

<template>
  <div class="flex flex-wrap items-center mt-4 lg:mt-0">
    <span class="text-lg font-bold me-4">{{ $t("operation.date") }} : </span>
    <DateGroup :items="dateRange" :withLine="true" />
  </div>
</template>

<style lang="scss" scoped></style>