<template>
  <div class="driver-result">
    <div class="title">
      <h2>{{ driver.name }} 比赛结果</h2>
    </div>
    <div class="result">
      <div class="resulttitle line1">
        <div class="resultitem">大奖赛</div>
        <div class="resultitem">队伍</div>
        <div class="resultitem">位次</div>
        <div class="resultitem">积分</div>
      </div>
      <div class="resultrow line2" v-for="result in driverResults" :key="result.index">
        <div class="resultitem">{{ result.is_sprint ? `${result.prix_name}(sprint)` : result.prix_name }}</div>
        <div class="resultitem">{{ result.team_name }}</div>
        <div class="resultitem">{{ result.position }}</div>
        <div class="resultitem">{{ result.score }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { prixes } from "@/assets/source";
import { computed, onMounted, ref } from 'vue'
import { useDriversStore } from '@/store/SeasonDrivers'

const driversStore = useDriversStore()

interface Props {
  id: number;
}

const props = defineProps<Props>()
const driver = ref<any>({})
const driverResults = ref<any>([])
onMounted(async () => {
  try {
    const res = await fetch(`/api/drivers/${props.id}/results?season=2025`)
    const json = await res.json()
    driverResults.value = Array.isArray(json) ? json : (json?.data ?? [])
    driversStore.ensureDriversLoaded()
    driver.value = driversStore.driversList.find((d: any) => d.id === props.id) ?? {}
  } catch (e) {
    driverResults.value = undefined
  }
})
</script>

<style scoped lang="scss">
.driver-result {
  background-color: #f7f4f1;
  padding-bottom: 20px;
  height: 100vh;
}

.title {
  padding-left: 20px;
  font-size: 25px;
  padding: 8px;
}

.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(4, 1fr);
  padding: 10px 0;
}

.resulttitle {
  color: #606066;
}

.resultitem {
  text-align: center;
}

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

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