<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '报名考试',
  },
}
</route>
<template>
  <view class="min-h-screen flex flex-col bg-white">
    <!-- 顶部栏 -->

    <!-- 考试信息卡片 -->
    <view class="flex-1 flex items-center justify-center pb-24">
      <view
        class="bg-white rounded-xl shadow-lg p-4 w-full max-w-[300px] mx-8 border border-gray-500"
        style="aspect-ratio: 3/5; min-height: 580px"
      >
        <!-- 1. 地点名 -->
        <view class="mb-2">
          <text class="text-2xl font-bold">{{ examDetail.examName }}</text>
        </view>
        <view class="h-4"></view>
        <!-- 2. 时间 -->
        <view class="mb-2">
          <text class="text-lg text-gray-700">
            {{ formatDate(examDetail.examDate) }} {{ examDetail.startTime }}-{{
              examDetail.endTime
            }}
          </text>
        </view>
        <!-- 3. 空行 -->
        <view class="h-4"></view>
        <view class="h-4"></view>
        <view class="h-4"></view>
        <view class="h-4"></view>
        <!-- 4. 考试人数 -->
        <view class="mb-2">
          <text class="text-lg text-gray-700">考试人数：{{ examDetail.estimatedAttendees }}</text>
        </view>
        <view class="h-4"></view>
        <!-- 5. 考官 -->
        <view class="mb-2">
          <text class="text-lg text-gray-700">考官：{{ examDetail.ExaminersName }}</text>
        </view>
        <view class="h-4"></view>
        <!-- 6. 监督 -->
        <view class="mb-2">
          <text class="text-lg text-gray-700">监督：{{ examDetail.supervisorsName }}</text>
        </view>
        <view class="h-4"></view>
        <!-- 7. 空行 -->
        <view class="h-4"></view>
        <view class="h-4"></view>
        <view class="h-4"></view>
        <!-- 8. 考点名称 -->
        <view class="mb-2">
          <text class="text-lg text-gray-700">{{ examDetail.locationName }}</text>
        </view>
        <!-- 9. 详细地址 -->
        <view>
          <text class="text-sm text-gray-500">
            {{ examDetail.provinceName }}{{ examDetail.cityName }}{{ examDetail.address }}
          </text>
        </view>
      </view>
    </view>

    <!-- 固定底部报名按钮 -->
    <view class="fixed left-0 right-0 bottom-0 bg-white shadow p-4 z-50">
      <button
        class="w-full h-12 rounded-lg text-base font-semibold transition-all duration-200 flex items-center justify-center"
        :class="joined ? 'bg-gray-300 text-gray-500' : 'bg-black text-white hover:bg-gray-800'"
        :disabled="joined"
        @click="submitRegister"
      >
        {{ joined ? '已报名' : '报名' }}
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getCanBookExamInfoAPI, joinExamInfoAPI } from '@/service/exam'

const examDetail = ref<any>({})
const joined = ref(false)

const goBack = () => {
  uni.navigateBack()
}

const submitRegister = async () => {
  if (!examDetail.value.id || joined.value) return
  try {
    const res = await joinExamInfoAPI(examDetail.value.id)
    if (res.code === 0) {
      uni.showToast({ title: '报名成功', icon: 'success' })
      joined.value = true
    } else {
      uni.showModal({
        title: '报名失败',
        content: res.msg || '报名失败',
        showCancel: false,
      })
    }
  } catch (e: any) {
    uni.showModal({
      title: '报名失败',
      content: e?.msg || '报名失败',
      showCancel: false,
    })
  }
}

function formatDate(dateStr: string) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}/${m}/${day}`
}

onLoad(async (options) => {
  if (options.id) {
    try {
      const res = await getCanBookExamInfoAPI(options.id)
      examDetail.value = res.data || {}
      joined.value = !!res.data?.isJoined
    } catch (e) {
      uni.showToast({ title: '获取考试详情失败', icon: 'none' })
    }
  }
})
</script>
