divdivdiv
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, 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 { useCounterMixin } from "@/stores/mixin";

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

const $q = useQuasar();
const mixin = useCounterMixin();
const {
  messageError,
  showLoader,
  hideLoader,

  success,
} = mixin;
const router = useRouter();
const route = useRoute();
const evaluateId = ref<string>(route.params.id as string);

/** form ผู้เซ็นเอกสาร*/
const formCommand = reactive<FormCommand>({
  commanderFullname: "", //ผู้บังคับบัญชาชั้นต้น
  commanderPosition: "", //ตำแหน่ง ผู้บังคับบัญชาชั้นต้น
  commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  author: "", //เจ้าของผลงาน
  subject: [], //ชื่อผลงาน
  assignedPosition: "",
  commanderPositionOld: "",
  commanderOrgOld: "",
  commanderOrg: "",
  commanderAbovePositionOld: "",
  commanderAboveOrgOld: "",
  commanderAboveOrg: "",
});

const formData = reactive<FormData>({
  id: "",
  subject: "", // ชื่อผลงาน
  author: "", //เจ้าของผลงาน
  commanderFullname: "", //ผู้บังคับบัญชาชั้นต้น
  commanderPosition: "", //ตำแหน่ง ผู้บังคับบัญชาชั้นต้น
  commanderAboveFullname: "", //ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
  commanderAbovePosition: "", //ตำแหน่ง ผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ
});

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

/** ตัวแปร 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 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 subjectRef = ref<Object | null>(null);
const authorRef = ref<Object | null>(null);
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 fileMapping = {
  "1-แบบพิจารณาคุณสมบัติบุคคล": {
    loading: "fileEvaluation1",
  },
  "2-แบบแสดงรายละเอียดการเสนอผลงาน": {
    loading: "fileEvaluation2",
  },
  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
    { loading: "fileEvaluation3" },
  "4-แบบประเมินคุณลักษณะบุคคล": {
    loading: "fileEvaluation4",
  },
  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)": {
    loading: "fileEvaluation5",
  },
  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)": {
    loading: "fileEvaluation6",
  },
};

const isLoading = ref<boolean>(false);
const isLoadingFile = reactive({
  fileEvaluation1: false,
  fileEvaluation2: false,
  fileEvaluation3: false,
  fileEvaluation4: false,
  fileEvaluation5: false,
  fileEvaluation6: false,
});

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function downloadFile(fileName: string) {
  const mapping = fileMapping[fileName as keyof typeof fileMapping];
  if (!mapping) return;

  const loadingKey = mapping.loading as keyof typeof isLoadingFile;
  isLoadingFile[loadingKey] = true;

  await http
    .get(
      config.API.loadFileDocument(
        "ประเมินเชี่ยวชาญ",
        evaluateId.value,
        fileName
      )
    )
    .then((res) => {
      switch (fileName) {
        case "1-แบบพิจารณาคุณสมบัติบุคคล":
          downloadFile1.value = res.data.downloadUrl;
          break;
        case "2-แบบแสดงรายละเอียดการเสนอผลงาน":
          downloadFile2.value = res.data.downloadUrl;
          break;
        case "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)":
          downloadFile3.value = res.data.downloadUrl;
          break;
        case "4-แบบประเมินคุณลักษณะบุคคล":
          downloadFile4.value = res.data.downloadUrl;
          break;
        case "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)":
          downloadFile5.value = res.data.downloadUrl;
          break;
        case "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)":
          downloadFile6.value = res.data.downloadUrl;
          break;
      }
    })
    .finally(() => {
      isLoadingFile[loadingKey] = false;
    });
}

/**
 *  ดาวน์โหลดไฟล์
 * @param tp templatname
 * @param templateName
 * @param fileName ชือ่ไฟล์
 */
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  try {
    const body = {
      template: tp,
      reportName: templateName,
      data: reportData.value,
    };
    await genReport(body, fileName); //สร้างไฟล์ต้นแบบ
  } catch (error) {
    messageError($q, error);
  } finally {
    hideLoader();
  }
}

/**
 * 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((res) => {
        const foundKey: string | undefined = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        downloadFile(type);
        hideLoader();
      });
  }
}

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

async function getData() {
  isLoading.value = true;
  await http
    .get(config.API.evaluationExpertise + `/${evaluateId.value}`)
    .then((res) => {
      const data = res.data.result;
      formData.id = data.id;
      formData.commanderFullname = data.commanderFullname;
      formData.commanderPosition = data.commanderPosition;
      formData.commanderAboveFullname = data.commanderAboveFullname;
      formData.commanderAbovePosition = data.commanderAbovePosition;
      formData.author = data.author;
      formData.subject = data.subject;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

const reportData = ref<any>();
async function getCheckSpace() {
  await http
    .get(config.API.evaluationReportCheckspecByid(evaluateId.value))
    .then((res) => {
      reportData.value = res.data.result;
    })
    .catch((e) => {
      messageError($q, e);
    });
}

function fetchDataFile() {
  Object.keys(fileMapping).forEach((fileName) => {
    downloadFile(fileName);
  });
}

onMounted(() => {
  Promise.all([getData(), getCheckSpace(), fetchDataFile()]);
});
</script>

<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11 q-mb-sm">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="router.push(`/evaluate`)"
        />
        <div>ประเมินเชี่ยวชาญ</div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
      <div class="col-12">
        <q-card bordered>
          <div class="col-12 row q-pa-md q-col-gutter-y-md">
            <div v-if="isLoading" class="col-12">
              <q-skeleton height="40px" square style="border-radius: 8px" />
            </div>
            <div v-else class="col-12">
              <q-card bordered class="col-12">
                <div
                  class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md"
                >
                  ผลงาน
                  <br />
                </div>
                <div class="col-12"><q-separator /></div>
                <div class="col-12 q-pa-sm">
                  <div class="row q-col-gutter-sm">
                    <q-input
                      ref="subjectRef"
                      dense
                      readonly
                      class="col-xs-12 col-sm-6"
                      outlined
                      label="ชื่อผลงาน"
                      v-model="formData.subject"
                      :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผลงาน'}`]"
                      lazy-rules
                      hide-bottom-space
                    />
                    <q-input
                      ref="authorRef"
                      class="col-xs-12 col-sm-6"
                      dense
                      readonly
                      outlined
                      v-model="formData.author"
                      label="เจ้าของผลงาน"
                      :rules="[
                          (val:string) => !!val || `${'กรุณากรอกเจ้าของผลงาน'}`,
                        ]"
                      lazy-rules
                      hide-bottom-space
                    />
                  </div>
                </div>
              </q-card>
            </div>

            <!-- เลือกผู้เซ็นเอกสาร -->
            <div v-if="isLoading" class="col-12">
              <q-skeleton height="200px" square style="border-radius: 8px" />
            </div>
            <div v-else class="col-12">
              <q-card bordered class="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
                          ref="commanderFullnameRef"
                          dense
                          class="col-xs-12 col-sm-6"
                          readonly
                          outlined
                          label="ชื่อ-นามสกุล"
                          v-model="formData.commanderFullname"
                          :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          ref="commanderPositionRef"
                          class="col-xs-12 col-sm-6"
                          readonly
                          dense
                          outlined
                          v-model="formData.commanderPosition"
                          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
                          ref="commanderAboveFullnameRef"
                          dense
                          class="col-xs-12 col-sm-6"
                          outlined
                          readonly
                          v-model="formData.commanderAboveFullname"
                          label="ชื่อ-นามสกุล"
                          :rules="[
                              (val:string) => !!val || `${'กรุณากรอกชื่อ-นามสกุล'}`,
                            ]"
                          lazy-rules
                          hide-bottom-space
                        />
                        <q-input
                          ref="commanderAbovePositionRef"
                          class="col-xs-12 col-sm-6"
                          dense
                          readonly
                          outlined
                          v-model="formData.commanderAbovePosition"
                          label="ตำแหน่ง"
                          :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                          lazy-rules
                          hide-bottom-space
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>

            <div class="col-12">
              <div class="row q-col-gutter-sm">
                <!-- แบบพิจารณาคุณสมบัติบุคคล -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation1']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                            class="col-xs-12 col-sm-12"
                            outlined
                            dense
                            label="อัปโหลดไฟล์"
                            lazy-rules
                            hide-bottom-space
                            accept=".pdf"
                            :rules="
                                downloadFile1 === ''
                                  ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                  : []
                              "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '1-แบบพิจารณาคุณสมบัติบุคคล',
                                    fileEvaluation1
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </div>
                  </q-card>
                </div>

                <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation2']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                            class="col-12"
                            outlined
                            dense
                            label="อัปโหลดไฟล์"
                            lazy-rules
                            accept=".pdf"
                            hide-bottom-space
                            :rules="
                                downloadFile2 === ''
                                  ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                  : []
                              "
                          >
                            <template v-slot:prepend>
                              <q-icon name="attach_file" />
                            </template>
                            <template v-slot:after>
                              <q-btn
                                flat
                                round
                                dense
                                color="primary"
                                icon="mdi-upload"
                                @click="
                                  fetchPathUpload(
                                    'ประเมินเชี่ยวชาญ',
                                    evaluateId,
                                    '2-แบบแสดงรายละเอียดการเสนอผลงาน',
                                    fileEvaluation2
                                  )
                                "
                                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                              >
                            </template>
                          </q-file>
                        </div>
                      </div>
                    </div>
                  </q-card>
                </div>

                <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation3']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                          class="col-12"
                          outlined
                          dense
                          label="อัปโหลดไฟล์"
                          lazy-rules
                          hide-bottom-space
                          accept=".pdf"
                          :rules="
                              downloadFile3 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                        >
                          <template v-slot:prepend>
                            <q-icon name="attach_file" />
                          </template>
                          <template v-slot:after>
                            <q-btn
                              flat
                              round
                              dense
                              color="primary"
                              icon="mdi-upload"
                              @click="
                                fetchPathUpload(
                                  'ประเมินเชี่ยวชาญ',
                                  evaluateId,
                                  '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
                                  fileEvaluation3
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                          </template>
                        </q-file>
                      </div>
                    </div>
                  </q-card>
                </div>

                <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation5']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                          class="col-12"
                          outlined
                          label="อัปโหลดไฟล์"
                          dense
                          lazy-rules
                          accept=".pdf"
                          hide-bottom-space
                          :rules="
                              downloadFile5 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                        >
                          <template v-slot:prepend>
                            <q-icon name="attach_file" />
                          </template>
                          <template v-slot:after>
                            <q-btn
                              flat
                              round
                              dense
                              color="primary"
                              icon="mdi-upload"
                              @click="
                                fetchPathUpload(
                                  'ประเมินเชี่ยวชาญ',
                                  evaluateId,
                                  '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
                                  fileEvaluation5
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                          </template>
                        </q-file>
                      </div>
                    </div>
                  </q-card>
                </div>

                <!-- แบบประเมินคุณลักษณะบุคคล -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation4']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                          class="col-12"
                          outlined
                          dense
                          lazy-rules
                          label="อัปโหลดไฟล์"
                          hide-bottom-space
                          accept=".pdf"
                          :rules="
                              downloadFile4 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                        >
                          <template v-slot:prepend>
                            <q-icon name="attach_file" />
                          </template>
                          <template v-slot:after>
                            <q-btn
                              flat
                              round
                              dense
                              color="primary"
                              icon="mdi-upload"
                              @click="
                                fetchPathUpload(
                                  'ประเมินเชี่ยวชาญ',
                                  evaluateId,
                                  '4-แบบประเมินคุณลักษณะบุคคล',
                                  fileEvaluation4
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                          </template>
                        </q-file>
                      </div>
                    </div>
                  </q-card>
                </div>

                <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
                <div class="col-6">
                  <q-skeleton
                    v-if="isLoadingFile['fileEvaluation6']"
                    height="120px"
                  />
                  <q-card v-else bordered>
                    <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"
                          class="col-12"
                          outlined
                          label="อัปโหลดไฟล์"
                          hide-bottom-space
                          dense
                          lazy-rules
                          accept=".pdf"
                          :rules="
                              downloadFile6 === ''
                                ? [(val:string) => !!val || 'กรุณาเลือกไฟล์']
                                : []
                            "
                        >
                          <template v-slot:prepend>
                            <q-icon name="attach_file" />
                          </template>
                          <template v-slot:after>
                            <q-btn
                              flat
                              round
                              dense
                              color="primary"
                              icon="mdi-upload"
                              @click="
                                fetchPathUpload(
                                  'ประเมินเชี่ยวชาญ',
                                  evaluateId,
                                  '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
                                  fileEvaluation6
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                          </template>
                        </q-file>
                      </div>
                    </div>
                  </q-card>
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </div>
</template>
