<template>
  <q-card bordered flat class="col-12 row">
    <div class="col-9 q-pa-md q-col-gutter-sm">
      <div class="row">
        <div class="">ชื่อ :</div>
        <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
      </div>
      <div class="row">
        <div class="">เลขประจำตัวประชาชน :</div>
        <div class="text-black text-bold q-pl-sm">{{ citizenId }}</div>
      </div>
      <div class="row">
        <div class="">เลขประจำตัวสอบ :</div>
        <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
      </div>
      <div class="row">
        <div class="">เลขที่นั่งสอบ :</div>
        <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
      </div>
    </div>

    <q-card-section class="col-3">
      <q-img
        v-if="avatar == ''"
        class="rounded-borders"
        src="@/assets/avatar_user.jpg"
        :ratio="1"
      />
      <q-img v-else class="rounded-borders" :src="avatar" :ratio="1" />
    </q-card-section>
  </q-card>
  <q-card bordered flat class="col-12 row q-mt-md">
    <div class="q-pa-md row">
      <div class="row items-center q-gutter-y-sm col-12">
        <div class="col-xs-4 col-sm-5 text-weight-bold 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">
          {{ 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 text-weight-bold">
          รวมทั้งหมด
        </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-4 col-sm-5 q-pr-sm text-grey-7">ลำดับที่สอบได้</div>
        <div class="col-xs-8 col-sm-6 q-pr-xs">
          {{ number }}
        </div>
        <div class="col-xs-4 col-sm-5 q-pr-sm text-grey-7">
          วันหมดอายุบัญชีคัดเลือก
        </div>
        <div class="col-xs-8 col-sm-6 q-pr-xs">
          {{ score_expired == null ? "" : date2Thai(score_expired) }}
        </div>
      </div>
    </div>
  </q-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useDataStore } from "@/stores/data";
import { useQuasar } from "quasar";

const props = defineProps({
  status: {
    type: String,
    required: true,
  },
  candidateId: {
    type: String,
    required: true,
  },
});

const $q = useQuasar();
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const { messageError, date2Thai } = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const fullName = ref<string>("");
const examNumber = ref<string>("");
const citizenId = ref<string>("");
const examSeat = ref<string>("");
const number = ref<string>("");
const scoreBFull = ref<number | null>(null);
const scoreB = ref<number | null>(null);
const scoreCFull = ref<number | null>(null);
const scoreC = ref<number | null>(null);
const scoreSumFull = ref<number | null>(null);
const scoreSum = ref<number | null>(null);
const examResultinscore = ref<string>("");
const avatar = ref<string>("");
const score_expired = ref<Date>(new Date());

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

const fetchCard = async () => {
  loaderPage(true);
  await http
    .get(config.API.candidateCard(props.candidateId))
    .then((res) => {
      const data = res.data.result;
      fullName.value = data.prefix + data.firstName + " " + data.lastName;
      examNumber.value = data.examIdenNumber;
      citizenId.value = data.citizenId;
      examSeat.value = data.seatNumber;
      scoreBFull.value = data.pointTotalB;
      scoreB.value = data.pointB;
      scoreCFull.value = data.pointTotalC;
      scoreC.value = data.pointC;
      if (data.pointB != null && data.pointC != null) {
        scoreSum.value = parseInt(data.pointB) + parseInt(data.pointC);
      } else if (data.pointC != null) {
        scoreSum.value = parseInt(data.pointC);
      } else if (data.pointB != null) {
        scoreSum.value = parseInt(data.pointB);
      } else {
        scoreSum.value = null;
      }
      if (data.pointTotalB != null && data.pointTotalC != null) {
        scoreSumFull.value =
          parseInt(data.pointTotalB) + parseInt(data.pointTotalC);
      } else if (data.pointTotalC != null) {
        scoreSumFull.value = parseInt(data.pointTotalC);
      } else if (data.pointTotalB != null) {
        scoreSumFull.value = parseInt(data.pointTotalB);
      } else {
        scoreSumFull.value = null;
      }
      scoreC.value = data.pointC;
      examResultinscore.value = data.pass;
      avatar.value = data.avatar;
      score_expired.value = new Date(data.announcementDate);
      number.value = data.number;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      loaderPage(false);
    });
};
</script>

<style lang="scss" scoped></style>
