<template>
  <div class="lotteries-page">
    <BackNav />
    <div class="lottery-grid">
      <div v-for="l in lotteries" :key="l.id" class="lottery-card" @click="$router.push(`/lotteries/${l.id}`)">
        <h3>{{ l.name }}</h3>
        <p>{{ l.description }}</p>
        <p class="time">{{ formatDate(l.start_time) }} ~ {{ formatDate(l.end_time) }}</p>
      </div>
    </div>
    <el-empty v-if="!lotteries.length && !loading" />
    <div class="pagination-wrap" v-if="total > pageSize">
      <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next" @current-change="fetchLotteries" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { lotteryApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const lotteries = ref<any[]>([])
const page = ref(1)
const pageSize = 6
const total = ref(0)
const loading = ref(false)

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}`
}

async function fetchLotteries() {
  loading.value = true
  const res: any = await lotteryApi.list()
  lotteries.value = res.data || []
  total.value = res.pagination?.total || res.data?.length || 0
  loading.value = false
}

onMounted(fetchLotteries)
</script>

<style scoped lang="scss">
.lotteries-page { padding: 0; }
.lottery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.lottery-card {
  background: linear-gradient(135deg, #4e6ef2, #7c5cfc);
  color: #fff; border-radius: 12px; padding: 24px; cursor: pointer; transition: all 0.3s;
  h3 { margin-bottom: 8px; } p { opacity: 0.8; margin-bottom: 8px; } .time { font-size: 13px; }
  &:hover { transform: translateY(-4px); }
}
.pagination-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.pagination-wrap :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-text-color: rgba(255, 255, 255, 0.6);
  --el-pagination-button-disabled-bg-color: rgba(255, 255, 255, 0.04);
  --el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-hover-color: #4e6ef2;
}

.pagination-wrap :deep(.el-pagination .el-pager li) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  margin: 0 4px;
}

.pagination-wrap :deep(.el-pagination .el-pager li:hover),
.pagination-wrap :deep(.el-pagination .el-pager li.is-active) {
  background: #4e6ef2;
  color: #fff;
}

.pagination-wrap :deep(.el-pagination .btn-prev),
.pagination-wrap :deep(.el-pagination .btn-next) {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.pagination-wrap :deep(.el-pagination .btn-prev:hover),
.pagination-wrap :deep(.el-pagination .btn-next:hover) {
  background: rgba(78, 110, 242, 0.2);
  color: #4e6ef2;
}
</style>
