hrms-mgt/src/modules/10_order/components/step/step04.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { aW } from "@fullcalendar/core/internal-common";

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

const orderId_params = route.params.orderid;
const dialog = ref<boolean>(false);
const dialogFileUpload = ref<boolean>(false);
const splitterModel = ref<number>(70);
const tab = ref<string>("main");

const order = ref<string>("");
const code = ref<string>("");
const years = ref<number>(new Date().getDate());
const date = ref<Date>(new Date());
const fileOrder = ref<any>(null);
const fileTailer = ref<any>(null);

const OrderPDFUpload = ref<string>("");
const TailerPDFUpload = ref<string>("");

const orderCoverPdf = ref<string>("");
const orderAttachmentPdf = ref<string>("");

const statusOrder = ref<string>();
const orderName = ref<string>("");
const orderStatusName = ref<string>("");

const orderId = ref<string>(orderId_params.toString());
onMounted(async () => {
  if (orderId.value) {
    showLoader()
    await fetchAttachment(orderId.value);
    await fecthstatusOrder();
    await getCommandDetail();
    hideLoader()
  }
});

const getCommandDetail = async () => {
  await http
    .get(config.API.detailOrder(orderId.value))
    .then(async (res) => {
      const data = await res.data.result;
      const orderTypeCode = await data.orderTypeCode;
      code.value = orderTypeCode ?? "";
      orderName.value = res.data.result.orderTitle;
      orderStatusName.value = data.orderStatusName;
      // console.log(orderStatusName.value);

      fetchReportCover("pdf", orderId.value);

      if (code.value != 'c-pm-10' &&
        code.value != 'c-pm-11' &&
        code.value != 'c-pm-12' &&
        code.value != 'c-pm-16' &&
        code.value != 'c-pm-18' &&
        code.value != 'c-pm-19' &&
        code.value != 'c-pm-20' &&
        code.value != 'c-pm-21') {
        fetchReportAttachment("pdf", orderId.value);
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
};

const downloadCover = async (type: string) => {
  showLoader();
  await http
    .get(config.API.fileCover(code.value, type, orderId.value), {
      responseType: "blob",
    })
    .then(async (res) => {
      downloadFile(res, `คำสั่ง ${orderName.value}.${type}`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const downloadAttachment = async (type: string) => {
  showLoader();
  await http
    .get(config.API.fileAttachment(code.value, type, orderId.value), {
      responseType: "blob",
    })
    .then(async (res) => {
      downloadFile(res, `เอกสารแนบท้าย ${orderName.value}.${type}`);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchReportCover = async (type: string, orderId: string) => {
  await http
    .get(config.API.reportOrderCover(type, orderId, code.value), {
      responseType: "blob",
    })
    .then((res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      orderCoverPdf.value = objectUrl;
      viewPDF(orderCoverPdf.value);
    })
    .catch((e) => {
      messageError($q, e);
    })
};

const fetchReportAttachment = async (type: string, orderId: string) => {
  await http
    .get(config.API.reportOrderAttachment(type, orderId, code.value), {
      responseType: "blob",
    })
    .then(async (res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      orderAttachmentPdf.value = objectUrl;
    })
    .catch((e) => {
      messageError($q, e);
    })
};

// Fetch file upload & detail
const fetchAttachment = async (orderId: string) => {
  await http
    .get(config.API.attachmentOrder(orderId))
    .then(async (res) => {
      let response = res.data.result;

      order.value = response.orderNo;
      years.value = Number(response.orderYear);
      if (response.date !== undefined) {
        date.value = response.date;
      }
      if (response.orderFileUrl !== null) {
        OrderPDFUpload.value = response.orderFileUrl;
      }
      if (response.attachmentFileUrl !== null) {
        TailerPDFUpload.value = response.attachmentFileUrl;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
};

const fecthstatusOrder = async () => {
  await http
    .get(config.API.orderReady(orderId.value))
    .then((res) => {
      let status = res.data.result;
      statusOrder.value = status.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
};

const viewPDF = async (pdf: string) => {
  const pdfData = await usePDF(`${pdf}`);
  showLoader();
  setTimeout(() => {
    pdfSrc.value = pdfData.pdf.value;
    numOfPages.value = pdfData.pages.value;
    hideLoader();
  }, 1500);
};

const viewPDFUpload = async (pdf: string) => {
  const pdfData = await usePDF(`${pdf}`);
  showLoader();
  setTimeout(() => {
    pdfFileUploadSrc.value = pdfData.pdf.value;
    numOfPages.value = pdfData.pages.value;
    hideLoader();
  }, 1500);
};

watch(tab, () => {
  // console.log(tab.value);
  if (tab.value === "main") {
    viewPDF(orderCoverPdf.value);
  }
  if (tab.value === "second") {
    viewPDF(orderAttachmentPdf.value);
  }
});

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

const myForm = ref<QForm | null>(null);
const myFormUpload = ref<QForm | null>(null);

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});

// const next = () => props.next();
const previous = () => props.previous();

const onchangePage = (val: any) => {
  //   console.log(val);
  if (vuePDFRef !== null) {
    vuePDFRef.value.reload();
  }
};

const downloadFile = (response: any, filename: string) => {
  const link = document.createElement("a");
  var fileName = filename;
  link.href = window.URL.createObjectURL(new Blob([response.data]));
  link.setAttribute("download", fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const saveUpload = () => {
  if (myFormUpload.value !== null) {
    myFormUpload.value!.validate().then((success: Boolean) => {
      if (success) {
        dialogConfirm($q, async () => {
          showLoader()
          await postfileOrder();
          await postfileTailer();
          await fetchAttachment(orderId.value);
          await fecthstatusOrder();
          hideLoader()
        });
      }
    });
  }
};

const saveDetail = () => {
  if (myForm.value !== null) {
    myForm.value!.validate().then((success: Boolean) => {
      if (success) {
        dialogConfirm($q, async () => {
          showLoader();
          await putOrderData();
          await fetchReportCover("pdf", orderId.value);
          await fecthstatusOrder();
          hideLoader();
        });
      }
    });
  }
};

const putOrderData = async () => {
  const orderData = {
    orderNo: order.value,
    orderYear: years.value.toString(),
    signDate: date.value,
  };
  await http
    .put(config.API.attachmentOrder(orderId.value), orderData)
    .then((res) => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    });
};

const postfileOrder = async () => {
  const formData = new FormData();
  formData.append("File", fileOrder.value);
  await http
    .post(config.API.attachmentOrderId(orderId.value), formData)
    .catch((e) => {
      messageError($q, e)
    })
};

const postfileTailer = async () => {
  const formData = new FormData();
  formData.append("File", fileTailer.value);
  await http
    .post(config.API.attachmentFileId(orderId.value), formData)
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e)
    })
};

const clickExecute = async (id: string) => {
  dialogConfirm(
    $q,
    async () => {
      showLoader()
      await http
        .put(config.API.executeOrder(id))
        .then((res) => {
          success($q, "ออกคำสั่งสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        }).finally(async () => {
          await fecthstatusOrder()
          await getCommandDetail()
          hideLoader();
        })
    },
    "ยืนยันการออกคำสั่ง",
    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?"
  );
};

const validateFormUpload = () => {
  return (
    fileOrder.value !== null &&
    fileTailer.value !== null
  );
};

const validateForm = () => {
  return (
    order.value.trim() !== "" &&
    years.value !== null &&
    date.value !== null
  );
};

const 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,
  };
};
const setTab = (val: string) => {
  tab.value = val;
  page.value = 1;
};

const viewFileUpload = async (url: string) => {
  pdfFileUploadSrc.value = undefined;
  await viewPDFUpload(url);

  dialogFileUpload.value = true;
};
</script>

<template>
  <div>
    <div style="min-height: 70vh">
      <q-splitter v-model="splitterModel" style="height: 70vh" @update:model-value="onchangePage">
        <template v-slot:before>
          <div class="space">
            <div @click="setTab('main')" :class="getClass(tab == 'main')">
              <div class="q-pr-sm">คำสั่ง</div>
              <q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense icon="mdi-download"
                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
                <q-tooltip>ดาวน์โหลด</q-tooltip>
                <q-menu>
                  <q-list style="min-width: 150px">
                    <q-item clickable v-close-popup @click="downloadCover('pdf')">
                      <!-- type="a"
                      :href="orderCoverPdf"
                      target="_blank" -->
                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                      <q-item-section>ไฟล์ .PDF</q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="downloadCover('docx')">
                      <!-- type="a"
                      :href="orderCoverDocs"
                      target="_blank" -->
                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                      <q-item-section>ไฟล์ .docx</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
            <div v-if="code != 'c-pm-10' &&
              code != 'c-pm-11' &&
              code != 'c-pm-12' &&
              code != 'c-pm-16' &&
              code != 'c-pm-18' &&
              code != 'c-pm-19' &&
              code != 'c-pm-20' &&
              code != 'c-pm-21'
              " @click="setTab('second')" :class="getClass(tab == 'second')">
              <div class="q-pr-sm">เอกสารแนบท้าย</div>
              <q-btn v-if="orderStatusName != 'ออกคำสั่งแล้ว'" size="12px" flat dense
                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
                <q-tooltip>ดาวน์โหลด</q-tooltip>
                <q-menu>
                  <q-list style="min-width: 150px">
                    <q-item clickable v-close-popup @click="downloadAttachment('pdf')">
                      <!-- type="a"
                      :href="orderAttachmentPdf"
                      target="_blank" -->
                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                      <q-item-section>ไฟล์ .PDF</q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="downloadAttachment('xlsx')">
                      <!-- type="a"
                      :href="orderAttachmentXlsx"
                      target="_blank" -->
                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                      <q-item-section>ไฟล์ .xls</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </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" />
          <q-card 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">
                หน้าที่ {{ 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 />
              <!-- <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">
                หน้าที่ {{ 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>
        </template>

        <template v-slot:separator>
          <q-avatar color="primary" text-color="white" size="30px" icon="drag_indicator" />
        </template>

        <template v-slot:after>
          <div class="q-pa-md q-gutter-y-md">
            <q-form ref="myFormUpload">
              <fieldset class="border q-px-lg q-py-sm">
                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
                <div class="q-gutter-y-md q-mb-md">
                  <div>
                    <label class="text-file">คำสั่ง</label>
                    <div v-if="OrderPDFUpload != ''" class="text-right">
                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
                        @click="viewFileUpload(OrderPDFUpload)">
                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                      </q-btn>
                      <q-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
                        target="_blank">
                        <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                      </q-btn>
                    </div>
                    <q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileOrder"
                      label="เลือกไฟล์คำสั่ง" hide-bottom-space lazy-rules
                      :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']" accept=".pdf">
                      <template v-slot:prepend>
                        <q-icon name="attach_file" />
                      </template>
                    </q-file>
                  </div>
                  <div v-if="code != 'c-pm-10' &&
                    code != 'c-pm-11' &&
                    code != 'c-pm-12' &&
                    code != 'c-pm-16' &&
                    code != 'c-pm-18' &&
                    code != 'c-pm-19' &&
                    code != 'c-pm-20' &&
                    code != 'c-pm-21'
                    ">
                    <label class="text-file">เอกสารแนบท้าย</label>
                    <div v-if="TailerPDFUpload != ''" class="text-right">
                      <q-btn size="12px" flat dense color="primary" icon="mdi-eye"
                        @click="viewFileUpload(TailerPDFUpload)">
                        <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
                      </q-btn>
                      <q-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
                        target="_blank">
                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                      </q-btn>
                    </div>

                    <q-file v-if="orderStatusName != 'ออกคำสั่งแล้ว'" outlined dense v-model="fileTailer"
                      label="เลือกไฟล์เอกสารแนบท้าย" hide-bottom-space lazy-rules
                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']" accept=".pdf">
                      <template v-slot:prepend>
                        <q-icon name="attach_file" />
                      </template>
                    </q-file>

                    <!-- บันทึกอัพโหลดเอกสาร  -->
                    <div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
                      <q-space></q-space>
                      <q-btn unelevated label="บันทึก"
                        :color="validateFormUpload() && orderStatusName != 'ออกคำสั่งแล้ว' ? 'public' : 'grey'"
                        :disable="!validateFormUpload() || orderStatusName == 'ออกคำสั่งแล้ว'" @click="saveUpload">
                      </q-btn>
                    </div>

                  </div>
                </div>
              </fieldset>
            </q-form>

            <q-form ref="myForm">
              <fieldset class="border q-px-lg q-py-sm">
                <legend class="text-header q-px-sm">รายละเอียด</legend>
                <div class="q-gutter-y-md q-mb-md">
                  <div>
                    <label class="text-file">เลขที่คำสั่ง</label>
                    <q-input :outlined="true" dense lazy-rules :readonly="!true" :borderless="!true" v-model="order"
                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" hide-bottom-space
                      :label="`${'เลขที่คำสั่ง'}`" :disable="orderStatusName == 'ออกคำสั่งแล้ว'" />
                  </div>
                  <div>
                    <label class="text-file">ปีที่ออกคำสั่ง</label>
                    <datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="years"
                      :locale="'th'" autoApply year-picker :enableTimePicker="false" week-start="0">
                      <template #year="{ year }">{{ year + 543 }}</template>
                      <template #year-overlay-value="{ value }">{{
                        parseInt(value + 543)
                      }}</template>
                      <template #trigger>
                        <q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense lazy-rules
                          :model-value="years + 543" :rules="[
                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
                          ]" hide-bottom-space :label="`${'ปีที่ออกคำสั่ง'}`">
                          <template v-slot:prepend>
                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>
                  <div>
                    <label class="text-file">วันที่ลงนาม</label>
                    <datepicker :disabled="orderStatusName == 'ออกคำสั่งแล้ว'" menu-class-name="modalfix" v-model="date"
                      :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
                      <template #year="{ year }">
                        {{ year + 543 }}
                      </template>
                      <template #year-overlay-value="{ value }">
                        {{ parseInt(value + 543) }}
                      </template>
                      <template #trigger>
                        <q-input :disable="orderStatusName == 'ออกคำสั่งแล้ว'" outlined dense
                          class="full-width datepicker" hide-bottom-space
                          :model-value="date != null ? date2Thai(date) : null" :label="`${'วันที่ลงนาม'}`" :rules="[
                            (val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
                          ]">
                          <template v-slot:prepend>
                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-grey)">
                            </q-icon>
                          </template>
                        </q-input>
                      </template>
                    </datepicker>
                  </div>

                  <!-- บันทึกรายละเอียดคำสั่ง  -->
                  <div v-if="orderStatusName != 'ออกคำสั่งแล้ว'" class="row col-12 q-mt-md">
                    <q-space></q-space>
                    <q-btn unelevated label="บันทึก"
                      :color="validateForm() && orderStatusName != 'ออกคำสั่งแล้ว' ? 'public' : 'grey'"
                      :disable="!validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'" @click="saveDetail">
                    </q-btn>
                  </div>

                </div>
              </fieldset>
            </q-form>

          </div>
        </template>
      </q-splitter>
    </div>
    <q-separator />
    <div class="flex justify-end q-pa-sm q-gutter-sm">
      <q-btn v-if="orderStatusName !== 'ออกคำสั่งแล้ว'" dense outline color="primary" icon="chevron_left"
        @click="previous" class="q-pr-md" label="เลือกรายชื่อส่งสำเนา">
      </q-btn>

      <!-- ออกคำสั่ง -->
      <q-btn :disable="statusOrder == 'N' || orderStatusName === 'ออกคำสั่งแล้ว'" unelevated label="ออกคำสั่ง"
        :color="statusOrder == 'Y' && orderStatusName !== 'ออกคำสั่งแล้ว' ? 'public' : 'grey'">
        <q-menu>
          <q-list style="min-width: 150px">
            <q-item clickable v-close-popup @click="clickExecute(orderId)">
              <q-item-section>ออกคำสั่งทันที</q-item-section>
            </q-item>
            <q-item clickable v-close-popup disabled>
              <q-item-section>ส่งไปลงนาม</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>

    </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-dialog v-model="dialogFileUpload" 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="pdfFileUploadSrc" :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>
  </div>
</template>

<style lang="scss" scoped>
.border {
  border-radius: 10px;
  border: 1px solid #e9eaec;
}

.text-header {
  color: #34373c;
  font-size: 1rem;
  font-weight: 300;
}

.text-file {
  padding-top: 5px;
  color: #34373c;
  font-weight: 500;
}

.space {
  background-color: #e9eaec61;
  display: flex;
  z-index: 3;
}

.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-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-pdf {
  border-radius: 10px;
  border: 1px solid #e9eaec;
  background-color: #e9eaec61;
  //   height: 60vh;
}
</style>