hrms-user/src/modules/06_evaluate/components/step/step2.vue

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import { useQuasar } from "quasar";
import axios from "axios";

import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";

import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateStore } from "@/modules/06_evaluate/store";

const $q = useQuasar();
const store = useEvaluateStore();

const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;

const fullName = ref<string>(
  keycloak.tokenParsed ? keycloak.tokenParsed.name!.toString() : ""
);

const props = defineProps({
  evaluateId: {
    type: String,
  },
});

const emit = defineEmits(["update:form"]);

const formCommand = reactive<FormCommand>({
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
});

const commanderFullnameRef = ref<object | null>(null);
const commanderPositionRef = ref<object | null>(null);
const commanderAboveFullnameRef = ref<object | null>(null);
const commanderAbovePositionRef = ref<object | null>(null);
const fileEvaluation1Ref = ref<object | null>(null);
const fileEvaluation2Ref = ref<object | null>(null);
const fileEvaluation3Ref = ref<object | null>(null);
const fileEvaluation4Ref = ref<object | null>(null);
const fileEvaluation5Ref = ref<object | null>(null);
const fileEvaluation6Ref = ref<object | null>(null);

const updateInput = (value: any) => {
  const ref = {
    commanderFullnameRef: commanderFullnameRef.value,
    commanderPositionRef: commanderPositionRef.value,
    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
    commanderAbovePositionRef: commanderAbovePositionRef.value,
    fileEvaluation1Ref: fileEvaluation1Ref.value,
    fileEvaluation2Ref: fileEvaluation2Ref.value,
    fileEvaluation3Ref: fileEvaluation3Ref.value,
    fileEvaluation4Ref: fileEvaluation4Ref.value,
    fileEvaluation5Ref: fileEvaluation5Ref.value,
    fileEvaluation6Ref: fileEvaluation6Ref.value,
  };
  emit("update:form", value, ref);
};

const fileEvaluation1 = ref<any>();
const fileEvaluation2 = ref<any>();
const fileEvaluation3 = ref<any>();
const fileEvaluation4 = ref<any>();
const fileEvaluation5 = ref<any>();
const fileEvaluation6 = ref<any>();

const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();

function onClickViewPDF(file: any) {
  // pdfSrc.value = file.webkitRelativePath;
  modalView.value = true;
}

/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  const data = Object.assign(
    { fullName: fullName.value },
    tp === "EV1_005" || tp === "EV1_007" ? { organizationName: "-" } : null,
    tp === "EV1_007" ? { positionName: "-" } : null,
    tp === "EV1_007" ? { positionLeaveName: "-" } : null
  );
  const body = {
    template: tp,
    reportName: templateName,
    data: data,
  };
  console.log(body);
  await genReport(body, fileName);
}

async function fetchPathUpload(
  volume: string,
  id: string | undefined,
  type: string,
  file: any
) {
  const body = {
    fileList: type,
    replace: true,
    // "1-แบบพิจารณาคุณสมบัติบุคคล",
    // "2-แบบแสดงรายละเอียดการเสนอผลงาน",
    // "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
    // "4-แบบประเมินคุณลักษณะบุคคล",
    // "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
    // "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
  };
  if (id && file) {
    showLoader();
    await http
      .post(config.API.loadPathDocument(volume, id), body)
      .then((res) => {
        const foundKey: string | undefined = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

async function uploadfile(uploadUrl: string, file: any) {
  console.log(uploadUrl);
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

onMounted(async () => {
  const ref = {
    commanderFullnameRef: commanderFullnameRef.value,
    commanderPositionRef: commanderPositionRef.value,
    commanderAboveFullnameRef: commanderAboveFullnameRef.value,
    commanderAbovePositionRef: commanderAbovePositionRef.value,
    fileEvaluation1Ref: fileEvaluation1Ref.value,
    fileEvaluation2Ref: fileEvaluation2Ref.value,
    fileEvaluation3Ref: fileEvaluation3Ref.value,
    fileEvaluation4Ref: fileEvaluation4Ref.value,
    fileEvaluation5Ref: fileEvaluation5Ref.value,
    fileEvaluation6Ref: fileEvaluation6Ref.value,
  };
  emit("update:form", formCommand, ref);
});
</script>

<template>
  <div class="row q-col-gutter-md">
    <!-- แบบพิจารณาคุณสมบัติบุคคล -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          แบบพิจารณาคุณสมบัติบุคคล
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_005',
                      'template-1',
                      'แบบพิจารณาคุณสมบัติบุคคล'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation1"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                  @click="onClickViewPDF(fileEvaluation1)"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation1Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation1"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '1-แบบพิจารณาคุณสมบัติบุคคล',
                      fileEvaluation1
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          แบบแสดงรายละเอียดการเสนอผลงาน
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_006',
                      'template-2',
                      'แบบแสดงรายละเอียดการเสนอผลงาน'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation2"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation2Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation2"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '2-แบบแสดงรายละเอียดการเสนอผลงาน',
                      fileEvaluation2
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.) -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
          (เอกสารแบบ ก.)
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_007',
                      'template-3',
                      'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation3"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation3Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation3"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)',
                      fileEvaluation3
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบประเมินคุณลักษณะบุคคล -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          แบบประเมินคุณลักษณะบุคคล
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_008',
                      'template-4',
                      'แบบประเมินคุณลักษณะบุคคล'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation4"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation4Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation4"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '4-แบบประเมินคุณลักษณะบุคคล',
                      fileEvaluation4
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_009',
                      'template-5',
                      'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
                    )
                  "
                  ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation5"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation5Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation5"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
                      fileEvaluation5
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
    <div class="col-6" v-if="store.currentStep === 2">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  class="col-12"
                  outline
                  icon="download"
                  label="ดาวน์โหลดต้นแบบ"
                  color="primary"
                  @click="
                    onClickDowloadFile(
                      'EV1_010',
                      'template-6',
                      'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
                    )
                  "
                >
                  <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-6 row">
                <q-btn
                  v-if="fileEvaluation6"
                  class="col-12"
                  outline
                  icon="visibility"
                  label="ดูไฟล์เอกสาร"
                  color="primary"
                >
                  <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                >
              </div>
              <div class="col-xs-12 col-sm-10 row">
                <q-file
                  ref="fileEvaluation6Ref"
                  :rules="[(val) => !!val || 'เลือกไฟล']"
                  v-model="fileEvaluation6"
                  class="col-12"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  accept=".pdf"
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                </q-file>
              </div>
              <div class="col-2 self-center text-center q-pl-none">
                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="mdi-upload"
                  @click="
                    fetchPathUpload(
                      'เล่ม 1',
                      props.evaluateId,
                      '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
                      fileEvaluation6
                    )
                  "
                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                >
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- เลือกผู้เซ็นเอกสาร -->
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกผู้เซ็นเอกสาร
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="row">
          <div class="col-12 q-pa-sm">
            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-py-sm">
                  ผู้บังคับบัญชาชั้นต้น
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    ref="commanderFullnameRef"
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    label="ชื่อ-นามสกุล"
                    v-model="formCommand.commanderFullname"
                    @update:model-value="updateInput(formCommand)"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                    lazy-rules
                  />
                  <q-input
                    ref="commanderPositionRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="formCommand.commanderPosition"
                    @update:model-value="updateInput(formCommand)"
                    label="ตำแหน่ง"
                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                    lazy-rules
                  />
                </div>
              </div>
            </div>

            <div class="row q-col-gutter-md col-12">
              <div class="col-xs-12 col-sm-12 row">
                <div class="text-weight-medium q-py-sm">
                  ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
                </div>
                <div class="row col-12 q-col-gutter-md q-pa-sm">
                  <q-input
                    ref="commanderAboveFullnameRef"
                    dense
                    class="col-xs-12 col-sm-6"
                    outlined
                    v-model="formCommand.commanderAboveFullname"
                    label="ชื่อ-นามสกุล"
                    :rules="[(val) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                    lazy-rules
                    @update:model-value="updateInput(formCommand)"
                  />
                  <q-input
                    ref="commanderAbovePositionRef"
                    class="col-xs-12 col-sm-6"
                    dense
                    outlined
                    v-model="formCommand.commanderAbovePosition"
                    label="ตำแหน่ง"
                    :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                    lazy-rules
                    @update:model-value="updateInput(formCommand)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>

  <!-- Dialog Full Screen -->
  <q-dialog
    v-model="modalView"
    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 scoped></style>