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

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

import type { CardDataPos } from "@/modules/10_registry/interface/index/Main";

import DialogHeader from "@/components/DialogHeader.vue";

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

const modal = defineModel<boolean>("modal", { required: true });

const isLoading = ref<boolean>(false);
const cardData = ref<CardDataPos[]>([
  {
    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
    data: [],
  },
  {
    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
    data: [],
  },
  {
    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
    data: [],
  },
]);

function onClosePopup() {
  modal.value = false;
}

async function fetchDataPosition() {
  isLoading.value = true;
  await http
    .get(config.API.salaryTenurePosition(""))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        // map ข้อมูลระยะเวลาดำรงตำแหน่ง
        const formatData = (list: any) =>
          list.map((e: any) => ({
            name: e.name ?? "",
            time: formatDatePosition(e.year, e.month, e.day),
          }));

        // แปลงข้อมูลจาก data
        const position = data.position ? formatData(data.position) : []; //ระยะเวลาดำรงตำแหน่งในสายงาน
        const posLevel = data.posLevel ? formatData(data.posLevel) : []; //ระยะเวลาดำรงตำแหน่งตามระดับ
        const posExecutive = data.posExecutive
          ? formatData(data.posExecutive)
          : []; //ระยะเวลาดำรงตำแหน่งทางการบริหาร

        // นำข้อมูลไปใส่ใน cardData
        if (cardData.value[0]) {
          cardData.value[0].data = position;
        }
        if (cardData.value[1]) {
          cardData.value[1].data = posLevel;
        }
        if (cardData.value[2]) {
          cardData.value[2].data = posExecutive;
        }
        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
        if (posExecutive.length === 0 && cardData.value.length > 2) {
          cardData.value.splice(2, 1);
        }
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

watch(modal, (v) => {
  if (v) {
    fetchDataPosition();
  } else {
    cardData.value.forEach((item) => {
      item.data = [];
    });
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 40%">
      <DialogHeader :tittle="`ประวัติการรับราชการ`" :close="onClosePopup" />
      <q-separator />
      <q-card-section>
        <div class="row q-col-gutter-sm q-pb-sm">
          <q-skeleton
            v-if="isLoading"
            type="Qcard"
            width="100%"
            height="240px"
          />

          <div
            v-else
            class="col"
            v-for="(item, index) in cardData"
            :key="index"
          >
            <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
                {{ item.label }}
              </div>
              <div class="col-12"><q-separator /></div>
              <q-card-section class="q-pt-none" style="min-height: 200px">
                <li v-for="data in item.data">
                  {{ data.name }} {{ data.time }}
                </li>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
