<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 { DataCardPos } from "@/modules/04_registryPerson/interface/index/government";

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

/** props*/
const props = defineProps({
  id: {
    type: String,
    requier: true,
  },

  type: { type: String, default: "" },
});

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

async function fetchDataTenure() {
  if (props?.id) {
    isLoading.value = true;
    await http
      .get(
        config.API.salaryTenurePosition(
          props?.id,
          props.type.toLocaleLowerCase() === "officer" ? "" : "-employee"
        )
      )
      .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 = formatData(data.position);
          const posLevel = formatData(data.posLevel);
          const posExecutive = formatData(data.posExecutive);

          // นำข้อมูลไปใส่ใน cardData
          cardData.value[0].data = position; //ระยะเวลาดำรงตำแหน่งในสายงาน
          cardData.value[1].data = posLevel; //ระยะเวลาดำรงตำแหน่งตามระดับ
          cardData.value[2].data = posExecutive; //ระยะเวลาดำรงตำแหน่งทางการบริหาร

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

onMounted(() => {
  fetchDataTenure();
});
</script>

<template>
  <div class="q-pa-md">
    <div class="text-weight-bold row items-center">
      <q-icon name="mdi-account-tie" color="grey-7" />
      <span class="q-ml-md">ข้อมูลตำแหน่ง </span>
    </div>
    <div v-if="isLoading" class="row q-pa-sm">
      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
      <q-skeleton class="col-12 q-mt-sm" height="140px" square />
    </div>
    <div v-else class="row q-pa-sm">
      <q-list flat bordered class="col-12" style="border-radius: 5px">
        <q-card flat v-for="(item, index) in cardData" :key="index">
          <q-item>
            <q-item-section>
              <q-item-label class="text-grey-6">{{ item.label }}</q-item-label>
              <q-item-label
                ><li v-for="data in item.data">
                  {{ data.name }} {{ data.time }}
                </li>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator v-if="index !== 2" />
        </q-card>
      </q-list>
    </div>
  </div>
</template>

<style scoped></style>
