<!-- page:detail page สรรหา -->
<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="row q-col-gutter-md col-12">
      <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 }}
            </div>

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

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

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

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

            <div class="col-6 text-grey-7" v-if="examAttribute !== null">
              สถานะการคัดกรองคุณสมบัติ
            </div>
            <div class="col-6 text-black" v-if="examAttribute !== null">
              {{ 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-center q-gutter-y-sm col-12">
              <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 }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreA }}
              </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">
                {{ scoreBFull }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreB }}
              </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">
                {{ scoreCFull }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ 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">
                {{ scoreSumFull }}
              </div>
              <div class="col-xs-3 col-sm-2 q-pr-xs">
                {{ scoreSum }}
              </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 }}
              </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 }}
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </q-card>
</template>
<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";

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 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>("62150001");
const prefix = 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); // เลขประจำตัวสอบ

onMounted(async () => {
  await fetchData();
});

const fetchData = async () => {
  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;
        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;
        }
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const downloadScore = async () => {
  showLoader();
  await http
    .get(config.API.downloadScoreReport(importId.value, examId.value), {
      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((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const downloadCertificate = async () => {
  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((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>

<style></style>
