<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { usePDF } from "@tato30/vue-pdf";

import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import axios from "axios";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

/** use*/
const route = useRoute();
const $q = useQuasar();
const store = useEvaluateDetailStore();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const id = ref<string>(route.params.id as string); //id ประเมิน
const selectedItem = ref<number>(1); //ไฟล์ที่เลือก

/**
 * funtion เลือกไฟล์
 * @param itemNumber indexItems
 */
function handleItemClick(itemNumber: number) {
  store.tabPanels = itemNumber.toString();
  selectedItem.value = itemNumber;
  getFile(itemNumber);
}

/**
 * function เรียกไฟล์
 * @param volume index item
 */
async function getFile(volume: number) {
  showLoader();
  const fileText = numToThai(volume);
  await http
    .get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileText))
    .then(async (res) => {
      const link = res.data.downloadUrl;
      const type = res.data.fileType;
      await getPDF(link, type);
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();

      store.pdfSrcStore = undefined;
    });
}

/**
 * function loafFile PDF
 * @param url linkLoadFile
 * @param type ประเภทไฟล์
 */
async function getPDF(url: string, type: string) {
  axios
    .get(url, {
      method: "GET",
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
        Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
      },
    })
    .then(async (res) => {
      store.log = 0;
      store.urlDownloadFile = url;
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);

      const pdfData = await usePDF(`${objectUrl}`);
      setTimeout(() => {
        store.log = 1;
        store.pdfSrcStore = pdfData.pdf.value;
        store.numOfPagesStore = pdfData.pages.value;
        hideLoader();
      }, 1500);
    })
    .catch(() => {
      hideLoader();
    })
    .finally(() => {
      store.log = 0;
    });
}

/**
 * function Convert ชื่อไฟล์
 * @param val indexItems
 */
function numToThai(val: number) {
  switch (val) {
    case 1:
      return "1-แบบพิจารณาคุณสมบัติบุคคล";
    case 2:
      return "2-แบบแสดงรายละเอียดการเสนอผลงาน";
    case 3:
      return "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)";
    case 4:
      return "4-แบบประเมินคุณลักษณะบุคคล";
    case 5:
      return "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)";
    case 6:
      return "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)";
    default:
      return "1-แบบพิจารณาคุณสมบัติบุคคล";
  }
}

onMounted(async () => {
  await getFile(selectedItem.value);
});
</script>

<template>
  <q-list separator dense>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 1 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(1)"
    >
      <q-item-section class="q-py-sm">แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 2 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(2)"
    >
      <q-item-section class="q-py-sm"
        >แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section
      >
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 3 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(3)"
    >
      <q-item-section class="q-py-sm"
        >แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
        (เอกสารแบบ ก)</q-item-section
      >
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 4 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(4)"
    >
      <q-item-section class="q-py-sm">
        แบบประเมินคุณลักษณะบุคคล
      </q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 5 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(5)"
    >
      <q-item-section class="q-py-sm">
        แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
      </q-item-section>
    </q-item>
    <q-item
      clickable
      v-ripple
      :active="selectedItem === 6 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(6)"
    >
      <q-item-section class="q-py-sm">
        ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)
      </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>
