<template>
  <div class="seasons">
    <div class="intro">
      <h1 style="color:white;">F1 赛季</h1>
      <p style="color:white;">选择一个赛季查看详细赛程与积分榜</p>
    </div>
    <div class="grid">
      <el-card v-for="s in seasons" :key="s.year" class="season-card" shadow="hover">
        <div class="season-header">
          <div class="season-year">{{ s.year }}</div>
          <div class="season-meta">赛事数：{{ s.races }} · 车队：{{ s.teams }}</div>
        </div>
        <div class="season-body">
          <div>车手冠军：{{ s.champion }}</div>
          <div>车队冠军：{{ s.teamChampion }}</div>
        </div>
        <div class="season-actions">
          <el-button type="primary" size="small" @click="goDetail(s.year)">查看详情</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const seasons = ref([
  { year: 2025, races: 24, teams: 10, champion: '待定', teamChampion: '待定' },
  { year: 2024, races: 24, teams: 10, champion: 'Max Verstappen', teamChampion: 'Red Bull Racing' }
])

const goDetail = (year: number) => {
  router.push(`/seasons/${year}`)
}
</script>

<style scoped lang="scss">
.seasons {
  padding: 20px;
}

.intro h1 {
  font-size: 40px;
  font-weight: bolder;
}

.intro p {
  font-size: 20px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.season-card {
  border-radius: 10px;
}

.season-header {
  display: flex;
  justify-content: space-between;
}

.season-year {
  font-size: 28px;
  font-weight: 700;
}

.season-meta {
  font-size: 14px;
  color: #888;
}

.season-body {
  margin-top: 8px;
  display: grid;
  row-gap: 4px;
}

.season-actions {
  margin-top: 12px;
}
</style>
