<template>
  <div class="q-px-md">
    <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
      <q-card-section>
        <div class="text-h6 q-py-sm">{{ exam.displayText }} ({{ exam.description }})</div>
        <div class="text-subtitle2 q-py-sm">ประกาศวันที่ {{ date2Thai(exam.createdUtc) }}</div>
        <div class="text-subtitle2 q-py-sm">ประจำปีงบประมาณ {{ exam.budgetYear }}</div>
        <div class="text-subtitle2 q-py-sm">
          เปิดรับสมัครวันที่ {{ date2Thai(exam.startDate) }} - {{ date2Thai(exam.endDate) }}
        </div>
        <div class="text-subtitle2 q-py-sm">ค่าธรรมเนียมการสมัคร {{ exam.fee }} บาท</div>
      </q-card-section>

      <div class="text-subtitle1 text-center text-primary">เอกสารเกี่ยวกับการสอบนี้</div>
      <div class="row justify-start q-pa-md q-col-gutter-md">
        <div
          v-for="file in exam.document"
          :key="file.contentItemId"
          class="col-12"
          :href="`https://localhost:5001${file.file}`"
        >
          <p>
            <a :href="`https://localhost:5001${file.file}`" target="_blank">{{
              file.displayText
            }}</a
            ><br />
          </p>
        </div>
      </div>
    </q-card>
    <div class="col-12">
      <div class="text-h6 q-py-sm">ข้อควรระวัง</div>
      <div class="text-warning q-pb-md">1. ผู้สมัครสามารถสมัครได้เพียงครั้งเดียว</div>
      <div class="text-grey-7 q-pb-md">
        2. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
        จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
      </div>
      <div class="text-grey-7 q-pb-md">
        3. กรุณาตรวจสอบเลขประจำตัวประชาชนของท่านให้ถูกต้อง
        เนื่องจากเลขประจำตัวประชาชนของท่านจะใช้อ้างอิงตลอดการสอบ
      </div>
      <div class="text-grey-7 q-pb-md">
        4. ชื่อ และนามสกุล ที่ท่านกรอกลงใน "ใบสมัครออนไลน์"
        จะต้องเป็นชื่อที่ตรงกับบัตรประจำตัวประชาชน
      </div>
    </div>

    <div class="row justify-center q-pa-md">
      <q-btn color="primary" class="q-ml-md" label="ต่อไป" @click="applyCandidate" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterMixin } from '@/stores/mixin'

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

const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { date2Thai } = mixin

const exam = ref<any>({
  contentItemId: null,
  displayText: 'การสอบภาค ข.พิเศษ สำหรับผู้สอบผ่านของ่วนราชการแล้ว',
  description: 'ครั้งที่2',
  createdUtc: new Date(),
  budgetYear: 2566,
  startDate: new Date(),
  endDate: new Date(),
  fee: 200,
  document: [
    {
      contentItemId: 111,
      file: '111',
      displayText: 'เอกสารเพิ่มเติมเกี่ยวกับการสอบ'
    }
  ]
})

const applyCandidate = async () => {
  await props.fetchStep()
}
</script>

<style scoped></style>
