<script setup lang="ts">
import type { PropType } from "vue";
import type { PointExam } from "@/modules/05_placement/interface/index/Main";

const props = defineProps({
  data: {
    type: Object as PropType<PointExam>,
    default: {
      pointA: 0,
      pointB: 0,
      pointC: 0,
      pointTotalA: 0,
      pointTotalB: 0,
      pointTotalC: 0,
      point: 0,
      pointTotal: 0,
      examNumber: 0,
      examRound: 0,
      pass: "",
    },
  },
});
</script>
<template>
  <div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
    <q-icon
      name="mdi-briefcase-edit"
      size="1.5em"
      color="grey-5"
      class="q-pr-md"
    />
    <span class="text-bold text-subtitle2">ผลการสอบ</span>
  </div>
  <div class="row q-px-md">
    <div class="col-7">
      <q-card class="card-exam">
        <div class="row q-px-md q-py-sm">
          <div class="col q-pa-xs header-sub-text-exam">
            <div class="q-pb-xs">ประเภท</div>
            <div class="q-pb-xs">ภาค ก</div>
            <div class="q-pb-xs">ภาค ข</div>
            <div class="q-pb-xs">ภาค ค</div>
            <div>รวมทั้งหมด</div>
          </div>
          <div class="col q-pa-xs">
            <div class="header-sub-text-exam-2 q-pb-xs">คะแนนเต็ม</div>
            <div class="sub-text-exam q-pb-xs">
              {{ props.data.pointTotalA }}
            </div>
            <div class="sub-text-exam q-pb-xs">
              {{ props.data.pointTotalB }}
            </div>
            <div class="sub-text-exam q-pb-xs">
              {{ props.data.pointTotalC }}
            </div>
            <div class="sub-text-exam">{{ props.data.pointTotal }}</div>
          </div>
          <div class="col q-pa-xs header-sub-text-exam-2">
            <div class="header-sub-text-exam-2 q-pb-xs">คะแนนที่ได้</div>
            <div class="sub-text-exam q-pb-xs">{{ props.data.pointA }}</div>
            <div class="sub-text-exam q-pb-xs">{{ props.data.pointB }}</div>
            <div class="sub-text-exam q-pb-xs">{{ props.data.pointC }}</div>
            <div class="sub-text-exam q-pb-xs">{{ props.data.point }}</div>
          </div>
        </div>
      </q-card>
    </div>
    <div class="col q-pl-xl">
      <q-card class="q-pt-xs">
        <div class="header-text-right q-px-xs">ผลการสอบ</div>
        <div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
        <div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
        <div class="sub-text-right q-px-xs q-pb-sm">
          {{ props.data.examNumber }}
        </div>
        <div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
        <div class="sub-text-right q-px-xs q-pb-sm">
          {{ props.data.examRound }}
        </div>
      </q-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #4f4f4f;
}

.header-text-right {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #818181;
}

.sub-text-right {
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #000000;
}

.sub-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.0025em;
  color: #35373c;
}

.card-exam {
  border-radius: 5px;
  background: #fafafa;
}

.header-sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #818181;
}

.header-sub-text-exam-2 {
  font-size: 15px;
  font-weight: 500;
  line-height: 150%;
  color: #00aa86;
}

.sub-text-exam {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}
</style>
