<template>
    <div class="qualifying-result">
        <div class="result">
            <div class="resulttitle line1">
                <div class="resultitem">排名</div>
                <div class="resultitem">车号</div>
                <div class="resultitem">车手</div>
                <div class="resultitem">车队</div>
                <div class="resultitem">Q1</div>
                <div class="resultitem">Q2</div>
                <div class="resultitem">Q3</div>
            </div>
            <div class="resultrow line2" v-for="data in driverdatas" :key="data.driver_id">
                <div class="resultitem">{{ data.position }}</div>
                <div class="resultitem">{{ data.car_num }}</div>
                <div class="resultitem">{{ data.name }}</div>
                <div class="resultitem">{{ data.team }}</div>
                <div class="resultitem">{{ data.q1 }}</div>
                <div class="resultitem">{{ data.q2 }}</div>
                <div class="resultitem">{{ data.q3 }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

interface Props {
    id: number
}
const props = defineProps<Props>()
const route = useRoute()
const loading = ref(true)
const error = ref('')

const driverdatas = ref<any[]>([])

onMounted(async () => {
    try {
        const res = await fetch(`/api/prix/${route.params.id}/qualifying?isSprint=${route.params.type!=='qualifying'}`)
        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>
.qualifying-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(7, 1fr);
    padding: 10px 0;
}

.resulttitle {
    color: #606066;
}

.resultitem {
    text-align: center;
}

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

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