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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";

const $q = useQuasar();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const route = useRoute();
const { messageError } = mixin;

/** id ประเมิน*/
const evaluateId = ref<string>(route.params.id.toString());

/** emit*/
const emit = defineEmits(["update:file"]);

const isLoading = ref(false);
const selectedItem = ref(1);
const formTemplates = ref([
  {
    title: "แบบพิจารณาคุณสมบัติบุคคล",
    fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
  },
  {
    title: "แบบแสดงรายละเอียดการเสนอผลงาน",
    fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
  },
  {
    title: "แบบประเมินคุณลักษณะบุคคล",
    fileName: "4-แบบประเมินคุณลักษณะบุคคล",
  },
  {
    title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
    fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  },
]);

/**
 * function กดเลือกแสดงเอกสาน
 * @param itemNumber  เอกสาร
 */
function handleItemClick(itemNumber: number) {
  store.tabPanels = itemNumber.toString();
  selectedItem.value = itemNumber;
  fetchDocument(formTemplates.value[itemNumber - 1].fileName);
}

/**
 * function เรีกยเอกสาร
 * @param fileName ชื่อเอกสาร
 */
async function fetchDocument(fileName: string, forceDownload = false) {
  if (forceDownload) {
    isLoading.value = true;
  }
  evaluateId.value &&
    (await http
      .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
      .then(async (res) => {
        await downloadFile(res.data.downloadUrl);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        isLoading.value = false;
      }));
}

/**
 * function ดาวน์โหลดไฟล์
 * @param url ลิงก์ดาวน์โหลดไฟล์
 */
async function downloadFile(url: string) {
  await axios
    .get(url, {
      responseType: "blob",
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      emit("update:file", objectUrl, url);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** HooK lifecycle*/
onMounted(async () => {
  await fetchDocument(
    formTemplates.value[selectedItem.value - 1].fileName,
    true
  );
});
</script>

<template>
  <q-list separator>
    <q-item
      v-for="(item, index) in formTemplates"
      :key="index"
      clickable
      v-ripple
      :active="selectedItem === index + 1 ? true : false"
      active-class="text-primary"
      @click="handleItemClick(index + 1)"
      class="cursor-pointer"
    >
      <q-skeleton v-if="isLoading" type="text" width="100%" />
      <q-item-section v-else>{{ item.title }}</q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>
