<script setup lang="ts">
import { onMounted, ref } 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";

/** importType*/
import type { FileEvaluationRefRef } from "@/modules/12_evaluatePersonal/interface/index/evalute";

/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";

/** uer*/
const store = useEvaluateDetailStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();

const {
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
  dialogConfirm,
} = mixin;

const id = ref<string>(route.params.id as string);
const modalConfirm = ref<boolean>(false);
const nameOfWork = ref<string>("");
const nameOfOwner = ref<string>("");
const position = ref<string>("");
const fileEvaluation81 = ref<any>();
const fileEvaluation82 = ref<any>();
const fileEvaluation83 = ref<any>();
const fileEvaluation84 = ref<any>();
const fileEvaluation85 = ref<any>();
const fileEvaluation86 = ref<any>();
const fileEvaluation81Ref = ref<object | null>(null);
const fileEvaluation82Ref = ref<object | null>(null);
const fileEvaluation83Ref = ref<object | null>(null);
const fileEvaluation84Ref = ref<object | null>(null);
const fileEvaluation85Ref = ref<object | null>(null);
const fileEvaluation86Ref = ref<object | null>(null);
const profile = ref<any>();
const fileEvaluationRef: FileEvaluationRefRef = {
  fileEvaluation81: fileEvaluation81Ref,
  fileEvaluation82: fileEvaluation82Ref,
  fileEvaluation83: fileEvaluation83Ref,
  fileEvaluation84: fileEvaluation84Ref,
  fileEvaluation85: fileEvaluation85Ref,
  fileEvaluation86: fileEvaluation86Ref,
};

/** function ดาวน์โหลดไฟล์ต้นแบบ*/
async function onClickDowloadFile(
  tp: string,
  templateName: string,
  fileName: string
) {
  showLoader();
  const data = Object.assign(
    { fullName: profile.value == null ? "" : profile.value.fullName },
    { position: profile.value == null ? "" : profile.value.position },
    { positionLevel: profile.value == null ? "" : profile.value.positionLevel },
    { posNo: profile.value == null ? "" : profile.value.posNo },
    { oc: profile.value == null ? "" : profile.value.oc },
    {
      birthDate:
        profile.value == null ? "" : date2Thai(profile.value.birthDate),
    },
    { govAge: profile.value == null ? "" : profile.value.govAge },
    {
      positionLevelNew:
        profile.value == null
          ? ""
          : profile.value.type == "EXPERT"
          ? "ชำนาญการ"
          : "ชำนาญการพิเศษ",
    }
  );

  const body = {
    template: tp,
    reportName: templateName,
    data: data,
  };
  await genReport(body, fileName);
}

/**
 * function เรียก link อัปโหลด
 * @param name ชื่อไฟล์
 * @param file ไฟล์
 */
function upLoadFile(name: string, file: any) {
  if (file) {
    showLoader();
    http
      .post(config.API.evaluationFileListbyId("เล่ม 2", id.value), {
        fileList: {
          fileName: name,
          metadata: {
            tag: "value",
            author: author.value,
            subject: subject.value,
            assignedPosition: assignedPosition.value,
          },
        },
      })
      .then((res) => {
        const foundKey: any = Object.keys(res.data).find(
          (key) =>
            res.data[key]?.fileName !== undefined &&
            res.data[key]?.fileName !== ""
        );
        const link = res.data[foundKey]?.uploadUrl;
        fileUpLoad(link, file);
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        downloadFileList(name);
        hideLoader();
      });
  }
}

/**
 * function อัปโหลดไฟล์
 * @param url link อัปโหลด
 * @param file ไฟล์
 */
function fileUpLoad(url: string, file: any) {
  axios
    .put(url, file, {
      headers: { "Content-Type": file?.type },
      onUploadProgress: (e) => console.log(e),
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      success($q, "อัปโหลดไฟล์สำเร็จ");
    });
}

/** function ยืนยันผลการพิจารณา*/
async function confirmApprove() {
  const fileEvaluationValues = [
    fileEvaluation81,
    fileEvaluation82,
    fileEvaluation83,
    fileEvaluation84,
    fileEvaluation85,
    fileEvaluation86,
  ];
  const downloadFileValues = [
    downloadFile1,
    downloadFile2,
    downloadFile3,
    downloadFile4,
    downloadFile5,
    downloadFile6,
  ];

  for (let i = 0; i < downloadFileValues.length; i++) {
    if (downloadFileValues[i].value === "") {
      fileEvaluationValues[i].value = null;
    }
  }
  setTimeout(() => {
    const hasError = [];
    for (const key in fileEvaluationRef) {
      if (Object.prototype.hasOwnProperty.call(fileEvaluationRef, key)) {
        const property = fileEvaluationRef[key];
        if (property.value && typeof property.value.validate === "function") {
          const isValid = property.value.validate();
          hasError.push(isValid);
        }
      }
    }

    if (hasError.every((result) => result === true)) {
      dialogConfirm(
        $q,
        () => {
          const data = {
            metadata: {
              additionalProp1: nameOfWork.value,
              additionalProp2: nameOfOwner.value,
              additionalProp3: position.value,
            },
          };
          showLoader();
          http
            .patch(
              config.API.evaluationPatchData(
                "เล่ม 2",
                id.value,
                "1-เอกสารเล่ม 2"
              ),
              data
            )
            .then(() => {})
            .catch((e) => {
              messageError($q, e);
            })
            .finally(() => {
              nextStep();
              modalConfirm.value = false;
              hideLoader();
            });
        },
        "ยืนยันผลการพิจารณา",
        "ต้องการยืนยันผลการพิจารณาใช่หรือไม่?"
      );
    }
  }, 100);
}

/** function ยืนยันผลการพิจารณา*/
function nextStep() {
  showLoader();
  http
    .put(config.API.evaluationNextFinish(id.value))
    .then(() => {
      success($q, "ยืนยันผลการพิจารณาสำเร็จ");
      store.step = 9;
      store.currentStep = 9;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกข้แมูลคุณสมบัติ*/
async function fetchProfile() {
  showLoader();
  await http
    .get(config.API.evaluateGetDetail(id.value))
    .then((res) => {
      const data = res.data.result;
      profile.value = data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const downloadDocEditUrl = ref<string>("");
async function checkDocEdit() {
  showLoader();
  await http
    .get(
      config.API.evaluationPatchData(
        "เล่ม 2",
        id.value,
        "2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
      )
    )
    .then((res: any) => {
      downloadDocEditUrl.value = res.data.downloadUrl;
    })
    .catch((e) => {
      // messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

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 downloadFileList(fileName: string) {
  showLoader();
  await http
    .get(config.API.evaluationFilebyId("เล่ม 2", id.value, fileName))
    .then((res) => {
      if (
        fileName ===
        "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
      ) {
        downloadFile1.value = res.data.downloadUrl;
      } else if (fileName === "บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)") {
        downloadFile2.value = res.data.downloadUrl;
      } else if (fileName === "แบบประเมินผลงาน (เอกสารหมายเลข 16)") {
        downloadFile3.value = res.data.downloadUrl;
      } else if (fileName === "แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)") {
        downloadFile4.value = res.data.downloadUrl;
      } else if (fileName === "แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)") {
        downloadFile5.value = res.data.downloadUrl;
      } else if (fileName === "แบบสรุปผลการประเมิน (เอกสารแบบ ง)") {
        downloadFile6.value = res.data.downloadUrl;
      }
    })
    .finally(() => {
      hideLoader();
    });
}

const author = ref<string>("");
const subject = ref<string>("");
const assignedPosition = ref<string>("");

/** function เรียกข้อมูลผลงาน*/
async function fetchDataSigner() {
  showLoader();
  await http
    .get(config.API.evaluationSigner(id.value, 2))
    .then((res) => {
      const data = res.data.result;
      if (data) {
        author.value = data.authorDoc2;
        subject.value = data.subjectDoc2;
        assignedPosition.value = data.assignedPosition;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(async () => {
  fetchProfile();
  fetchDataSigner();
  downloadFileList(
    "แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)"
  );
  downloadFileList("บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)");
  downloadFileList("แบบประเมินผลงาน (เอกสารหมายเลข 16)");
  downloadFileList("แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)");
  downloadFileList("แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)");
  downloadFileList("แบบสรุปผลการประเมิน (เอกสารแบบ ง)");
  checkDocEdit();
});
</script>

<template>
  <div class="row q-col-gutter-sm q-pa-sm">
    <div class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <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 col-12">
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                  แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน
                  (เอกสารแบบ ค)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div v-if="store.currentStep == 8">
                      <q-btn
                        class="col-12"
                        flat dense
                        icon="download"
                        color="indigo"
                        @click="
                          onClickDowloadFile(
                            'เอกสารแบบ ค',
                            'template-4',
                            'เอกสารแบบ ค'
                          )
                        "
                      >
                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                      >
                    </div>
                    <div>
                      <q-btn
                        v-if="downloadFile1"
                        :href="downloadFile1"
                        target="_blank"
                        class="col-12"
                        flat
                        dense
                        icon="visibility"
                        color="blue"
                      >
                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="row col-12 q-pa-sm" v-if="store.currentStep == 8">
                    <div  class="row col-12">
                        <q-file
                          ref="fileEvaluation81Ref"
                          v-model="fileEvaluation81"
                          outlined
                          hide-bottom-space
                          lazy-rules
                          label="อัปโหลดไฟล์"
                          class="col-12"
                          dense
                          accept=".pdf"
                          :rules="
                            downloadFile1 === ''
                              ? [(val) => !!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="
                                upLoadFile(
                                  'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลประกอบการประเมินผลงาน (เอกสารแบบ ค)',
                                  fileEvaluation81
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >

                          </template>
                        </q-file>
                    </div>
                </div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                     บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div
                      v-if="store.currentStep == 8"
                    >
                      <q-btn
                        class="col-12"
                        flat dense
                        icon="download"
                        color="indigo"
                        @click="
                          onClickDowloadFile(
                            'เอกสารหมายเลข 15',
                            'template-4',
                            'เอกสารหมายเลข 15'
                          )
                        "
                      >
                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                      >
                    </div>
                    <div>
                      <q-btn
                        v-if="downloadFile2"
                        :href="downloadFile2"
                        target="_blank"
                        class="col-12"
                        flat dense
                        icon="visibility"
                        color="blue"
                      >
                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
                    <div class="row col-12">
                      <q-file
                        ref="fileEvaluation82Ref"
                        v-model="fileEvaluation82"
                        class="col-12"
                        outlined
                        dense
                        hide-bottom-space
                        lazy-rules
                        label="อัปโหลดไฟล์"
                        accept=".pdf"
                        :rules="
                          downloadFile2 === ''
                            ? [(val) => !!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="
                                upLoadFile(
                                  'บัญชีแสดงการรับ-ส่งผลงาน (เอกสารหมายเลข 15)',
                                  fileEvaluation82
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                        </template>
                      </q-file>
                    </div>
                </div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                      แบบประเมินผลงาน (เอกสารหมายเลข 16)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div v-if="store.currentStep == 8">
                        <q-btn
                          class="col-12"
                          dense
                          flat
                          icon="download"
                          color="indigo"
                          @click="
                            onClickDowloadFile(
                              'เอกสารหมายเลข 16',
                              'template-4',
                              'เอกสารหมายเลข 16'
                            )
                          "
                        >
                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                        >
                      </div>
                      <div>
                        <q-btn
                          v-if="downloadFile3"
                          :href="downloadFile3"
                          target="_blank"
                          class="col-12"
                          flat dense
                          icon="visibility"
                          color="blue"
                        >
                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                        >
                      </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
                  <div class="row col-12">
                    <q-file
                      ref="fileEvaluation83Ref"
                      v-model="fileEvaluation83"
                      class="col-12"
                      outlined
                      dense
                      hide-bottom-space
                      lazy-rules
                      label="อัปโหลดไฟล์"
                      accept=".pdf"
                      :rules="
                        downloadFile3 === ''
                          ? [(val) => !!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="
                              upLoadFile(
                                'แบบประเมินผลงาน (เอกสารหมายเลข 16)',
                                fileEvaluation83
                              )
                            "
                            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                          >
                      </template>
                    </q-file>
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                     แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div
                        v-if="store.currentStep == 8"
                      >
                        <q-btn
                          class="col-12"
                          flat dense
                          icon="download"
                          color="indigo"
                          @click="
                            onClickDowloadFile(
                              'เอกสารหมายเลข 17',
                              'template-4',
                              'เอกสารหมายเลข 17'
                            )
                          "
                        >
                          <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                        >
                      </div>
                      <div>
                        <q-btn
                          v-if="downloadFile4"
                          :href="downloadFile4"
                          target="_blank"
                          class="col-12"
                          flat dense
                          icon="visibility"
                          color="blue"
                        >
                          <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                        >
                      </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
                  <div class="row col-12">
                    <q-file
                      ref="fileEvaluation84Ref"
                      v-model="fileEvaluation84"
                      class="col-12"
                      outlined
                      dense
                      hide-bottom-space
                      lazy-rules
                      label="อัปโหลดไฟล์"
                      accept=".pdf"
                      :rules="
                        downloadFile4 === ''
                          ? [(val) => !!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="
                            upLoadFile(
                              'แบบแสดงการประเมินผลงาน (เอกสารหมายเลข 17)',
                              fileEvaluation84
                            )
                          "
                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                        >
                      </template>
                    </q-file>
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                     แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div
                      v-if="store.currentStep == 8"
                    >
                      <q-btn
                        class="col-12"
                        flat dense
                        icon="download"
                        color="indigo"
                        @click="
                          onClickDowloadFile(
                            'เอกสารหมายเลข 18',
                            'template-4',
                            'เอกสารหมายเลข 18'
                          )
                        "
                      >
                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                      >
                    </div>
                    <div>
                      <q-btn
                        v-if="downloadFile5"
                        :href="downloadFile5"
                        target="_blank"
                        class="col-12"
                        flat dense
                        icon="visibility"
                        color="blue"
                      >
                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="col-12 q-pa-sm" v-if="store.currentStep == 8">
                  <div class="row q-col-gutter-md col-12">
                    <div class="row col-12">
                      <q-file
                        ref="fileEvaluation85Ref"
                        v-model="fileEvaluation85"
                        class="col-12"
                        outlined
                        dense
                        hide-bottom-space
                        lazy-rules
                        label="อัปโหลดไฟล์"
                        accept=".pdf"
                        :rules="
                          downloadFile5 === ''
                            ? [(val) => !!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="
                                upLoadFile(
                                  'แบบรายงานผลการประเมินบุคคล (เอกสารหมายเลข 18)',
                                  fileEvaluation85
                                )
                              "
                              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                            >
                        </template>
                      </q-file>
                    </div>
                  </div>
                </div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card bordered style="border: 1px solid #d6dee1">
                <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-sm">
                  <div class="col-xs-12 col-sm-9">
                     แบบสรุปผลการประเมิน (เอกสารแบบ ง)
                  </div>
                  <q-space/>
                  <div class="col-xs-12 col-sm-3 row justify-end">
                    <div v-if="store.currentStep == 8">
                      <q-btn
                        flat dense
                        icon="download"
                        color="indigo"
                        @click="
                          onClickDowloadFile(
                            'เอกสารแบบ ง',
                            'template-4',
                            'เอกสารแบบ ง'
                          )
                        "
                      >
                        <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
                      >
                    </div>
                    <div>
                      <q-btn
                        v-if="downloadFile6"
                        :href="downloadFile6"
                        target="_blank"
                        class="col-12"
                        flat dense
                        icon="visibility"
                        color="blue"
                      >
                        <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
                      >
                    </div>
                  </div>
                </div>
                <div class="col-12" v-if="store.currentStep == 8"><q-separator /></div>
                <div class="col-12 q-pa-sm" v-if="store.currentStep == 8">                     
                  <div class="row col-12">
                    <q-file
                      ref="fileEvaluation86Ref"
                      v-model="fileEvaluation86"
                      class="col-12"
                      outlined
                      dense
                      hide-bottom-space
                      lazy-rules
                      label="อัปโหลดไฟล์"
                      accept=".pdf"
                      :rules="
                        downloadFile6 === ''
                          ? [(val) => !!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="
                            upLoadFile(
                              'แบบสรุปผลการประเมิน (เอกสารแบบ ง)',
                              fileEvaluation86
                            )
                          "
                          ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
                        >
                      </template>
                    </q-file>
                  </div>
                </div>
              </q-card>
            </div>
          </div>
        </div>
      </q-card>
    </div>
    <div v-if="downloadDocEditUrl != ''" class="col-12">
      <q-card bordered style="border: 1px solid #d6dee1">
        <div class="col-12 row items-center text-weight-medium bg-grey-1 q-py-sm q-px-md">
          <div>เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
          <q-space/>
          <div v-if="downloadDocEditUrl !== ''">
            <q-btn
              :href="downloadDocEditUrl"
              target="_blank"
              class="col-12"
              icon="visibility"
              color="blue"
              flat
              dense
            >
              <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
            >
          </div>
        </div>
      </q-card>
    </div>

    <div v-if="store.currentStep == 8" class="col-12">
      <div align="right">
        <q-btn
          unelevated
          label="ยืนยันผลการพิจารณา"
          color="public"
          @click="confirmApprove"
        />
      </div>
    </div>
  </div>

  <q-dialog v-model="modalConfirm" persistent>
    <q-card style="min-width: 60vw">
      <q-toolbar>
        <q-toolbar-title class="text-subtitle2 text-bold">
          ยืนยันผลการพิจารณา
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="modalConfirm = false"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />
      <q-card-section class="q-pa-md bg-grey-1">
        <div class="row q-col-gutter-sm">
          <div class="col-4">
            <q-input
              v-model="nameOfWork"
              label="ชื่อผลงาน"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-4">
            <q-input
              v-model="nameOfOwner"
              label="ชื่อเจ้าของผลงาน"
              outlined
              dense
              bg-color="white"
            />
          </div>
          <div class="col-4">
            <q-input
              v-model="position"
              label="ตำแหน่งที่ได้รับ"
              outlined
              dense
              bg-color="white"
            />
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <div class="row justify-end q-px-md q-py-sm items-center">
        <q-btn
          dense
          color="public"
          id="onSubmit"
          class="q-px-md q-py-xs"
          label="ยืนยัน"
          @click="confirmApprove"
        >
        </q-btn>
      </div>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
