<script setup lang="ts">
import { onMounted, ref } 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 { dialogConfirm } = useCounterMixin();

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

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

function fetchPDF(type: string = "docx") {
  axios
    .post(
      config.API.reportTemplate + `/${type}`,
      {
        template: "command_test",
        reportName: "docx-report",
        data: {
          commandNo: "๑๒๓๔๕",
          commandYear: "กระผม",
          commandTitle: "นาย",
          detailHeader: "Administrator",
          detailBody: "detailBody",
          detailFooter: "detailFooter",
          commandDate: "",
          name: "Chief Technology Officer",
          position: "Chief Technology Officer",
        },
      },
      {
        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;
      }, 1500);
    })
    .catch(async (e) => {
      //   messageError($q, e);
      //   hideLoader();
    });
}

function onClose() {
  modal.value = false;
}

onMounted(() => {
  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="card-pdf q-ma-md q-pa-md">
        <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>
