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

import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";

/** import Type*/
import type { DataStat } from "@/modules/07_insignia/interface/index/Main";
import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Main";

/**import Componrnts*/
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat

/**use  */
const $q = useQuasar(); //ใช้ noti quasar
const { fetchDataCheckIsoffice } = useRoleWorkflowDataStore();
const { messageError, dialogConfirm, showLoader, hideLoader, success } =
  useCounterMixin();

//การเจ้าหน้าที่
const isStaff = ref<boolean>(false);
const isOfficer = ref<boolean>(false);
const isDirector = ref<boolean>(false);
const isDeputy = ref<boolean>(false);

//ข้อมูล สถิติ
const stat = ref<DataStat>({
  allUserUser: 0,
  orgAllCount: 0,
  orgNoSendCount: 0,
  orgSendCount: 0,
});

//ข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
const round = ref<string>("");
const optionRound = ref<
  Array<{ id: number; year: string; name: string; period_revision: string }>
>([]);

/** ฟังก์ชันเรียกข้อมูลการเป็นเจ้าหน้าที่*/
async function fetchCheckIsofficer() {
  try {
    const data = await fetchDataCheckIsoffice("SYS_INSIGNIA_MANAGE_EMP");
    isStaff.value = data.isStaff;
    // isStaff.value = true; // สำหรับการทดสอบ
    isOfficer.value = data.isOfficer;
    isDirector.value = data.isDirector;
    isDeputy.value = data.isDeputy;
  } catch (err) {
    messageError($q, err);
  }
}

/** ฟังก์ชันเรียกข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์*/
async function fecthRoundData() {
  await http
    .get(config.API.listRoundInsignia(), { params: { path: "MANAGE" } })
    .then(async (res) => {
      optionRound.value = await res.data.result.map((e: ResponsePeriod) => ({
        id: e.period_id,
        year: e.period_year,
        name: e.period_name,
        period_revision: e.period_revision,
      }));
      //มีรอบการเสนอขอพระราชทานเครื่อง
      if (optionRound.value.length !== 0) {
        // DataStore.optionRound = optionRound.value;
        // const lastValue = optionRound.value[0];
        // await fetchListOrg(lastValue.period_revision);
        // await fecthAgency(lastValue.period_revision);
        // if (DataStore.roundId) {
        // round.value = DataStore.roundId; // รอบการเสนอให้ใช้รอบที่เลือก
        // } else {
        // round.value = lastValue.id.toString(); // รอบการเสนอให้ใช้รอบล่าสุด
        // }
        // await fecthStat(round.value);
        // DataStore.roundId = round.value;
        // roundName.value = lastValue.name;
        // loadview.value = true;
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** ฟังก์ชันยื่นยันการล็อกข้อมูล*/
function onConfrimIsLockData() {
  dialogConfirm(
    $q,
    () => {},
    "ยืนยันการล็อกข้อมูล",
    "คุณต้องการล็อกข้อมูลใช่หรือไม่"
  );
}

onMounted(async () => {
  showLoader();
  try {
    await fetchCheckIsofficer();
    if (isStaff.value || isOfficer.value || isDirector.value) {
      await Promise.all([fecthRoundData()]);
    }
  } catch (error) {
    messageError($q, error);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายชื่อลูกจ้างประจำ ที่มีสิทธิ์ยื่นขอพระราชทานเครื่องราชอิสริยาภรณ์
  </div>

  <q-card
    bordered
    class="row col-12 q-mt-sm"
    v-if="isDirector || isOfficer || isStaff"
  >
    <div class="row col-12 items-center bg-grey-1">
      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
      <q-select
        borderless
        dense
        v-model="round"
        :options="optionRound"
        map-options
        emit-value
        option-value="id"
        option-label="name"
      />
      <!-- @update:model-value="changround" -->

      <q-space />
      <!-- สกจ. Freez ข้อมูล -->
      <q-btn
        v-if="isOfficer && checkPermission($route)?.attrIsUpdate"
        dense
        unelevated
        label="ล็อกข้อมูล"
        color="public"
        class="q-px-md q-ml-md"
        @click="onConfrimIsLockData"
      >
        <q-tooltip>ล็อกข้อมูล</q-tooltip>
      </q-btn>
    </div>
    <div class="col-12"><q-separator /></div>
    <div v-if="isOfficer" class="col-12 row bg-white">
      <div class="fit q-px-md q-py-sm">
        <div class="row col-12 q-col-gutter-sm fit">
          <cardTop
            :amount="stat.orgAllCount"
            label="หน่วยงานทั้งหมด"
            color="#016987"
          />
          <cardTop
            :amount="stat.orgSendCount"
            label="หน่วยงานที่ส่งรายชื่อเเล้ว"
            color="#02A998"
          />
          <cardTop
            :amount="stat.orgNoSendCount"
            label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
            color="#2EA0FF"
          />
          <cardTop
            :amount="stat.allUserUser"
            label="จำนวนคนที่ยื่นขอ"
            color="#4154B3"
          />
        </div>
      </div>
    </div>
  </q-card>

  <q-card v-else>
    <div class="q-pa-md q-gutter-sm">
      <q-banner inline-actions rounded class="bg-grey-1 text-center">
        ไม่มีข้อมูลรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
      </q-banner>
    </div>
  </q-card>
</template>

<style scoped></style>
