<template>
  <div class="season-detail">
    <div class="intro">
      <h1 style="color: white;">{{ year }} 赛季</h1>
      <p style="color: white;">赛程与积分榜</p>
    </div>
    <div class="layout">
      <div class="left">
        <h2 style="color: white;">赛程</h2>
        <el-card v-for="r in schedule" :key="r.round" class="race-item" shadow="never">
          <div class="race-line">
            <span class="round">Round {{ r.round }}</span>
            <span class="name">{{ r.name }}</span>
          </div>
          <div class="info-line">
            <div class="meta">{{ r.city }} · {{ r.circuit }}</div>
            <el-button type="primary" size="small" @click="goToRace(r.round)">查看详情</el-button>
          </div>
        </el-card>
      </div>
      <div class="right">
        <h2 style="color: white;">车手积分榜（Top 5）</h2>
        <el-table :data="driverStandings" size="small" stripe>
          <el-table-column prop="ranking" label="#" width="60" />
          <el-table-column prop="driver_name" label="车手" />
          <el-table-column prop="team_name" label="车队" />
          <el-table-column prop="total_score" label="积分" width="100" />
        </el-table>
        <h2 style="color: white;" class="mt">车队积分榜（Top 5）</h2>
        <el-table :data="teamStandings" size="small" stripe>
          <el-table-column prop="ranking" label="#" width="60" />
          <el-table-column prop="team_name" label="车队" />
          <el-table-column prop="total_score" label="积分" width="100" />
        </el-table>
      </div>
    </div>
    <div class="actions">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const year = computed(() => Number(route.params.year))

const scheduleMap: Record<number, Array<{ round: number; name: string; city: string; circuit: string; date: string }>> = {
  2025: [
    { round: 1, name: '澳大利亚大奖赛', circuit: 'Albert Park Circuit', city: 'Melbourne', date: '2025-03-09' },
    { round: 2, name: '中国大奖赛', circuit: 'Shanghai International Circuit', city: 'Shanghai', date: '2025-04-20' },
    { round: 3, name: '日本大奖赛', circuit: 'Suzuka International Racing Course', city: 'Mie Prefecture', date: '2025-04-06' },
    { round: 4, name: '巴林大奖赛', circuit: 'Bahrain International Circuit', city: 'Sakhir', date: '2025-03-23' },
  ],
  2024: [
    { round: 1, name: '巴林大奖赛', city: '萨基尔', circuit: 'Sakhir', date: '2024-03-02' },
    { round: 2, name: '沙特阿拉伯大奖赛', city: '吉达', circuit: 'Jeddah Corniche', date: '2024-03-09' },
    { round: 3, name: '澳大利亚大奖赛', city: '墨尔本', circuit: 'Albert Park', date: '2024-03-24' },
    { round: 4, name: '日本大奖赛', city: '铃鹿', circuit: 'Suzuka', date: '2024-04-07' }
  ]
}

const standingsMap = ref<any>({
  2025: {

  },
  2024: {
    drivers: [
      { ranking: 1, driver_name: 'Max Verstappen', team_name: 'Red Bull', total_score: 575 },
      { ranking: 2, driver_name: 'Lando Norris', team_name: 'McLaren', total_score: 353 },
      { ranking: 3, driver_name: 'Charles Leclerc', team_name: 'Ferrari', total_score: 301 },
      { ranking: 4, driver_name: 'Oscar Piastri', team_name: 'McLaren', total_score: 273 },
      { ranking: 5, driver_name: 'George Russell', team_name: 'Mercedes', total_score: 284 }
    ],
    teams: [
      { ranking: 1, team_name: 'Red Bull Racing', total_score: 860 },
      { ranking: 2, team_name: 'Ferrari', total_score: 552 },
      { ranking: 3, team_name: 'McLaren', total_score: 512 },
      { ranking: 4, team_name: 'Mercedes', total_score: 408 },
      { ranking: 5, team_name: 'Aston Martin', total_score: 208 }
    ]
  }
})

const schedule = computed(() => scheduleMap[year.value] || [])
const driverStandings = computed(() => standingsMap.value[year.value]?.drivers || [])
const teamStandings = computed(() => standingsMap.value[year.value]?.teams || [])
const error = ref('')
onMounted(async () => {
  try {
    const driverRes = await fetch('/api/standings/drivers?season=2025')
    const driverData = await driverRes.json()
    standingsMap.value[2025]['drivers'] = driverData
    const teamRes = await fetch('/api/standings/teams?season=2025')
    const teamData = await teamRes.json()
    standingsMap.value[2025]['teams'] = teamData
    console.log(standingsMap.value[2025])
    console.log(driverStandings.value)
  } catch (e) {
    error.value = '获取积分榜失败'
  }
})


const goBack = () => {
  router.push('/seasons')
}

const goToRace = (id: number) => {
  router.push(`/seasons/${year.value}/races/${id}`)
}
</script>

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

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

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

.layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.race-item {
  margin-bottom: 10px;
}

.race-line,
.info-line {
  display: flex;
  justify-content: space-between;
}

.round {
  font-weight: 700;
}

.name {
  font-weight: 600;
}

.date {
  color: #888;
}

.info-line {
  padding: 10px 0;
}

.meta {
  font-size: 13px;
  color: #666;
}

.mt {
  margin-top: 20px;
}

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