<template>
  <div class="team-result">
    <div class="title">
      <h2>{{ team.name }} 比赛结果</h2>
    </div>
    <div class="result">
      <div class="resulttitle line1">
        <div class="resultitem">大奖赛</div>
        <div class="resultitem">积分</div>
      </div>
      <div class="resultrow line2" v-for="prix in teamtt" :key="prix.id">
        <div class="resultitem">{{ prix.prix_name }}</div>
        <div class="resultitem">{{ prix.total_score }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
interface props {
    id: number;
}

const props = defineProps<props>()

let team = ref<any>({})
const teamtt = ref<any>([])

onMounted(async () => {
  try {
    const res = await fetch('/api/teams')
    const json = await res.json()
    const list = Array.isArray(json) ? json : (json?.data ?? [])
    team.value = list.find((d: any) => d.id === props.id) ?? {} // TODO:后续获取team的比赛信息而不是单纯的teams
    const ttres = await fetch(`/api/teams/${props.id}/results?season=2025`)
    const ttjson = await ttres.json()
    teamtt.value = Array.isArray(ttjson) ? ttjson : (ttjson?.data ?? [])
  } catch (e) {
    team.value = undefined
  }
})
</script>

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

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

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

.resulttitle {
  color: #606066;
}

.resultitem {
  text-align: center;
}

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

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