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

import config from "@/app.config";
import axios from "axios";
import { useCounterMixin } from "@/stores/mixin";

import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main";
import http from "@/plugins/http";

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

const commandId = defineModel<string>("commandId", { required: true }); // id คำสั่ง
const type = defineModel<string>("type", { required: true }); // แยก tab
// รายละเอียดคำสั่ง
const dataTemplate = defineModel<DataTemplateDetail>("dataTemplateDetail", {
  required: true,
});

const documentFile = ref<File | null>(null); // file อัปโหลด
const isLoadPDF = ref<boolean>(false); // Loading display pdf

/** page PDF */
const pdfSrc = ref<any>(null); // PDF path display
const page = ref<number>(1); // หน้าที่แสดง
const numOfPages = ref<number>(0); // จำนวนหน้า PDF ทั้งหมด
const typeFile = ref<string>(type.value === "cover" ? "docx" : "xlsx"); // นามสกุลไฟล์ cover=docx หรือ attachment=xlsx
// next page PDF
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}
// back page PDF
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

const { fetchDataTemplate } = defineProps({
  fetchDataTemplate: {
    type: Function,
    required: true,
  },
});

/**
 * ฟังก์ชั่น fillin ข้อมูลคำสั่งและแสดงตัวอย่าง Template คำสั่งในหน้า UI
 * @param dataTemple รายละเอียดคำสั่ง
 */
async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
  if (dataTemple) {
    showLoader();
    isLoadPDF.value = false;
    pdfSrc.value = undefined;
    page.value = 1;
    const reportName = `${dataTemple.code}_${type.value}`;
    const body = {
      template: reportName,
      reportName: `${typeFile.value}-report`,
      data: {
        issue: "............", //
        title: "......", //
        commandNo: "......",
        commandYear: "......",
        commandTitle: dataTemple.name,
        detailHeader: dataTemple.detailHeader,
        detailBody: dataTemple.detailBody,
        detailFooter: dataTemple.detailFooter,
        commandDate: "..................",
        commandAffectDate: "..................",
        commandExcecuteDate: "..................",
        name: "....................................",
        name1: dataTemple.name1,
        name2: dataTemple.name2,
        name3: dataTemple.name3,
        name4: dataTemple.name4,
        position: "ผู้อำนวยการสำนัก/เขต",
        authorizedUserFullName: "............",
        authorizedPosition: "...................",
        ...(dataTemple.persons ? { persons: dataTemple.persons } : {}),
      },
    };

    await axios
      .post(
        config.API.reportTemplate + `/${typeFile.value}?folder=command`,
        body,
        {
          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 = await usePDF(`${objectUrl}`);

        // แสดง PDF หลังจากโหลดเสร็จ
        setTimeout(() => {
          pdfSrc.value = pdfData.pdf.value;
          numOfPages.value = pdfData.pages.value;
          isLoadPDF.value = true;
          hideLoader();
        }, 1500);
      })
      .catch((e) => {
        // ไม่พบข้อมูล Template
        messageError($q, "", "ไม่พบข้อมูล Template");
        isLoadPDF.value = false;
        hideLoader();
      });
  }
}

/**
 * ฟังชั่นอัปโหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย
 */
async function uploadTemplate() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      const reportName = await `${dataTemplate.value.code}_${type.value}`;
      await axios
        .post(
          config.API.reportTemplate +
            `/${typeFile.value}/upload?report_name=${reportName}&folder=command`,
          documentFile.value,
          {
            headers: {
              accept: documentFile.value?.type,
              "content-Type": "application/octet-stream",
            },
          }
        )
        .then(async (res) => {
          // update ชื่อไฟล์คำสั่ง/บัญชีแนบท้าย ในข้อมูลำสั่ง
          await updateReportName(reportName);
          success($q, "อัปโหลดไฟล์สำเร็จ");
          hideLoader();

          // โหลดไฟล์ Template ที่แสดงในหน้า UI ใหม่
          fetchDocumentTemplate(dataTemplate.value);
          fetchDataTemplate(commandId.value);
        })
        .catch(async (e) => {
          messageError($q, e);
        })
        .finally(() => {
          documentFile.value = null;
        });
    },
    "ยืนยันการอัปโหลดไฟล์ต้นแบบ",
    "คุณต้องการอัปโหลดไฟล์ต้นแบบนี้ใช่หรือไม่?"
  );
}

/**
 * ฟังก์ชั่นดาวน์โหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย
 */
async function downloadTemplate() {
  const check = await (type.value == "cover"
    ? dataTemplate.value.fileCover
    : dataTemplate.value.fileAttachment);
  await axios
    .post(
      config.API.reportTemplate + `/${typeFile.value}/download?folder=command`,
      {
        template: check,
      },
      {
        headers: {
          accept: "application/pdf",
          "content-Type": "application/json",
        },
        responseType: "blob",
      }
    )
    .then(async (res) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(res.data);
      a.download = `${dataTemplate.value.code}_${type.value}.${typeFile.value}`;
      a.click();
      hideLoader();
    })
    .catch(async (e) => {
      messageError($q, e);
      hideLoader();
    });
}

/**
 * ฟังก์ชั่นแก้ไขชื่อไฟล์คำสั่ง/บัญชีแนบท้าย
 * @param name ชื่อไฟล์
 */
async function updateReportName(name: string) {
  await http
    .put(config.API.commandType + `/${type.value}/${commandId.value}`, {
      name: name,
    })
    .then(async (res) => {
      hideLoader();
    })
    .catch(async (e) => {
      messageError($q, e);
    });
}

// working on click command list
watch(
  () => dataTemplate.value,
  async (newValue, oldValue) => {
    await fetchDocumentTemplate(newValue);
  }
);

// working on change tab
onMounted(() => {
  fetchDocumentTemplate(dataTemplate.value);
});
</script>

<template>
  <div class="row items-center q-col-gutter-sm">
    <div class="col-12 col-md-8 col-lg-6">
      <q-file
        for="inputFiles"
        outlined
        dense
        v-model="documentFile"
        :label="`ไฟล์ต้นแบบ${type == 'cover' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`"
        hide-bottom-space
        :accept="`.${type == 'cover' ? 'docx' : 'xlsx'}`"
        clearable
      >
        <template v-slot:prepend>
          <q-icon name="attach_file" color="primary" />
        </template>
        <template v-slot:after>
          <q-btn
            size="14px"
            v-if="documentFile"
            flat
            round
            dense
            color="blue"
            icon="mdi-upload"
            @click="uploadTemplate()"
            ><q-tooltip>อัปโหลดไฟล์ต้นแบบ</q-tooltip></q-btn
          >
          <q-btn
            flat
            round
            dense
            color="primary"
            icon="mdi-download"
            @click="downloadTemplate()"
          >
            <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
          </q-btn>
        </template>
      </q-file>
    </div>
    <div class="col-12">
      <q-splitter
        horizontal
        style="
          height: 70vh;
          border: 1px solid rgb(210, 210, 210);
          border-radius: 5px;
        "
        before-class="overflow-hidden disable"
        separator-class="bg-white disabled"
      >
        <template v-slot:before>
          <div class="q-px-sm">
            <div class="row items-start items-center">
              <div class="col">
                <q-btn
                  padding="xs"
                  icon="mdi-chevron-left"
                  color="grey-2"
                  text-color="grey-5"
                  size="md"
                  class="my-auto"
                  @click="backPage"
                  :disable="page == 1"
                />
              </div>
              <div class="col-12 col-md-auto">
                <div class="q-pa-md flex">
                  หน้าที่ {{ page }} จาก {{ numOfPages }}
                </div>
              </div>
              <div class="col text-right">
                <q-btn
                  padding="xs"
                  icon="mdi-chevron-right"
                  color="grey-2"
                  text-color="grey-5"
                  size="md"
                  @click="nextPage"
                  :disable="page === numOfPages"
                />
              </div>
            </div>
          </div>
        </template>
        <template v-slot:after>
          <div class="q-pa-md">
            <VuePDF
              v-if="isLoadPDF"
              ref="vuePDFRef"
              :pdf="pdfSrc"
              :page="page"
              fit-parent
            />
            <div
              v-else
              class="full-width row flex-center text-accent q-gutter-sm"
            >
              <span
                ><div
                  style="
                    height: 40vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <q-spinner color="primary" size="3em" />
                </div>
              </span>
            </div>
          </div>
        </template>
        <template v-slot:default>
          <div class="q-pa-md">
            <div class="row items-start items-center">
              <div class="col">
                <q-btn
                  padding="xs"
                  icon="mdi-chevron-left"
                  color="grey-2"
                  text-color="grey-5"
                  size="md"
                  class="my-auto"
                  @click="backPage"
                  :disable="page == 1"
                />
              </div>
              <div class="col-12 col-md-auto">
                <div class="q-pa-md flex">
                  หน้าที่ {{ page }} จาก {{ numOfPages }}
                </div>
              </div>
              <div class="col text-right">
                <q-btn
                  padding="xs"
                  icon="mdi-chevron-right"
                  color="grey-2"
                  text-color="grey-5"
                  size="md"
                  @click="nextPage"
                  :disable="page === numOfPages"
                />
              </div>
            </div>
          </div>
        </template>
      </q-splitter>
    </div>
  </div>
</template>
