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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import genReport from "@/plugins/genreport";
import genReportXLSX from "@/plugins/genreportxlsx";

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

import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type {
  DataFileOrder,
  FormDataDetail,
} from "@/modules/18_command/interface/index/Main";

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

const modal = defineModel<boolean>("modal", { required: true });
const command = defineModel<string>("command", { required: true });
const commandId = defineModel<string>("commandId", { required: true });
const issue = ref<string | null>(null);
const promises = ref<any>([]);

const tab = ref<string>("main"); //tab
const page = ref<number>(1);
const numOfPages = ref<number>(0); //จำนวนหน้า pdf
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf

const dialog = ref<boolean>(false); // เปิด dialog
const isLoadView = ref<boolean>(false);
const isAttachment = ref<boolean>(false);
const dataCover = ref<DataFileOrder>(); //ข้อมูลไฟล์คำสั่ง
const dataAttachment = ref<DataFileOrder>(); //ข้อมูลไฟล์แบนท้าย

/** ปิด popup */
function closeDialog() {
  modal.value = false;
  command.value = "";
  commandId.value = "";
}

/**
 * เปลี่ยน tab
 * @param val ชื่อ tab
 */
function setTab(val: string) {
  tab.value = val;
  page.value = 1;
}

/**
 * ดึง class ตามที่ set ไว้
 */
function getClass(val: boolean) {
  return {
    "card-header-active q-px-lg q-py-md cursor-pointer": val,
    "card-header q-px-lg q-py-md cursor-pointer": !val,
  };
}

async function checkAttachment() {
  await http
    .get(config.API.commandRegister(commandId.value))
    .then(async (res) => {
      const data = res.data.result;
      isAttachment.value = data.isAttachment;
      if (isAttachment.value) {
        promises.value.push(fetchDataCommand("attachment"));
      }
    });
}

/**
 * ฟังชั่นดาวห์โหลดไฟล์
 * @param type pdf/docx
 */
async function downloadCover(type: string) {
  if (tab.value === "main") {
    genReport(
      dataCover.value,
      `คำสั่ง ${issue.value}`,
      type,
      "?folder=command"
    );
  } else {
    genReportXLSX(
      dataAttachment.value,
      `เอกสารแนบท้าย ${issue.value}`,
      type,
      "?folder=command"
    );
  }
}

/**
 * ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
 * @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
 */
async function fetchDataCommand(type: string) {
  await http
    .get(config.API.commandRegisterByType(commandId.value, type))
    .then(async (res) => {
      const dataMain = await res.data.result;
      if (type === "cover") {
        dataCover.value = dataMain;
        issue.value = await res.data.result.data.commandTitle;
        await fetchPDF(dataCover.value);
      } else {
        dataAttachment.value = dataMain;
      }
    });
}

/** ฟังชั่นกำหนดค่าของ PDF*/
async function fetchPDF(data: any, type: string = "docx?folder=command") {
  isLoadView.value = false;
  await axios
    .post(config.API.reportTemplate + `/${type}`, data, {
      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;
        isLoadView.value = true;
      }, 1500);
    })
    .catch(async (e) => {
      messageError($q, e);
      isLoadView.value = true;
    });
}

watch(
  () => modal.value,
  async () => {
    if (modal.value) {
      showLoader();
      promises.value = [checkAttachment(), fetchDataCommand("cover")];

      await Promise.all(promises.value)
        .catch((e) => {
          messageError($q, e);
          hideLoader();
        })
        .finally(() => {
          hideLoader();
        });
    }
  }
);

/**
 * check tab เมื่อมีการเปลี่ยน tab
 */
watch(
  () => tab.value,
  () => {
    if (tab.value === "main") {
      fetchPDF(dataCover.value);
    }
    if (tab.value === "second") {
      fetchPDF(dataAttachment.value, "xlsx?folder=command");
    }
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80%">
      <DialogHeader :tittle="`คำสั่ง ${command}`" :close="closeDialog" />
      <q-separator />

      <q-card-section>
        <div class="space">
          <div @click="setTab('main')" :class="getClass(tab == 'main')">
            <div class="q-pr-sm">คำสั่ง</div>
          </div>

          <div
            v-if="isAttachment"
            @click="setTab('second')"
            :class="getClass(tab == 'second')"
          >
            <div class="q-pr-sm">เอกสารแนบท้าย</div>
          </div>
          <q-space />
          <q-btn
            class="text-dark"
            flat
            dense
            icon="mdi-fullscreen"
            color="add"
            @click="dialog = true"
          />
        </div>
        <q-separator style="margin-top: -1px; z-index: 1" />
        <div class="q-pa-sm">
          <div class="q-pa-sm row q-gutter-sm">
            <q-btn
              outline
              color="red"
              icon="mdi-file-pdf"
              label="ดาวน์โหลดไฟล์ PDF"
              @click="downloadCover('pdf')"
              class="q-px-sm"
            >
            </q-btn>

            <q-btn
              v-if="tab === 'main'"
              outline
              class="q-px-sm"
              color="blue"
              icon="mdi-file-word"
              label="ดาวน์โหลดไฟล์ docx"
              @click="downloadCover('docx')"
            />

            <q-btn
              v-else
              outline
              class="q-px-sm"
              color="green"
              icon="mdi-file-excel"
              label="ดาวน์โหลดไฟล์ xlsx"
              @click="downloadCover('xlsx')"
            />
          </div>
          <q-card bordered class="card-pdf q-mx-sm 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">
                หน้าที่ {{ 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" v-if="isLoadView">
              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
            </div>
            <div
              class="full-width row flex-center text-accent q-gutter-sm"
              v-else
            >
              <span
                ><div
                  style="
                    height: 60vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                  "
                  class="text-grey-5"
                >
                  <q-spinner color="primary" size="3em" :thickness="10" />
                </div>
              </span>
            </div>
          </q-card>
        </div>

        <q-dialog
          v-model="dialog"
          persistent
          :maximized="true"
          transition-show="slide-up"
          transition-hide="slide-down"
        >
          <q-card class="bg-white text-white">
            <div
              class="flex justify-end items-center align-center q-mr-md q-mt-sm"
            >
              <q-btn
                icon="close"
                unelevated
                round
                dense
                style="color: #ff8080; background-color: #ffdede"
                size="12px"
                v-close-popup
              />
            </div>
            <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"
                />
                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
              </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>
      </q-card-section>
      <q-separator />
    </q-card>
  </q-dialog>
</template>
<style scoped lang="scss">
.space {
  background-color: #e9eaec61;
  display: flex;
  z-index: 3;
  min-height: 40px;
}

.card-header-active {
  margin-top: 5px;
  margin-left: -1px;
  background-color: white;
  padding: 2px !important;
  border-radius: 10px 10px 0px 0px;
  border: 1px solid #e9eaec;
  width: 200px;
  display: flex;
  justify-content: center;
  border-bottom-style: none;
  font-weight: 600;
  align-items: center;
}

.card-header {
  margin-top: 5px;
  background-color: transparent;
  padding: 2px !important;
  border-radius: 10px 10px 0px 0px;
  width: 200px;
  display: flex;
  justify-content: center;
  font-weight: normal;
  align-items: center;
}

.card-pdf {
  border-radius: 10px;
  border: 1px solid #e9eaec;
  background-color: #e9eaec61;
}
</style>
