<script setup lang="ts">
import type { Contest } from '../types'
import ContestItem from '../components/ContestItem.vue'
import { getMyContestList, getContestList } from '../api'
let myContestList = $ref<Contest[]>([])
function fetchMyList() {
  getMyContestList().then(res => {
    myContestList = res.data.list
  })
}
let contestList = $ref<Contest[]>([])
function fetchList() {
  getContestList().then(res => {
    contestList = res.data.list
  })
}
onMounted(() => {
  fetchMyList()
  fetchList()
})
</script>

<template>
  <AppCard title="我的赛项">
    <div class="contest-list" v-if="myContestList.length">
      <ContestItem :data="item" v-for="item in myContestList" :key="item.id"></ContestItem>
    </div>
    <el-empty description="暂无数据" v-else />
  </AppCard>
  <AppCard title="可参与赛项">
    <div class="contest-list" v-if="contestList.length">
      <ContestItem :data="item" v-for="item in contestList" :key="item.id"></ContestItem>
    </div>
    <el-empty description="暂无数据" v-else />
  </AppCard>
</template>

<style lang="scss">
.contest-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
</style>
