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

const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const dialog = ref<boolean>(false);
onMounted(async () => {
  const pdfData = usePDF(
    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
  );

  setTimeout(() => {
    pdfSrc.value = pdfData.pdf.value;
    numOfPages.value = pdfData.pages.value;
  }, 1000);
  console.log(pdfData);
});

const splitterModel = ref(14);
const selectReport = ref<any>({ id: 1, name: "รายงานขร.1" });
const optionsReport = ref<any>([
  { id: 1, name: "รายงานขร.1" },
  { id: 2, name: "รายงานขร.2" },
  { id: 3, name: "รายงานขร.3" },
  { id: 4, name: "รายงานขร.4" },
]);
const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
const optionsList = ref<any>([
  { id: 1, name: "list 1" },
  { id: 2, name: "list 2" },
]);
const nextPage = () => {
  if (page.value < numOfPages.value) {
    page.value++;
  }
};
const backPage = () => {
  if (page.value !== 1) {
    page.value--;
  }
};

const backHistory = () => {
  window.history.back();
};
</script>

<template>
  <div class="toptitle">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="backHistory"
    />
    บัญชีเเสดงจำนวนชั้นตราเหรียญจักรพรรดิมาลา ซึ่งขอพระราชทานให้เเก่ข้าราชการ
  </div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-md q-gutter-y-md">
        <q-toolbar style="padding: 0">
          <q-select
            dense
            outlined
            v-model="selectList"
            :options="optionsList"
            :label="optionsList.name"
            option-value="id"
            option-label="name"
          />
          <q-space />
          <div class="q-pa-ms q-gutter-sm" style="padding: 0">
            <q-btn
              outline
              color="primary"
              icon="mdi-arrow-down-bold-circle-outline"
              label="ดาวน์โหลด"
            />
            <q-btn icon="mdi-eye-outline" color="primary" label="แสดงรายงาน" />
            <!-- <q-btn
              color="primary"
              icon="mdi-fullscreen"
              @click="dialog = true"
            /> -->
          </div>
        </q-toolbar>
        <q-splitter
          v-model="splitterModel"
          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-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>
          <template v-slot:after>
            <div class="q-pa-md">
              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
            </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>
    </q-card>
  </div>

  <!-- Dialog Full Screen -->
  <q-dialog
    v-model="dialog"
    persistent
    :maximized="true"
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <q-card class="bg-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>
      <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 class="row items- items-center">
          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
        </div>
        <div class="row items- items-end">
          <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>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scope>
.disabled {
  pointer-events: none;
}
</style>
