<!-- page:detail page สรรหา -->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

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

import genReport from "@/plugins/genreport";

const $q = useQuasar();

const router = useRouter();
const route = useRoute();

const profile_id = ref<string>("");
const birthdate = ref<string>("");
const gender = ref<string>("");
const university = ref<string>("");
const position_name = ref<string>("");
const degree = ref<string>("");
const major = ref<string>("");
const cert_issuedate = ref<string>("");
const examAttribute = ref<string>("");
const examResultinscore = ref<string>("");
const scoreAFull = ref<string>("");
const scoreA = ref<string>("");
const scoreBFull = ref<string>("");
const scoreB = ref<string>("");
const scoreDFull = ref<string>("");
const scoreD = ref<string>("");
const scoreCFull = ref<string>("");
const scoreC = ref<string>("");
const scoreSumFull = ref<string>("");
const scoreSum = ref<string>("");
const examOrder = ref<string>("");
const number = ref<string>("");
const score_expired = ref<string>("");
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const examID = ref<string>("");
const prefix = ref<string>("");
const typeTest = ref<string>("");
const fullname = ref<string>("");
const importId = ref<string>(route.params.id as string); // Period Import Id
const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
const isData = ref<boolean>(false);

/** ดึงข้อมูล */
async function fetchData() {
  isData.value = false;
  showLoader();
  await http
    .get(config.API.getExamDetail(importId.value, examId.value))
    .then((res) => {
      let data = res.data.result;
      if (data != null) {
        profile_id.value = data.profileID;
        examID.value = data.examID;
        prefix.value = data.prefix;
        fullname.value = data.fullName;
        birthdate.value = data.dateOfBirth;
        gender.value = data.gender;
        degree.value = data.degree;
        major.value = data.major;
        university.value = data.university;
        position_name.value = data.positionName;
        cert_issuedate.value = data.certificateIssueDate;
        examAttribute.value = data.examAttribute;
        number.value = data.number;
        examOrder.value = data.examOrder;
        typeTest.value = data.typeTest;

        score_expired.value = data.scoreExpire;
        if (data.scoreResult != null) {
          scoreAFull.value = data.scoreResult.scoreAFull;
          scoreA.value = data.scoreResult.scoreA;
          scoreBFull.value = data.scoreResult.scoreBFull;
          scoreB.value = data.scoreResult.scoreB;
          scoreCFull.value = data.scoreResult.scoreCFull;
          scoreC.value = data.scoreResult.scoreC;
          scoreSumFull.value = data.scoreResult.scoreSumFull;
          scoreSum.value = data.scoreResult.scoreSum;
          examResultinscore.value = data.scoreResult.examResult;
          scoreDFull.value = data.scoreResult.scoreDFull;
          scoreD.value = data.scoreResult.scoreD;
        }
        isData.value = true;
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

async function downloadScore() {
  showLoader();
  await http
    .get(config.API.examReport(importId.value, examId.value))
    .then(async (res) => {
      const data = res.data.result;
      await genReport(data, `ผลคะแนน_${examId.value}.pdf`,'pdf');
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}

async function downloadCertificate() {
  showLoader();
  let type = degree.value.includes("บัณฑิต") ? 2 : 1;
  await http
    .get(config.API.downloadExamReport(importId.value, examId.value, type), {
      responseType: "blob",
    })
    .then((res) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(res.data);
      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
      // start download
      a.click();
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    })
    .finally(() => {
      hideLoader();
    });
}
onMounted(async () => {
  await fetchData();
});
</script>
<template>
  <div class="toptitle text-dark 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)"
    />
    รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
  </div>
  <q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
    <div class="col-12" v-if="!isData">
      <q-banner
        inline-actions
        rounded
        class="bg-amber-2 text-center text-amber-7"
      >
        ไม่พบรายละเอียดการสอบ
      </q-banner>
    </div>

    <div class="row q-col-gutter-md col-12" v-else>
      <div class="col-xs-12 col-sm-12 col-md-6">
        <q-card bordered flat class="col-12 q-pa-md">
          <div class="col-12 q-col-gutter-sm row items-center">
            <div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
            <div class="col-6 text-grey-7" v-if="profile_id !== null">
              เลขประจำตัวประชาชน
            </div>
            <div class="col-6 text-black" v-if="profile_id !== null">
              {{ profile_id ? profile_id : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="prefix !== null">
              คำนำหน้าชื่อนาม
            </div>
            <div class="col-6 text-black" v-if="prefix !== null">
              {{ prefix ? prefix : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="fullname !== null">
              ชื่อ-นามสกุล
            </div>
            <div class="col-6 text-black" v-if="fullname !== null">
              {{ fullname ? fullname : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="birthdate !== null">
              วัน/เดือน/ปี เกิด
            </div>
            <div class="col-6 text-black" v-if="birthdate !== null">
              {{ birthdate ? birthdate : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="gender !== null">เพศ</div>
            <div class="col-6 text-black" v-if="gender !== null">
              {{ gender ? gender : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="position_name !== null">
              ตำแหน่งที่สมัคร
            </div>
            <div class="col-6 text-black" v-if="position_name !== null">
              {{ position_name ? position_name : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="university !== null">
              สถานศึกษา
            </div>
            <div class="col-6 text-black" v-if="university !== null">
              {{ university ? university : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="degree !== null">
              วุฒิการศึกษา
            </div>
            <div class="col-6 text-black" v-if="degree !== null">
              {{ degree ? degree : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="major !== null">
              สาขาวิชาเอก
            </div>
            <div class="col-6 text-black" v-if="major !== null">
              {{ major ? major : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="major !== null">
              ครั้งที่ประกาศรับสมัคร
            </div>
            <div class="col-6 text-black" v-if="major !== null">
              {{ examOrder ? examOrder : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
              ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
            </div>
            <div class="col-6 text-black" v-if="cert_issuedate !== null">
              {{ cert_issuedate ? cert_issuedate : "-" }}
            </div>

            <div class="col-6 text-grey-7" v-if="examAttribute !== null">
              สถานะการคัดกรองคุณสมบัติ
            </div>
            <div class="col-6 text-black" v-if="examAttribute !== null">
              {{ examAttribute ? examAttribute : "-" }}
            </div>
          </div>
        </q-card>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6">
        <q-card
          bordered
          flat
          class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
        >
          <div class="col-12 row q-col-gutter-sm">
            <div class="col-12 text-weight-bold row items-center">
              ผลคะแนนสอบ
              <q-space />
              <q-btn
                color="primary"
                flat
                round
                icon="mdi-download"
                v-if="examResultinscore === 'ผ่าน'"
              >
                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                <q-menu>
                  <q-list style="min-width: 100px">
                    <q-item clickable v-close-popup @click="downloadScore()">
                      <q-item-section class="text-primary"
                        >ดาวน์โหลดผลคะแนน</q-item-section
                      >
                    </q-item>
                    <q-item
                      clickable
                      v-close-popup
                      @click="downloadCertificate()"
                    >
                      <q-item-section class="text-blue"
                        >ดาวน์โหลดเอกสารรับรอง</q-item-section
                      >
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
              <q-btn
                v-else
                color="blue"
                flat
                round
                icon="mdi-download"
                @click="downloadScore()"
              >
                <q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
              </q-btn>
            </div>
            <div class="row items-top q-gutter-y-sm col-12">
              <div class="col-xs-12 col-sm-12 text-weight-medium text-grey-7">
                ประเภท
              </div>

              <div class="col-xs-4 col-sm-5 text-grey-7">
                ภาคความรู้ความสามารถทั่วไป (ภาค ก)
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ typeTest == "bangkok" ? "กทม." : "ก.พ." }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs"></div>
              <div class="col-12">
                <q-separator />
              </div>
              <div
                class="col-xs-4 col-sm-5 text-weight-medium text-grey-7"
              ></div>
              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
                คะแนนเต็ม
              </div>
              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
                คะแนนที่ได้
              </div>
              <div
                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
              ></div>
              <div class="col-xs-4 col-sm-5 text-grey-7">
                ภาคความรู้ความสามารถที่ใช้เฉพาะตำแหน่ง (ภาค ข)
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreAFull ? scoreAFull:'-' }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreA ? scoreA:'-' }}
              </div>
              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>

              <div class="col-xs-12 col-sm-12 text-grey-7">
                ภาคความเหมาะสมกับตำแหน่ง (ภาค ค)
              </div>

              <div class="col-xs-4 col-sm-5 text-grey-7">
                - ทดสอบสมรรถนะ และทดสอบจิตวิทยาฯ
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreCFull ? scoreCFull : "-" }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreC ? scoreC : "-" }}
              </div>
              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
              <div class="col-xs-4 col-sm-5 text-grey-7">- สัมภาษณ์</div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreDFull ? scoreDFull : "-" }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreD ? scoreD : "-" }}
              </div>
              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>

              <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreSumFull ? scoreSumFull : "-" }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreSum ? Number(scoreSum).toFixed(2) : "-" }}
              </div>
              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>

              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
                ผลการสอบ
              </div>
              <div
                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
              >
                <span
                  :class="
                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
                  "
                  >{{ examResultinscore }}</span
                >
              </div>

              <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
              <div class="col-xs-6 col-sm-7 q-pr-xs">
                {{ number ? number : "-" }}
              </div>

              <div class="col-xs-6 col-sm-5 text-grey-7">
                วันหมดอายุบัญชีสอบแข่งขัน
              </div>
              <div class="col-xs-6 col-sm-7 q-pr-xs">
                {{ score_expired ? score_expired : "-" }}
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </q-card>
</template>

<style></style>
