<template>
  <div class="lottery-detail-page">
    <BackNav />
    <div v-if="lottery" class="detail-card">
      <p class="description">{{ lottery.description }}</p>
      <div class="time-info">
        <span>活动时间：{{ formatDate(lottery.start_time) }} ~ {{ formatDate(lottery.end_time) }}</span>
      </div>
      <h4 class="prizes-title">{{ $t('lottery.prizes') }}</h4>
      <el-table :data="lottery.prizes" size="small">
        <el-table-column prop="name" label="奖品" />
        <el-table-column label="类型" width="100">
          <template #default="{ row }">{{ prizeTypeText(row.type) }}</template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
      </el-table>
      <el-button type="primary" size="large" style="margin-top:24px" @click="register">{{ $t('lottery.register') }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { lotteryApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const route = useRoute()
const lottery = ref<any>(null)

const prizeTypeMap: Record<string, string> = {
  physical: '实物',
  virtual: '虚拟',
  credit: '积分',
}
function prizeTypeText(t: string) { return prizeTypeMap[t] || t }

function formatDate(date: string) {
  if (!date) return '-'
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

onMounted(async () => {
  const res: any = await lotteryApi.getById(Number(route.params.id))
  lottery.value = res.data
})

async function register() {
  await lotteryApi.register(Number(route.params.id))
  ElMessage.success('报名成功')
}
</script>

<style scoped lang="scss">
.lottery-detail-page { padding: 0; }
.detail-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 24px; }
.description { color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; }
.time-info { color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 24px; }
.prizes-title { color: #fff; margin: 24px 0 12px; font-size: 16px; }
</style>
