<template>
    <div class="race-result">
        <h1>{{ race?.name }}<br>{{ type }}结果</h1>
        <QualifyingResult v-if="type === 'qualifying' || type === 'sprint-qualifying'" :id="Number(route.params.id)"/>
        <RaceResult v-else-if="type === 'race' || type === 'sprint-race'" :id="Number(route.params.id)"/>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import QualifyingResult from '@/components/QualifyingResult.vue'
import RaceResult from '@/components/RaceResult.vue'

const route = useRoute()
const type = computed(() => route.params.type)
const Races = ref([
    { id: 1, round: 1, name: '澳大利亚大奖赛', circuit: 'Albert Park', city: '墨尔本', date: '2025-03-09', season: 2025, has_sprint: false },
    { id: 4, round: 4, name: '巴林大奖赛', circuit: 'Jeddah Corniche', city: '吉达', date: '2025-03-23', season: 2025, has_sprint: false },
    { id: 3, round: 3, name: '日本大奖赛', circuit: '铃鹿赛道', city: '铃鹿', date: '2025-04-06', season: 2025, has_sprint: false },
    { id: 2, round: 2, name: '中国大奖赛', circuit: '上汽国际', city: '上海', date: '2025-04-20', season: 2025, has_sprint: true }
])

const race = computed(() => Races.value.find((d: any) => d.id === Number(route.params.id)))
</script>
<style lang="scss" scoped>
.race-result {
    background-color: #f7f4f1;
    padding: 8px;
}

h1 {
    text-align: center;
}
</style>