<template>
  <div>
    <div class="q-pa-md row items-center justify-center">
      <q-card style="max-width: 40%; width: 100%" bordered>
        <q-card-actions class="q-pa-md" :class="getClass(status)">
          <div v-if="status == false" class="text-black text-bold">
            เจ้าหน้าที่กำลังตรวจสถานที่สอบ
          </div>
          <div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
          <q-space />
          <q-btn size="12px" flat round color="primary" @click="download" icon="mdi-download">
            <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
          </q-btn>
        </q-card-actions>

        <q-separator />

        <q-card-section horizontal>
          <q-card-section class="col-8 q-pt-xs">
            <div class="text-bold">บัตรประจำตัวผู้สอบ</div>
            <div class="q-pt-xs row">
              <div class="">ชื่อ :</div>
              <div class="text-black text-bold">{{ fullName }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">เลขประจำตัวสอบ :</div>
              <div class="text-black text-bold">{{ examNumber }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">เลขประจำตัวประชาชน :</div>
              <div class="">{{ citizenId }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">เวลาสอบ :</div>
              <div class="">{{ examTime }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">สถานที่สอบ :</div>
              <div class="">{{ examLocation }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">ชั้นที่ :</div>
              <div class="">{{ floor }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">ห้องสอบ :</div>
              <div class="">{{ examRoom }}</div>
            </div>
            <div class="q-pt-xs row">
              <div class="">เลขที่นั่ง :</div>
              <div class="">{{ seatNumber }}</div>
            </div>
          </q-card-section>

          <q-card-section class="col-4 flex flex-center">
            <q-img
              class="rounded-borders"
              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
              :ratio="1"
              style="max-width: 300px; max-height: 300px"
            />
          </q-card-section>
        </q-card-section>
      </q-card>
    </div>
    <!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

const fullName = ref<string>('นางพิมพ์ภา วงศ์สวัสดิ์')
const examNumber = ref<string>('CDE-004')
const citizenId = ref<string>('1100700954521')
const examTime = ref<string>('09:00-12:00')
const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเทพฯและนนทบุรี')
const floor = ref<string>('4')
const examRoom = ref<string>('CB-706')
const seatNumber = ref<string>('75')
const status = ref<boolean>(true)

const download = () => {}
const testChangeStatus = () => {
  status.value = true
}
const getClass = (val: boolean) => {
  return val == true ? 'bg-green-4' : 'bg-yellow-3'
}
</script>

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