<script setup lang="ts">
import { NGi, NGrid, NSpace } from 'naive-ui'
import { computed, onMounted, ref } from 'vue'
import { PublishStatus } from '@/enum/business'
import { useRouterPush } from '@/hooks/common/router'
import { fetchGetActivityList } from '@/service/api/competition'
import { useAppStore } from '@/store/modules/app'
import CompetitionCard from '@/views/competition/competition-list/modules/competition-card.vue'

const { routerPushByKey } = useRouterPush()

const appStore = useAppStore()
const gap = computed(() => (appStore.isMobile ? 12 : 26))

const competitionListRef = ref<Api.Competition.CompetitionItem[]>([])

/** 获取活动列表 */
async function fetchActivityList() {
  try {
    const { response, error } = await fetchGetActivityList()
    if (!error) {
      const list = response?.data?.data || []
      competitionListRef.value = list.filter((item: any) => item.PublishStatus === PublishStatus.Processing || item.PublishStatus === PublishStatus.Published)
    }
  }
  catch (e) {
    console.error(e)
  }
}

function toDetail(item: Api.Competition.CompetitionItem) {
  routerPushByKey('results_results-detail', { query: { activityId: item.Id.toString(), roomId: item.RoomID.toString() } })
}

onMounted(() => fetchActivityList())
</script>

<template>
  <NSpace vertical :size="24">
    <!-- 顶部 Header 区域 -->
    <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
      <div>
        <h2 class="m-0 text-xl text-gray-800 font-bold dark:text-white">
          实时结果列表
        </h2>
        <p class="mt-1 text-sm text-gray-500">
          评委将对正在进行的比赛进行打分
        </p>
      </div>
    </div>

    <!-- 卡片列表区域 -->
    <!-- 响应式布局：手机1列，平板2列，中屏3列，大屏4列 -->
    <NGrid :x-gap="gap" :y-gap="gap" responsive="screen" item-responsive>
      <NGi v-for="item in competitionListRef" :key="item.Id" span="24 s:12 m:8 l:6" @click="toDetail(item)">
        <CompetitionCard :item="item" />
      </NGi>
    </NGrid>
  </NSpace>
</template>

<style scoped>
/* 针对不同屏幕微调间距 */
</style>
