<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";

import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
import { usePagination } from "@/composables/usePagination";
import { getColumnLabel } from "@/utils/function";
import http from "@/plugins/http";
import config from "@/app.config";

import type { QTableProps } from "quasar";
import type {
  DataFileDownload,
  DataDirector,
  DataAuthority,
} from "@/modules/18_command/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";
import PerviewPDF from "@/modules/18_command/components/Step/PerviewPDF.vue";

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useCommandDetail();
const {
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  dialogMessageNotify,
} = useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetchListDirector);

const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง

const { fetchData } = defineProps({
  fetchData: { type: Function, require: true },
});
const step = defineModel<number>("step", { required: true }); //ขั้นตอนการลงนาม

//แบบร่าง
const isCheckDraft = defineModel<boolean>("isDraft", { required: true });

// แบบร่าง
const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
const isDirector = ref<boolean>(true); //ผู้บังคับบัญชา
const isAct = ref<boolean>(false); //รักษาการแทน
const dataFile = ref<DataFileDownload>(); //ข้อมูลไฟล์คำสั่งที่ดาวน์โหลดมา

const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const search = ref<string>("");
const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
const columns = ref<QTableProps["columns"]>([
  // {
  //   name: "citizenId",
  //   align: "left",
  //   label: "เลขประจำตัวประชาชน",
  //   sortable: true,
  //   field: "citizenId",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  {
    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    format(val, row) {
      return `${row.prefix}${row.firstName} ${row.lastName}`;
    },
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posNo",
    align: "left",
    label: "เลขที่ตำแหน่ง",
    sortable: true,
    field: "posNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  // {
  //   name: "position",
  //   align: "left",
  //   label: "ตำแหน่ง",
  //   sortable: true,
  //   field: "position",
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  // {
  //   name: "posType",
  //   align: "left",
  //   label: "ประเภทตำแหน่ง",
  //   sortable: true,
  //   field: "posType",
  //   format(val, row) {
  //     return `${row.posType} ${row.posLevel ? `(${row.posLevel})` : ""}   `;
  //   },
  //   headerStyle: "font-size: 14px",
  //   style: "font-size: 14px",
  // },
  {
    name: "positionSign",
    align: "left",
    label: "ตำแหน่งใต้ลายเซ็น",
    sortable: true,
    field: "positionSign",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

//รอผู้มีอำนาจลงนามอนุมัติ
const commandSignId = ref<string>("");
const isSignatory = ref<boolean>(false);
const rowsAuthority = ref<DataAuthority[]>([]); //รายชื่อผู้อำนาจลงนามอนุมัติ
const modalComment = ref<boolean>(false); //popup แสดงความเห็น
const reason = ref<string>("");

//รอออกคำสั่ง
const isLoad = ref<boolean>(false); //แสดงโหลด
const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
const modalPerView = ref<boolean>(false);

/** ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ*/
function onConfirmDraft() {
  if (
    store?.dataCommand?.commandNo !== "" &&
    store?.dataCommand?.commandExcecuteDate !== null
  ) {
    modalSelect.value = true;
    fetchListDirector();
  } else {
    dialogMessageNotify(
      $q,
      "ไม่สามารถดำเนินการต่อได้ กรุณากรอกเลขที่คำสั่ง และวันที่คำสั่งมีผลให้ครบ"
    );
  }
}

/** ฟังก์ชันดึงข้อมูลผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง */
async function fetchListDirector() {
  showLoader();
  await http
    .post(config.API.commandDirector, {
      isDirector: isDirector.value, // fix ค่านี้เป็น true
      isAct: isAct.value,
      keyword: search.value,
      ...params.value,
    })
    .then((res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังก์ชันค้นหาข้อมูล */
function onSearchData() {
  pagination.value.page = 1;
  fetchListDirector();
}

/** ฟังก์ชันยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ */
function onConfirmSendToCommander() {
  dialogConfirm(
    $q,
    async () => {
      showLoader();
      await http
        .put(config.API.command + `/step-add/${commandId.value}`, {
          profileId: selected.value[0].id,
          isSignatory: isPersonSign.value, // เป็นผู้มีอำนาจลงนามไหม
        })
        .then(async () => {
          await Promise.all([fetchData?.(), fetchListAuthority()]);
          onCloseDialog();
          isCheckDraft.value = true;
        })
        .catch((err) => {
          messageError($q, err);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ",
    "คุณต้องการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจใช่หรือไม่?"
  );
}

/** ฟังก์ชันแสดง popup แสดงความเห็น */
function onComment(id: string, isStatus: boolean) {
  modalComment.value = true;
  commandSignId.value = id;
  isSignatory.value = isStatus;
}

/** ฟังก์ชันบันทึกความคิดเห็น */
function onSubmitComment() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(config.API.command + `/step-comment/${commandSignId.value}`, {
        comment: reason.value,
      })
      .then(async () => {
        if (isSignatory.value) {
          onCloseDialog();
          await router.push(`/command/view/${commandId.value}`);
        } else {
          await Promise.all([fetchData?.(), fetchListAuthority()]);
        }
        onCloseDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/** ฟังก์ชันปิด dialog และ reset ค่า */
function onCloseDialog() {
  isAct.value = false;
  isDirector.value = true;
  modalSelect.value = false;
  modalComment.value = false;
  isPersonSign.value = false;
  rows.value = [];
  selected.value = [];
  search.value = "";
  pagination.value = {
    page: 1,
    rowsPerPage: 10,
    rowsNumber: 0,
    sortBy: "",
    descending: false,
  };

  reason.value = "";
}

/**
 *  ฟังก์ชันดึงข้อมูลเอกสารคำสั่ง
 * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
 */
async function fetchDoc(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
  await http
    .get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
    .then((res) => {
      const data = res.data[0];
      if (group === "order") {
        fileOrder.value = data;
      } else {
        fileTailer.value = data;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
 * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
 */
function onUploadFile(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
  let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
  const fileName = { fileName: type };
  http
    .post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
      replace: true,
      fileList: fileName,
    })
    .then(async (res) => {
      const foundKey: string | undefined = Object.keys(res.data).find(
        (key) =>
          res.data[key]?.fileName !== undefined &&
          res.data[key]?.fileName !== ""
      );
      foundKey &&
        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
 * @param uploadUrl ลิงค์อัพโหลดไฟล์
 * @param file ไฟล์ที่อัพโหลด
 * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
 */
async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
  const formData = new FormData();
  formData.append("file", file);
  showLoader();
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(async () => {
      await fetchDoc(group);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      if (group === "order") {
        fileUploadOrder.value = null;
      } else {
        fileUploadTailer.value = null;
      }
      hideLoader();
    });
}

/**
 * ฟังก์ชันดาวน์โหลดไฟล์
 * @param file ข้อมูลไฟล์
 * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
 * @param isView ดูไฟล์ในหน้าใหม่ไหม (default=false)
 */
function downloadFile(file: any, group: string, isView: boolean = false) {
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
  showLoader();
  http
    .get(
      config.API.fileByFile(
        "ระบบออกคำสั่ง",
        type,
        commandId.value,
        file.fileName
      )
    )
    .then((res) => {
      const data = res.data;
      dataFile.value = data;
      if (isView) {
        modalPerView.value = true;
      } else {
        window.open(data.downloadUrl, "_blank");
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      hideLoader();
    });
}

/** ฟังก์ชันดึงข้อมูลรายการผู้มีอำนาจ */
async function fetchListAuthority() {
  await http
    .get(config.API.command + `/step/${commandId.value}`)
    .then(async (res) => {
      const data = res.data.result;
      rowsAuthority.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** ฟังก์ชันแสดงเฉพาะรักษาการแทน */
function onAct() {
  isDirector.value = !isDirector.value;
}

onMounted(async () => {
  isLoad.value = false;
  let promises = [fetchDoc("order")];
  if (isAttachment.value) {
    promises.push(fetchDoc("tailer"));
  }
  if (step.value > 1) {
    promises.push(fetchListAuthority());
  }

  await Promise.all(promises).finally(() => {
    isLoad.value = true;
  });
});
</script>

<template>
  <div class="q-px-lg q-py-md" v-if="isLoad">
    <q-timeline :color="store.status === 'CANCEL' ? 'grey-4' : 'blue-5'">
      <!-- แบบร่าง -->
      <q-timeline-entry
        title="แบบร่าง"
        :icon="step === 1 ? 'mdi-pencil' : step > 1 ? 'done' : 'mdi-numeric-1'"
      >
        <div class="row q-col-gutter-sm">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12 text-header">
              อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
            </div>
            <div class="col-6">
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
                  คำสั่ง
                  <q-space />
                  <q-btn
                    v-if="fileOrder"
                    rounded
                    flat
                    dense
                    color="primary"
                    icon="mdi-eye"
                    @click.prevent="downloadFile(fileOrder, 'order', true)"
                  >
                    <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-if="fileOrder"
                    rounded
                    flat
                    dense
                    color="red"
                    icon="mdi-download"
                    @click.prevent="downloadFile(fileOrder, 'order')"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="col-12 q-pa-md" v-if="step === 1">
                  <q-file
                    outlined
                    dense
                    v-model="fileUploadOrder"
                    label="เลือกไฟล์คำสั่ง"
                    hide-bottom-space
                    accept=".pdf"
                    :readonly="store.readonly"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>

                    <template v-slot:after>
                      <q-btn
                        @click.prevent="onUploadFile('order')"
                        flat
                        round
                        icon="mdi-upload"
                        :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
                        :disable="fileUploadOrder == null"
                      />
                    </template>
                  </q-file>
                </div>
              </q-card>
            </div>

            <div
              class="col-6"
              v-if="
                isAttachment ||
                (store.dataCommand &&
                  store.dataCommand.commandCode == 'C-PM-38')
              "
            >
              <q-card
                bordered
                class="row col-12"
                style="border: 1px solid #d6dee1"
              >
                <div
                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
                  เอกสารแนบท้าย
                  <q-space />
                  <q-btn
                    v-if="fileTailer"
                    rounded
                    flat
                    dense
                    color="primary"
                    icon="mdi-eye"
                    @click.prevent="downloadFile(fileTailer, 'tailer', true)"
                  >
                    <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-if="fileTailer"
                    rounded
                    flat
                    dense
                    color="red"
                    icon="mdi-download"
                    @click.prevent="downloadFile(fileTailer, 'tailer')"
                  >
                    <q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
                  </q-btn>
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="col-12 q-pa-md" v-if="step === 1">
                  <q-file
                    outlined
                    dense
                    v-model="fileUploadTailer"
                    label="เลือกไฟล์เอกสารแนบท้าย"
                    hide-bottom-space
                    accept=".pdf"
                    :readonly="store.readonly"
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" />
                    </template>

                    <template v-slot:after>
                      <q-btn
                        @click.prevent="onUploadFile('tailer')"
                        flat
                        round
                        icon="mdi-upload"
                        :color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
                        :disable="fileUploadTailer == null"
                      />
                      <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
                    </template>
                  </q-file>
                </div>
              </q-card>
            </div>
          </div>

          <div
            class="col-12"
            v-if="!isCheckDraft && fileOrder && (!isAttachment || fileTailer)"
          >
            <q-btn
              v-if="!store.readonly"
              @click.prevent="onConfirmDraft"
              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
              :color="
                fileOrder === null || (isAttachment && fileTailer === null)
                  ? 'grey-5'
                  : 'public'
              "
              :disable="
                fileOrder === null || (isAttachment && fileTailer === null)
              "
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอผู้มีอำนาจลงนามอนุมัติ -->
      <q-timeline-entry
        title="รอผู้มีอำนาจลงนามอนุมัติ"
        :icon="step === 2 ? 'mdi-pencil' : step > 2 ? 'done' : 'mdi-numeric-2'"
        :color="step < 2 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="isCheckDraft">
          <div class="">
            <q-list bordered separator>
              <q-item v-for="(item, index) in rowsAuthority" :key="index">
                <q-item-section>
                  <q-item-label
                    >{{ `${item.prefix}${item.firstName} ${item.lastName}` }}
                    {{ `(${item.position})` }}</q-item-label
                  >
                  <q-item-label caption lines="2">{{
                    item.comment
                  }}</q-item-label>
                </q-item-section>

                <q-item-section
                  side
                  top
                  v-if="
                    index === rowsAuthority.length - 1 && item.comment === null
                  "
                >
                  <q-item-label caption v-if="!store.readonly">
                    <q-btn
                      unelevated
                      rounded
                      @click.prevent="onComment(item.id, item.isSignatory)"
                      label="แสดงความเห็น"
                      color="blue"
                    />
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </div>

          <div
            class="col-12"
            v-if="
              rowsAuthority[rowsAuthority.length - 1].comment !== null &&
              step === 2 &&
              !store.readonly
            "
          >
            <q-btn
              @click.prevent="onConfirmDraft"
              label="เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง"
              color="public"
            />
          </div>
        </div>
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="รอออกคำสั่ง"
        :icon="step === 3 ? 'mdi-pencil' : step > 3 ? 'done' : 'mdi-numeric-3'"
        :color="step < 3 ? 'grey-4' : ''"
      >
        <!-- <div class="row q-col-gutter-sm" v-if="isCheckAuthority">
          <div class="col-12">รอออกคำสั่ง</div>
        </div> -->
      </q-timeline-entry>

      <!-- รอออกคำสั่ง -->
      <q-timeline-entry
        title="ออกคำสั่งเสร็จสิ้น"
        :icon="step === 4 ? 'mdi-pencil' : step > 4 ? 'done' : 'mdi-numeric-4'"
        :color="step < 4 ? 'grey-4' : ''"
      >
        <div class="row q-col-gutter-sm" v-if="step === 4">
          <div class="q-pa-md q-gutter-sm">
            <q-btn
              color="blue-5"
              icon-right="mdi-download"
              label="ดาวน์โหลดคำสั่งที่เซ็นต์แล้ว"
            />
            <q-btn
              color="blue-5"
              icon-right="mdi-download"
              label="ดาวน์โหลดบัญชีแนบท้ายที่เซ็นต์แล้ว"
            />
          </div>
        </div>
      </q-timeline-entry>
    </q-timeline>
  </div>

  <div class="full-width row flex-center text-accent q-gutter-sm" v-else>
    <span
      ><div
        style="
          height: 50vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        "
        class="text-grey-5"
      >
        <q-spinner color="primary" size="3em" :thickness="10" />
      </div>
    </span>
  </div>

  <!-- เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง -->
  <q-dialog v-model="modalSelect" persistent>
    <q-card style="min-width: 70%">
      <DialogHeader
        :tittle="'เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง'"
        :close="onCloseDialog"
      />
      <q-separator />

      <q-card-section>
        <div class="col-12 q-col-gutter-sm">
          <div class="col-12 row q-col-gutter-md items-start">
            <div class="col-12 col-sm-4 col-md-4">
              <q-input
                v-model="search"
                outlined
                clearable
                hide-bottom-space
                dense
                label="คำค้น"
                @clear="search = ''"
              />
            </div>
            <q-checkbox
              keep-color
              v-model="isAct"
              label="แสดงเฉพาะรักษาการแทน"
              color="primary"
              @update:model-value="onAct"
            >
              <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
            </q-checkbox>
            <q-space />

            <div class="col-12 col-sm-6 col-md-3">
              <q-btn
                color="primary"
                icon="search"
                label="ค้นหา"
                class="full-width q-pa-sm"
                @click.prevent="onSearchData"
              >
              </q-btn>
            </div>
          </div>

          <div class="col-12">
            <p-table
              flat
              :columns="columns"
              :rows="rows"
              row-key="key"
              dense
              selection="single"
              v-model:selected="selected"
              :rows-per-page-options="[10, 25, 50, 100]"
              v-model:pagination="pagination"
              @request="onRequest"
            >
              <template v-slot:header-selection="scope">
                <q-checkbox
                  keep-color
                  color="primary"
                  dense
                  v-model="scope.checkBox"
                />
              </template>
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th class="text-center"> </q-th>

                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <span class="text-weight-medium">{{
                      getColumnLabel(col, isAct)
                    }}</span>
                  </q-th>
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td class="text-center">
                    <q-checkbox
                      keep-color
                      color="primary"
                      dense
                      v-model="props.selected"
                    />
                  </q-td>

                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div>
                      {{ col.value ? col.value : "-" }}
                    </div>
                  </q-td>
                </q-tr>
              </template>
            </p-table>
          </div>

          <div class="col-12">
            <q-checkbox v-model="isPersonSign" label="ผู้มีอำนาจลงนาม" />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn
          :disable="selected.length === 0"
          @click.prevent="onConfirmSendToCommander"
          label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
          color="public"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <!-- แสดงความเห็น -->
  <q-dialog v-model="modalComment" persistent>
    <q-card style="min-width: 40%">
      <q-form greedy @submit.prevent @validation-success="onSubmitComment">
        <DialogHeader :tittle="'รับทราบคำสั่ง'" :close="onCloseDialog" />
        <q-separator />

        <q-card-section>
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-12">
              <q-input
                dense
                outlined
                v-model="reason"
                label="ความเห็น"
                type="textarea"
                :rules="[(val: string) => val !== null && val !== '' || `${'กรุณากรอกความเห็น'}`]"
                hide-bottom-space
                lazy-rules
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn color="secondary" label="รับทราบ" type="onSubmit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>

  <PerviewPDF v-model:modal="modalPerView" v-model:data-file="dataFile" />
</template>

<style lang="scss" scoped>
.text-header {
  color: #34373c;
  font-size: 1rem;
  font-weight: 300;
}
</style>
