<script setup lang="ts">
import { onMounted, ref } from "vue";
import { defineAsyncComponent } from "@vue/runtime-core";
import { useRouter, useRoute } from "vue-router";
import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { usePlacementDataStore } from "@/modules/05_placement/store";

const DataStore = usePlacementDataStore();

const $q = useQuasar;
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
let roleAdmin = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
const examId = route.params.examId;
const year = ref<string>("");
const round = ref<string>("");
const title = ref<string>("");
const examData = ref<any>();
const AddTablePosition = defineAsyncComponent(
  () => import("@/modules/05_placement/components/PersonalList/Table.vue")
);
const stat = ref<any>({
  total: 0,
  unContain: 0,
  prepareContain: 0,
  contain: 0,
  disclaim: 0,
});

const getStat = async () => {
  const examIdString = Array.isArray(examId) ? examId[0] : examId;
  await http
    .get(config.API.getStatCard(examIdString))
    .then((res) => {
      const statCard = res.data.result;
      // อัปเดตค่าในตัวแปร stat
      stat.value = {
        total: statCard.total,
        unContain: statCard.unContain,
        prepareContain: statCard.prepareContain,
        contain: statCard.contain,
        disclaim: statCard.disclaim,
      };
    })
    .catch((e) => {
      messageError($q, e);
    });
};

onMounted(async () => {
  if (DataStore.DataMainOrig.length == 0) {
    await fetchPlacementData();
  }

  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
  }

  await getStat();

  examData.value = await DataStore.DataMainOrig.find(
    (x: any) => x.id == examId
  );

  title.value = examData.value == null ? null : examData.value.examRound;
  round.value = examData.value == null ? null : examData.value.examOrder;
  year.value = examData.value == null ? null : examData.value.fiscalYear;
});

const fetchPlacementData = async () => {
  showLoader();
  http
    .get(config.API.MainDetail(0))
    .then(async (res) => {
      DataStore.DataMainOrig = res.data.result;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>
<template>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
    <div class="toptitle">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.push(`/placement`)"
      />
      รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
    </div>
    <q-card bordered class="q-py-sm row col-12">
      <div class="col-12 row bg-white">
        <div class="fit q-px-md q-py-sm">
          <div class="row col-12 q-col-gutter-md fit">
            <cardTop
              :amount="stat.total"
              label="จำนวนทั้งหมด"
              color="#016987"
            />
            <cardTop
              v-if="roleAdmin"
              :amount="stat.unContain"
              label="จำนวนที่ยังไม่บรรจุ"
              color="#02A998"
            />
            <cardTop
              :amount="stat.prepareContain"
              label="จำนวนที่เตรียมบรรจุ"
              color="#2EA0FF"
            />
            <cardTop
              :amount="stat.contain"
              label="จำนวนที่บรรจุแล้ว"
              color="#4154B3"
            />
            <cardTop
              :amount="stat.disclaim"
              label="จำนวนที่สละสิทธิ์"
              color="#FF5C5F"
            />
          </div>
        </div>
      </div>
    </q-card>
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
    <div>
      <AddTablePosition
        :statCard="getStat"
        class="q-pa-none"
        @get-stat="getStat"
      />
    </div>
  </q-card>
</template>

<style lang="scss">
.cardNum {
  border-radius: 5px;
  padding-left: 8px;
}
</style>
