<template>
    <div class="race-result">
        <div class="result">
            <div class="resulttitle line1">
                <div class="resultitem">Pos</div>
                <div class="resultitem">Num</div>
                <div class="resultitem">Driver</div>
                <div class="resultitem">Team</div>
                <div class="resultitem">Time</div>
                <div class="resultitem">Pts</div>
            </div>
            <div class="resultrow line2" v-for="data in driverdatas" :key="data.driver_id">
                <div class="resultitem">{{ data.pos }}</div>
                <div class="resultitem">{{ data.car_num }}</div>
                <div class="resultitem">{{ data.name }}</div>
                <div class="resultitem">{{ data.team }}</div>
                <div class="resultitem">{{ data.finish_time }}</div>
                <div class="resultitem">{{ data.score }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

interface Props {
    id: number
}
const driverdatas = ref<any[]>([])
const error = ref('')
const loading = ref(true)
onMounted(async () => {
    try {
        const res = await fetch(`/api/prix/${route.params.id}/race?isSprint=${route.params.type !== 'race'}`)
        const json = await res.json()
        driverdatas.value = Array.isArray(json) ? json : (json?.data ?? [])
    } catch (e) {
        error.value = '加载失败'
    } finally {
        loading.value = false
    }
})
</script>
<style lang="scss" scoped>
.race-result {
    padding-bottom: 20px;
    padding-top: 20px;
}

.result {
    width: 90%;
    background-color: #fff;
    margin: 0 auto;
    padding: 20px 0;
    border-radius: 20px;
}

.resultrow,
.resulttitle {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 10px 0;
}

.resulttitle {
    color: #606066;
}

.resultitem {
    text-align: center;
}

.line1 {
    border-bottom: 2px solid #ccc;
}

.line2 {
    border-bottom: 1px solid #ccc;
}
</style>
