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

import http from "@/plugins/http";
import config from "@/app.config";

import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";

import DialogHeader from "@/components/DialogHeader.vue";

import { useCounterMixin } from "@/stores/mixin";

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

const modal = defineModel<boolean>("modal", { required: true });
const dataTemplateDetail = defineModel<any>("dataTemplateDetail", {
  required: true,
});

const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const vuePDFRef = ref<any>(null);

async function fetchPDF(type: string = "docx") {
  showLoader();
  await axios
    .post(
      config.API.reportTemplate + `/${type}`,
      {
        template: "command_test",
        reportName: "docx-report",
        data: {
          commandNo: dataTemplateDetail.value.commandNo, //
          commandYear: dataTemplateDetail.value.commandYear, //
          commandTitle: "นาย",
          detailHeader: dataTemplateDetail.value.detailHeader, //
          detailBody: dataTemplateDetail.value.detailBody, //
          detailFooter: dataTemplateDetail.value.detailFooter, //
          commandDate: "",
          name: "Chief Technology Officer",
          position: "Chief Technology Officer",
          issue: dataTemplateDetail.value.issue, //
        },
      },
      {
        headers: {
          accept: "application/pdf",
          "content-Type": "application/json",
        },
        responseType: "blob",
      }
    )
    .then(async (res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      const pdfData = usePDF(`${objectUrl}`);
      setTimeout(() => {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
        hideLoader();
      }, 1500);
    })
    .catch((e) => {
      messageError($q, e);
      hideLoader();
    });
}

function onClose() {
  modal.value = false;
  pdfSrc.value = undefined;
  page.value = 1
}

watch(modal, () => {
  modal.value && fetchPDF();
});
</script>

<template>
  <q-dialog v-model="modal" persistent full-height full-width>
    <q-card>
      <DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
      <q-separator />

      <q-card-section
        bordered
        class="scroll q-ma-md q-pa-md"
        style="height: 90%"
      >
        <div class="justify-between items-center align-center q-pb-sm row">
          <q-btn
            class="text-dark bg-grey-4"
            flat
            dense
            @click="page = page > 1 ? page - 1 : page"
          >
            <q-icon name="mdi-chevron-left" />
          </q-btn>

          <span class="body-2 grey--text text-black">
            หน้าที่ {{ page }} จาก {{ numOfPages }}
          </span>

          <q-btn
            class="text-dark bg-grey-4"
            flat
            dense
            @click="page = page < numOfPages ? page + 1 : page"
          >
            <q-icon name="mdi-chevron-right" />
          </q-btn>
        </div>
        <div class="pdfWidth">
          <VuePDF
            ref="vuePDFRef"
            :pdf="pdfSrc"
            :page="page"
            fit-parent
            :scale="0.1"
          />
        </div>
        <div class="justify-between items-center align-center q-pt-sm row">
          <q-btn
            class="text-dark bg-grey-4"
            flat
            dense
            @click="page = page > 1 ? page - 1 : page"
          >
            <q-icon name="mdi-chevron-left" />
          </q-btn>

          <span class="body-2 grey--text text-black">
            หน้าที่ {{ page }} จาก {{ numOfPages }}
          </span>

          <q-btn
            class="text-dark bg-grey-4"
            flat
            dense
            @click="page = page < numOfPages ? page + 1 : page"
          >
            <q-icon name="mdi-chevron-right" />
          </q-btn>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
