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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const { messageError, showLoader, hideLoader } = useCounterMixin();

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

const formData = reactive<any>({
  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>("");

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);

/**
 * function ดาวน์โหลดไฟล์
 * @param fileName ชื่อไฟล์
 */
async function downloadFile(fileName: string) {
  await http
    .get(
      config.API.meetingFileDowloadbyId(
        "ประเมินเชี่ยวชาญ",
        evaluateId.value,
        fileName
      )
    )
    .then((res) => {
      if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
        downloadFile1.value = res.data.downloadUrl;
      } else if (fileName === "2-แบบแสดงรายละเอียดการเสนอผลงาน") {
        downloadFile2.value = res.data.downloadUrl;
      } else if (
        fileName ===
        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
      ) {
        downloadFile3.value = res.data.downloadUrl;
      } else if (fileName === "4-แบบประเมินคุณลักษณะบุคคล") {
        downloadFile4.value = res.data.downloadUrl;
      } else if (
        fileName === "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"
      ) {
        downloadFile5.value = res.data.downloadUrl;
      } else if (fileName === "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)") {
        downloadFile6.value = res.data.downloadUrl;
      }
    });
}

async function fetchData() {
  await http
    .get(config.API.evaluationSigner(evaluateId.value, 1))
    .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);
    });
}

onMounted(async () => {
  showLoader();
  try {
    await Promise.all([
      fetchData(),
      [
        "1-แบบพิจารณาคุณสมบัติบุคคล",
        "2-แบบแสดงรายละเอียดการเสนอผลงาน",
        "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)",
        "4-แบบประเมินคุณลักษณะบุคคล",
        "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
        "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
      ].forEach(async (fileName) => await downloadFile(fileName)),
    ]);
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
});
</script>

<template>
  <div class="col-xs-12 col-sm-12 col-md-11">
    <div class="toptitle col-12 row items-center">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      <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 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 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-card 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
                        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>
                </q-card>
              </div>

              <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
              <div class="col-6">
                <q-card 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
                        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>
                </q-card>
              </div>

              <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
              <div class="col-6">
                <q-card 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 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>
                </q-card>
              </div>

              <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
              <div class="col-6">
                <q-card 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
                        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>
                </q-card>
              </div>

              <!-- แบบประเมินคุณลักษณะบุคคล -->
              <div class="col-6">
                <q-card 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
                        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>
                </q-card>
              </div>

              <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
              <div class="col-6">
                <q-card 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
                        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>
                </q-card>
              </div>
            </div>
          </div>
        </div>
      </q-card>
    </div>
  </div>
</template>
