<template>
  <div class="intro">
    <h1 style="color:white;margin-left: 20px;">F1 Drivers</h1>
    <p style="color:white;margin-left: 20px;">Find the Formula 1 drivers for the 2025 season</p>
  </div>
  <el-skeleton v-if="loading" :rows="4" animated />
  <el-empty v-else-if="error || !drivers.length" description="暂无数据" />
  <div v-else class="showcase">
    <template v-for="driver in drivers" :key="driver.id">
      <div class="card-wrapper" @click="goDriver(driver.id)">
        <DriverCard :name="driver.name" :nation="driver.nation" :num="driver.num" :image="getImage(driver.name)"
          :color="getColor(driver.team)" :team="driver.team" />
      </div>
    </template>
  </div>
  
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import DriverCard from '@/components/DriverCard.vue'
import { getColor, getImage } from '@/assets/source'
import { useDriversStore } from '@/store/SeasonDrivers'

const router = useRouter()
const loading = ref(true)
const error = ref('')
const drivers = ref<any[]>([])
const driversStore = useDriversStore()

onMounted(async () => {
  try {
    driversStore.ensureDriversLoaded()
    drivers.value = driversStore.driversList.map((d: any) => ({
      id: d.id,
      name: d.name,
      team: d.team,
      nation: d.country,
      num: d.carNum,
      birth: d.birthday
    }))
  } catch (e) {
    error.value = '加载失败'
  } finally {
    loading.value = false
  }
})

const goDriver = (id: number) => {
  router.push(`/drivers/${id}`)
}

/* import { drivers } from '@/assets/source' */
</script>

<style lang="scss" scoped>
.intro h1 {
  font-size: 40px;
  font-weight: bolder;
}

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

.showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.card-wrapper:hover {
  cursor: pointer;
}
</style>
