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

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

import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { tokenParsed } from "@/plugins/auth";
import { VuePDF } from "@tato30/vue-pdf";

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

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

/** use*/
const $q = useQuasar();
const store = useEvaluateStore();
const mixin = useCounterMixin();
const route = useRoute();
const { showLoader, hideLoader, date2Thai, messageError, success } = mixin;

const evaluateId = ref<string>(route.params.id.toString());

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

/** form ผู้เซ็นเอกสาร*/
const formCommand = reactive<FormCommand>({
  commanderFullname: "",
  commanderPosition: "",
  commanderAboveFullname: "",
  commanderAbovePosition: "",
  author: "",
  subject: "",
  assignedPosition: "",
});

/** formRef */
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 performanceRef = ref<object | null>(null);
const performanceOwnerRef = ref<object | null>(null);

/**
 * function updateFormref
 * @param val value ผู้เซ็นเอกสาร
 */
function updateInput(val: 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,
    downloadFile: [
      downloadFile1.value,
      downloadFile2.value,
      downloadFile3.value,
      downloadFile4.value,
      downloadFile5.value,
      downloadFile6.value,
    ],
    performance: performanceRef.value,
    performanceOwner: performanceOwnerRef.value,
    statusUpload: store.statusUpload,
  };
  emit("update:form", val, ref); // ส่งข้อมูลไปอัปเดท
}

/** ตัวแปร file*/
const fileEvaluation1 = ref<File | null>();
const fileEvaluation2 = ref<File | null>();
const fileEvaluation3 = ref<File | null>();
const fileEvaluation4 = ref<File | null>();
const fileEvaluation5 = ref<File | null>();
const fileEvaluation6 = ref<File | null>();

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

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

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

/**
 * funcion ดาวน์โหลดไฟล์
 * @param tp templatname
 * @param templateName
 * @param fileName ชือ่ไฟล์
 */
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();

  const body = {
    template: tp,
    reportName: templateName,
    data: profile.value,
  };
  await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
}

/**
 * function fetch ลิงก์อัปโหลดไฟล์
 * @param volume เล่ม
 * @param id  evaluate ID
 * @param type ประเภทไฟล์
 * @param file ไฟล์
 */
async function fetchPathUpload(
  volume: string,
  id: string | undefined,
  type: string,
  file: any
) {
  const body = {
    fileList: {
      fileName: type,
      metadata: {
        subject: formCommand.subject,
        author: formCommand.author,
      },
    },
  };

  if (id && file) {
    showLoader();
    await http
      .post(config.API.loadPathDocument(volume, id), body)
      .then(async (res) => {
        const foundKey: string | undefined = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
        await downloadFile(type);
      })
      .catch((err) => {
        messageError($q, err);
        hideLoader();
      })
      .finally(() => {
        // hideLoader();
      });
  }
}

/**
 *  functoin อัปโหลดไฟล์
 * @param uploadUrl  link อัปโหลด
 * @param file  ไฟล์
 */
async function uploadfile(uploadUrl: string, file: any) {
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      success($q, "อัปโหลไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function fecth รายชื่อผู้เซ็นเอกสาร
 * @param id evaluate ID
 */
function fetcheSigner(id: string) {
  showLoader();
  http
    .get(config.API.evaluationSignerDoc1(id))
    .then((res) => {
      const data = res.data.result;

      formCommand.commanderFullname = data.commanderFullname;
      formCommand.commanderPosition = data.commanderPosition;
      formCommand.commanderAboveFullname = data.commanderAboveFullname;
      formCommand.commanderAbovePosition = data.commanderAbovePosition;
      formCommand.author = data.author;
      formCommand.subject = data.subject;
      store.statusUpload = true;
    })
    .catch(() => {
      store.statusUpload = false;
      getCommander();
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 2000);
    });
}

/**
 * function
 * @param id  evaluate ID
 */
async function fetchCheckSpec(id: string) {
  showLoader();
  await http
    .get(config.API.evaluationReportCheckspecByid(id))
    .then((res) => {
      const data = res.data.result;
      profile.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 2000);
    });
}

const downloadFile1 = ref<string>("");
const downloadFile2 = ref<string>("");
const downloadFile3 = ref<string>("");
const downloadFile4 = ref<string>("");
const downloadFile5 = ref<string>("");
const downloadFile6 = ref<string>("");

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function downloadFile(fileName: string) {
  // showLoader();
  await http
    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
    .then((res) => {
      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
        downloadFile1.value = res.data.downloadUrl;
        // fileEvaluation1.value = res.data.upload;
      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
        downloadFile2.value = res.data.downloadUrl;
        // fileEvaluation2.value = res.data.upload;
      } else if (
        fileName ===
        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
      ) {
        downloadFile3.value = res.data.downloadUrl;
        // fileEvaluation3.value = res.data.upload;
      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
        downloadFile4.value = res.data.downloadUrl;
        // fileEvaluation4.value = res.data.upload;
      } else if (
        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
      ) {
        downloadFile5.value = res.data.downloadUrl;
        // fileEvaluation5.value = res.data.upload;
      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
        downloadFile6.value = res.data.downloadUrl;
        // fileEvaluation6.value = res.data.upload;
      }
    })
    .finally(() => {
      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,
        performance: performanceRef.value,
        performanceOwner: performanceOwnerRef.value,
        downloadFile: [
          downloadFile1.value,
          downloadFile2.value,
          downloadFile3.value,
          downloadFile4.value,
          downloadFile5.value,
          downloadFile6.value,
        ],
        statusUpload: false,
      };

      emit("update:form", formCommand, ref);

      setTimeout(() => {
        hideLoader();
      }, 2000);
    });
}

function getCommander() {
  http
    .get(config.API.searchCommander)
    .then((res) => {
      const data = res.data.result;
      formCommand.commanderFullname = data.commanderFullname;
      formCommand.commanderPosition = data.commanderPosition;
      formCommand.commanderAboveFullname = data.commanderAboveFullname;
      formCommand.commanderAbovePosition = data.commanderAbovePosition;
    })
    .catch((e) => {
      console.log(e);
      // messageError($q, e);
    });
}
/** callback function */
watch(
  () => store.checkFileupload,
  () => {
    const fileEvaluationValues = [
      fileEvaluation1,
      fileEvaluation2,
      fileEvaluation3,
      fileEvaluation4,
      fileEvaluation5,
      fileEvaluation6,
    ];
    const downloadFileValues = [
      downloadFile1,
      downloadFile2,
      downloadFile3,
      downloadFile4,
      downloadFile5,
      downloadFile6,
    ];
    for (let i = 0; i < downloadFileValues.length; i++) {
      if (downloadFileValues[i].value === "") {
        fileEvaluationValues[i].value = null;
      }
    }
  }
);

watch(
  () => store.statusUpload,
  () => {
    setTimeout(() => {
      store.statusUpload && updateInput(formCommand);
    }, 200);
  }
);

/**lifecycle Hooks*/
onMounted(async () => {
  const user = await tokenParsed();
  if (user) {
    formCommand.author = user.name;
  }
  showLoader();
  await Promise.all([
    fetcheSigner(evaluateId.value),
    fetchCheckSpec(evaluateId.value),
    downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
    downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
    downloadFile(
      "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
    ),
    downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
    downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
    downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
  ]);
});
</script>

<template>
  <div class="col-12 q-pa-sm">
    <!-- ผลงาน -->
    <div class="col-12">
      <q-card bordered class="cardSp1 col-12">
        <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
          ผลงาน
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-12 q-pa-sm">
          <div class="row q-col-gutter-sm">
            <q-input
              :readonly="store.currentStep != 2 || store.statusUpload"
              ref="performanceRef"
              dense
              class="col-xs-12 col-sm-6"
              outlined
              label="ชื่อผลงาน"
              v-model="formCommand.subject"
              @update:model-value="updateInput(formCommand)"
              :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
              lazy-rules
              hide-bottom-space
            />
            <q-input
              :readonly="store.currentStep != 2 || store.statusUpload"
              ref="performanceOwnerRef"
              class="col-xs-12 col-sm-6"
              dense
              outlined
              v-model="formCommand.author"
              @update:model-value="updateInput(formCommand)"
              label="เจ้าของผลงาน"
              :rules="[(val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`]"
              lazy-rules
              hide-bottom-space
            />
          </div>
        </div>
      </q-card>
    </div>

    <!-- เลือกผู้เซ็นเอกสาร -->
    <div class="col-12">
      <q-card bordered class="cardSp1 col-12">
        <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
          เลือกผู้เซ็นเอกสาร
        </div>
        <div class="col-12"><q-separator /></div>
        <div class="col-12 q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-xs-12 col-sm-12 row">
              <div class="text-weight-medium q-pt-xs q-pl-sm">
                ผู้บังคับบัญชาชั้นต้น
              </div>
              <div class="row col-12 q-col-gutter-sm q-pa-sm">
                <q-input
                  :readonly="store.currentStep != 2 || store.statusUpload"
                  ref="commanderFullnameRef"
                  dense
                  class="col-xs-12 col-sm-6"
                  outlined
                  label="ชื่อ-นามสกุล"
                  v-model="formCommand.commanderFullname"
                  @update:model-value="updateInput(formCommand)"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                  lazy-rules
                  hide-bottom-space
                />
                <q-input
                  :readonly="store.currentStep != 2 || store.statusUpload"
                  ref="commanderPositionRef"
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="formCommand.commanderPosition"
                  @update:model-value="updateInput(formCommand)"
                  label="ตำแหน่ง"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                  lazy-rules
                  hide-bottom-space
                />
              </div>
            </div>
          </div>
          <div class="row q-col-gutter-sm col-12">
            <div class="col-xs-12 col-sm-12 row">
              <div class="text-weight-medium q-pl-sm q-pt-sm">
                ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
              </div>
              <div class="row col-12 q-col-gutter-md q-pa-sm">
                <q-input
                  :readonly="store.currentStep != 2 || store.statusUpload"
                  ref="commanderAboveFullnameRef"
                  dense
                  class="col-xs-12 col-sm-6"
                  outlined
                  v-model="formCommand.commanderAboveFullname"
                  label="ชื่อ-นามสกุล"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`]"
                  lazy-rules
                  @update:model-value="updateInput(formCommand)"
                  hide-bottom-space
                />
                <q-input
                  :readonly="store.currentStep != 2 || store.statusUpload"
                  ref="commanderAbovePositionRef"
                  class="col-xs-12 col-sm-6"
                  dense
                  outlined
                  v-model="formCommand.commanderAbovePosition"
                  label="ตำแหน่ง"
                  :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                  lazy-rules
                  hide-bottom-space
                  @update:model-value="updateInput(formCommand)"
                />
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>

    <!-- v-if="store.statusUpload -->
    <div class="row q-col-gutter-sm">
      <!-- แบบพิจารณาคุณสมบัติบุคคล -->
      <div class="col-6" v-if="store.currentStep === 2">
        <q-card bordered class="cardSp1">
          <div
            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
          >
            <div>แบบพิจารณาคุณสมบัติบุคคล</div>
            <q-space />
            <div>
              <q-btn
                flat
                dense
                icon="download"
                color="indigo"
                @click="
                  onClickDowloadFile(
                    'EV1_005',
                    'template-1',
                    'แบบพิจารณาคุณสมบัติบุคคล'
                  )
                "
              >
                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
              >
            </div>
            <div>
              <q-btn
                v-if="downloadFile1 != ''"
                :href="downloadFile1"
                target="_blank"
                class="q-ml-sm"
                color="blue"
                flat
                dense
                icon="visibility"
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </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">
                <q-file
                  ref="fileEvaluation1Ref"
                  v-model="fileEvaluation1"
                  :disable="!store.statusUpload"
                  class="col-xs-12 col-sm-12"
                  label="อัปโหลดไฟล์"
                  outlined
                  dense
                  lazy-rules
                  hide-bottom-space
                  accept=".pdf"
                  :rules="
                    downloadFile1 === ''
                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                      : []
                  "
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                  <template v-slot:after>
                    <q-btn
                      :disable="!store.statusUpload"
                      flat
                      round
                      dense
                      color="primary"
                      icon="mdi-upload"
                      @click="
                        fetchPathUpload(
                          'เล่ม 1',
                          evaluateId,
                          '1-แบบพิจารณาคุณสมบัติบุคคล',
                          fileEvaluation1
                        )
                      "
                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                    >
                  </template>
                </q-file>
              </div>
            </div>
          </div>
        </q-card>
      </div>

      <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
      <div class="col-6" v-if="store.currentStep === 2">
        <q-card bordered class="cardSp1">
          <div
            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
          >
            <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
            <q-space />
            <div>
              <q-btn
                flat
                dense
                icon="download"
                color="indigo"
                @click="
                  onClickDowloadFile(
                    'EV1_006',
                    'template-2',
                    'แบบแสดงรายละเอียดการเสนอผลงาน'
                  )
                "
              >
                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
              >
            </div>
            <div>
              <q-btn
                v-if="downloadFile2 != ''"
                :href="downloadFile2"
                target="_blank"
                class="q-ml-sm"
                color="blue"
                flat
                dense
                icon="visibility"
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </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">
                <q-file
                  ref="fileEvaluation2Ref"
                  v-model="fileEvaluation2"
                  :disable="!store.statusUpload"
                  class="col-12"
                  outlined
                  dense
                  label="อัปโหลดไฟล์"
                  lazy-rules
                  accept=".pdf"
                  hide-bottom-space
                  :rules="
                    downloadFile2 === ''
                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                      : []
                  "
                >
                  <template v-slot:prepend>
                    <q-icon name="attach_file" />
                  </template>
                  <template v-slot:after>
                    <q-btn
                      :disable="!store.statusUpload"
                      flat
                      round
                      dense
                      color="primary"
                      icon="mdi-upload"
                      @click="
                        fetchPathUpload(
                          'เล่ม 1',
                          evaluateId,
                          '2-แบบแสดงรายละเอียดการเสนอผลงาน',
                          fileEvaluation2
                        )
                      "
                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                    >
                  </template>
                </q-file>
              </div>
            </div>
          </div>
        </q-card>
      </div>

      <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
      <div class="col-6" v-if="store.currentStep === 2">
        <q-card bordered class="cardSp1">
          <div
            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
          >
            <div>
              แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
              (เอกสารแบบ ก.)
            </div>
            <q-space />
            <div>
              <q-btn
                flat
                dense
                icon="download"
                color="indigo"
                @click="
                  onClickDowloadFile(
                    'EV1_007',
                    'template-3',
                    'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
                  )
                "
              >
                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
              >
            </div>
            <div v-if="downloadFile3 != ''">
              <q-btn
                :href="downloadFile3"
                target="_blank"
                flat
                dense
                icon="visibility"
                class="q-ml-sm"
                color="blue"
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row">
            <div class="col-12 q-pa-sm">
              <q-file
                ref="fileEvaluation3Ref"
                v-model="fileEvaluation3"
                :disable="!store.statusUpload"
                class="col-12"
                outlined
                dense
                lazy-rules
                hide-bottom-space
                accept=".pdf"
                :rules="
                  downloadFile3 === ''
                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                    : []
                "
                label="อัปโหลดไฟล์"
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
                <template v-slot:after>
                  <q-btn
                    :disable="!store.statusUpload"
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-upload"
                    @click="
                      fetchPathUpload(
                        'เล่ม 1',
                        evaluateId,
                        '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
                        fileEvaluation3
                      )
                    "
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </template>
              </q-file>
            </div>
          </div>
        </q-card>
      </div>

      <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
      <div class="col-6" v-if="store.currentStep === 2">
        <q-card bordered class="cardSp1">
          <div
            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
          >
            <div class="col-7">
              แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
            </div>
            <q-space />
            <div>
              <q-btn
                flat
                dense
                icon="download"
                color="indigo"
                @click="
                  onClickDowloadFile(
                    'EV1_009',
                    'template-5',
                    'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
                  )
                "
                ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
              >
            </div>
            <div>
              <q-btn
                v-if="downloadFile5 != ''"
                :href="downloadFile5"
                target="_blank"
                flat
                dense
                icon="visibility"
                class="q-ml-sm"
                color="blue"
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row">
            <div class="col-12 q-pa-sm">
              <q-file
                ref="fileEvaluation5Ref"
                v-model="fileEvaluation5"
                :disable="!store.statusUpload"
                class="col-12"
                outlined
                dense
                lazy-rules
                accept=".pdf"
                hide-bottom-space
                label="อัปโหลดไฟล์"
                :rules="
                  downloadFile5 === ''
                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                    : []
                "
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
                <template v-slot:after>
                  <q-btn
                    :disable="!store.statusUpload"
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-upload"
                    @click="
                      fetchPathUpload(
                        'เล่ม 1',
                        evaluateId,
                        '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
                        fileEvaluation5
                      )
                    "
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </template>
              </q-file>
            </div>
          </div>
        </q-card>
      </div>

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

      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
      <div class="col-6" v-if="store.currentStep === 2">
        <q-card bordered class="cardSp1">
          <div
            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
          >
            <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
            <q-space />
            <div>
              <q-btn
                flat
                dense
                icon="download"
                color="indigo"
                @click="
                  onClickDowloadFile(
                    'EV1_010',
                    'template-6',
                    'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
                  )
                "
              >
                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
              >
            </div>
            <div>
              <q-btn
                v-if="downloadFile6 != ''"
                :href="downloadFile6"
                target="_blank"
                flat
                dense
                icon="visibility"
                class="q-ml-sm"
                color="blue"
              >
                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
              >
            </div>
          </div>
          <div class="col-12"><q-separator /></div>
          <div class="row">
            <div class="col-12 q-pa-sm">
              <q-file
                ref="fileEvaluation6Ref"
                v-model="fileEvaluation6"
                :disable="!store.statusUpload"
                class="col-12"
                outlined
                hide-bottom-space
                dense
                lazy-rules
                label="อัปโหลดไฟล์"
                accept=".pdf"
                :rules="
                  downloadFile6 === ''
                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
                    : []
                "
              >
                <template v-slot:prepend>
                  <q-icon name="attach_file" />
                </template>
                <template v-slot:after>
                  <q-btn
                    :disable="!store.statusUpload"
                    flat
                    round
                    dense
                    color="primary"
                    icon="mdi-upload"
                    @click="
                      fetchPathUpload(
                        'เล่ม 1',
                        evaluateId,
                        '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
                        fileEvaluation6
                      )
                    "
                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                  >
                </template>
              </q-file>
            </div>
          </div>
        </q-card>
      </div>
    </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>