From 04476043a4163efafea36079abc5d47c39b9727c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 11 Feb 2026 13:06:54 +0700
Subject: [PATCH] refactor(command):perview cover attachment

---
 .../18_command/components/Step/4_Attached.vue | 220 +++++++++++++-----
 1 file changed, 156 insertions(+), 64 deletions(-)

diff --git a/src/modules/18_command/components/Step/4_Attached.vue b/src/modules/18_command/components/Step/4_Attached.vue
index 2236b6fea..8b8b210aa 100644
--- a/src/modules/18_command/components/Step/4_Attached.vue
+++ b/src/modules/18_command/components/Step/4_Attached.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
 import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
@@ -15,6 +15,8 @@ import type { DataFileOrder } from "@/modules/18_command/interface/response/Main
 
 import { useCounterMixin } from "@/stores/mixin";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -140,6 +142,21 @@ watch(tab, () => {
   }
 });
 
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value -= 1;
+  }
+}
+
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value += 1;
+  }
+}
+
 /** hook */
 onMounted(async () => {
   showLoader();
@@ -262,76 +279,127 @@ onMounted(async () => {
     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-card class="column full-height bg-grey-2">
+      <DialogHeader
+        :tittle="tab === 'main' ? 'คำสั่ง' : 'เอกสารแนบท้าย'"
+        :close="() => (dialog = false)"
+        class="bg-white"
+      />
+      <q-separator />
+      <div
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
         <q-btn
-          icon="close"
-          unelevated
+          flat
           round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
+          icon="mdi-chevron-left"
+          :disable="!canGoPrevious"
+          @click="goToPreviousPage"
+          color="primary"
+        />
+
+        <q-chip
+          outline
+          color="primary"
+          label-color="grey-9"
+          class="q-px-lg text-weight-bold"
+        >
+          หน้า {{ page }} / {{ numOfPages || "-" }}
+        </q-chip>
+
+        <q-btn
+          flat
+          round
+          icon="mdi-chevron-right"
+          :disable="!canGoNext"
+          @click="goToNextPage"
+          color="primary"
         />
       </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>
+      <q-card-section class="col scroll q-pa-md flex flex-center">
+        <div class="pdf-viewer-wrapper shadow-5">
+          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
         </div>
       </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn-dropdown color="primary" icon="download" fab>
+          <q-list>
+            <q-item clickable v-close-popup @click="downloadCover('pdf')">
+              <q-item-section avatar>
+                <q-icon name="mdi-file-pdf" color="red" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>ดาวน์โหลดไฟล์ PDF</q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              v-if="tab === 'main'"
+              clickable
+              v-close-popup
+              @click="downloadCover('docx')"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-file-word" color="blue" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>ดาวน์โหลดไฟล์ Word</q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-item
+              v-else
+              clickable
+              v-close-popup
+              @click="downloadCover('xlsx')"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-file-excel" color="green" />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>ดาวน์โหลดไฟล์ xlsx</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+        <!-- <q-btn fab size="xl" icon="mdi-download" color="primary">
+          <q-menu>
+            <q-list dense style="min-width: 180px">
+              <q-item clickable v-close-popup>
+                <q-item-section style="min-width: 0px" avatar>
+                  <q-tooltip>ประวัติการแก้ไข</q-tooltip>
+                  <q-icon
+                    color="deep-purple"
+                    flat
+                    dense
+                    round
+                    name="mdi-history"
+                    size="xs"
+                  />
+                </q-item-section>
+                <q-item-section>ประวัติการแก้ไข</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup>
+                <q-item-section style="min-width: 0px" avatar>
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                  <q-icon
+                    flat
+                    dense
+                    round
+                    color="info"
+                    name="mdi-eye"
+                    size="xs"
+                  />
+                </q-item-section>
+                <q-item-section>รายละเอียด</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn> -->
+      </q-page-sticky>
     </q-card>
   </q-dialog>
 </template>
@@ -376,4 +444,28 @@ onMounted(async () => {
   border: 1px solid #e9eaec;
   background-color: #e9eaec61;
 }
+
+/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
+.pdf-viewer-wrapper {
+  background-color: white;
+  width: 100%;
+  max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
+  transition: all 0.3s ease;
+}
+
+/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
+.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.scroll::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+.scroll::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+
+:deep(.q-btn-dropdown__arrow) {
+  display: none !important;
+}
 </style>