<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type { DataSumCalendarObject } from "@/modules/01_metadata/interface/index/Calendar";

import calendarComponent from "@/modules/01_metadata/components/calendar/calendarMain.vue";

const $q = useQuasar();
const { showLoader, hideLoader, messageError, genColor15 } = useCounterMixin();

const listsSumCalendar = ref<DataSumCalendarObject[]>([]); //รายการสรุปวันหยุดในแต่ละเดือนประจำปี
const year = ref<number>(new Date().getFullYear()); //ป๊

/**
 *  ดึงข้อมูลรายการสรุปวันหยุดในแต่ละเดือนประจำปี
 */
async function fetchDataSummaryCalendar() {
  showLoader();
  await http
    .get(config.API.summaryHolidayHistoryYear(year.value))
    .then(async (res) => {
      let data = await res.data.result;
      listsSumCalendar.value = data.map((e: DataSumCalendarObject) => ({
        ...e,
        color: genColor15(e.id),
      }));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
 *
 * จะทำการดึงข้อมูลสรุปวันหยุดในแต่ละเดือนประจำปี
 */
onMounted(async () => {
  await fetchDataSummaryCalendar();
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    ข้อมูลปฏิทินวันหยุด
  </div>
  <div class="row col-12 q-col-gutter-sm">
    <div class="col-3">
      <q-card bordered style="height: 100%">
        <div class="text-grey-9 items-center q-pa-md">
          <div class="row no-wrap items-center">
            <div class="text-dark text-weight-medium q-pb-sm q-px-xs">
              สรุปวันหยุดในแต่ละเดือนประจำปี
              <span class="text-weight-bold text-primary q-pl-sm">
                {{ year + 543 }}</span
              >
            </div>
            <q-space />
          </div>
          <div class="col-12 row">
            <div
              class="col-xs-4 col-md-6 row q-pa-xs"
              v-for="(list, index) in listsSumCalendar"
              :key="index"
            >
              <q-card bordered class="col-12">
                <div
                  class="col-12 text-subtitle2 row q-px-sm items-center q-px-sm"
                >
                  <span :class="'text-weight-medium text-' + `${list.color}`">{{
                    list.monthFull
                  }}</span>
                  <q-space />
                  <q-badge
                    color="white"
                    :class="
                      'text-weight-bold text-subtitle1 text-' + `${list.color}`
                    "
                    :label="list.count"
                    rounded
                  />
                </div>
              </q-card>
            </div>
          </div>
        </div>
      </q-card>
    </div>
    <div class="col-9">
      <q-card bordered class="q-pa-md">
        <calendarComponent
          v-model:date-year="year"
          :fetch-dataSummaryCalendar="fetchDataSummaryCalendar"
        />
      </q-card>
    </div>
  </div>
</template>

<style scoped></style>
