<template>
  <div class="q-pa-md shadow-4 rounded-borders cursor-pointer">
    <label class="text-h6 row cursor-pointer">{{ items.title }}</label>
    <label class="text-grey-7 row text-size cursor-pointer"
      >ประกาศวันที่ {{ date2Thai(items.announcementDate) }}</label
    >
    <label class="text-grey-7 row q-my-md text-size cursor-pointer"
      >ครั้งที่ {{ items.registerRound }}</label
    >
    <div class="row justify-between items-end cursor-pointer">
      <label class="text-grey-7 text-size row cursor-pointer"
        >เปิดรับสมัคร {{ date2Thai(items.registerDateStart) }} -
        {{ date2Thai(items.registerDateEnd) }}</label
      >
      <div class="rounded-borders q-pa-sm bg-teal cursor-pointer shadow-2">
        <label class="text-semi text-white text-size cursor-pointer">สมัครสอบ</label>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { PropType } from 'vue'
import { useCounterMixin } from '@/stores/mixin'
import type { ExamCard } from '../interface/index/Main'

const mixin = useCounterMixin()
const { date2Thai } = mixin

const props = defineProps({
  items: {
    type: Object as PropType<ExamCard>,
    required: true
  }
})
</script>
<style lang="scss" scope>
.text-size {
  font-size: 1.2em;
}
</style>
