reader-star/apps/admin/src/views/user/analysis/index.vue

<script setup lang="ts">
import { NImage } from 'naive-ui'
import { computed, onBeforeUnmount, ref } from 'vue'
import { useRoute } from 'vue-router'
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
import { useRouterPush } from '@/hooks/common/router'
import { fetchCheckNextStep, fetchGetCurrentQuestion, fetchGetGameStatistics } from '@/service/api/game'
import { useCompetitionStore } from '@/store/modules/competition'

const store = useCompetitionStore()

const { routerPushByKey } = useRouterPush()
const route = useRoute()
const activityId = computed(() => route.query?.activityId as string)
const groupsId = computed(() => route.query?.groupsId as string)
const teamId = computed(() => route.query?.teamId as string)
const teamIds = computed(() => route.query?.teamIds as string)
const currentQuestionMainInfo = computed(() => store.currentQuestionMainInfo)
const currentQuestionDetail = computed(() => store.currentQuestionDetail)

const TeamGroup_QuestionID = computed(() => currentQuestionMainInfo.value?.TeamGroup_QuestionID || 0)
const QuestionID = computed(() => currentQuestionMainInfo.value?.Activity_Question.ID || 0)
const QuestionDetailID = computed(() => currentQuestionDetail.value?.Id || 0)

const zoomedImage = ref<string | null>(null)
const isCompleted = ref(false)
const showNextBtn = ref(false)

const teams = ref<any[]>([])

function handleBack() {
  routerPushByKey('user_game', {
    query: {
      activityId: activityId.value,
      groupsId: groupsId.value,
      teamId: teamId.value,
      teamIds: teamIds.value,
    },
  })
}

function handleNext() {
  if (isCompleted.value) {
    routerPushByKey('user_groups', {
      query: {
        activityId: activityId.value,
      },
    })
    return
  }

  routerPushByKey('user_draw', {
    query: {
      activityId: activityId.value,
      groupsId: groupsId.value,
      teamId: teamId.value,
      teamIds: teamIds.value,
      RoundType: Number(currentQuestionMainInfo.value?.Activity_Question.RoundType) || 0,
    },
  })
  // 清空当前题目信息
  store.initData()
}

/**
 *  获取题目详情
 * 检测是否还有题可以抽取，如果data为0，则提示没有题可抽取
 */
async function initQuestions() {
  if (!activityId.value)
    return

  try {
    const { data: outlineData, error } = await fetchGetCurrentQuestion({
      ActivityID: Number(activityId.value),
      GroupID: Number(groupsId.value),
      RoundType: (currentQuestionMainInfo.value?.Activity_Question.RoundType) || 0,
    })
    // eslint-disable-next-line no-console
    console.log(outlineData, 'outlineData')
    if (error) {
      window?.$message?.error(error.message)
    }
    isCompleted.value = outlineData?.data?.IsCompleted || false
  }
  catch (error) {
    window.$message?.error('获取题目失败，请重试')
    console.error(error)
  }
}

const timer = ref<ReturnType<typeof setInterval> | undefined>(undefined)
const statisticsTimer = ref<ReturnType<typeof setInterval> | undefined>(undefined)

/** 定时刷新 检查评委是否已经完成打分，是否可以下一步 fetchCheckNextStep */
async function checkNextStep() {
  if (!activityId.value || !groupsId.value)
    return

  try {
    const { data: nextStepData, error } = await fetchCheckNextStep(TeamGroup_QuestionID.value || 0)
    // eslint-disable-next-line no-console
    console.log(nextStepData, 'nextStepData')
    if (error) {
      window?.$message?.error(error.message)
    }
    const isUse = nextStepData?.data?.IsUse || false
    showNextBtn.value = isUse
    if (isUse) {
      await initQuestions()
      clearInterval(timer.value)
    }
  }
  catch (error) {
    window.$message?.error('检查是否可以下一步失败，请重试')
    console.error(error)
  }
}

/** 获取游戏现场统计结果 */
async function fetchGetGameStatisticsData() {
  if (store.currentQuestionInfo && store.currentQuestionDetail) {
    try {
      const _params = {
        TeamGroupID: Number(groupsId.value),
        QuestionID: Number(QuestionID.value),
        QuestionDetaiID: Number(QuestionDetailID.value),
      }
      const { data } = await fetchGetGameStatistics(_params)
      const rawTeams = (data?.data as any[]) || []

      // 为每个队伍的图片 URL 添加时间戳，防止缓存
      teams.value = rawTeams.map((team) => {
        if (team.UserAnswerPicture) {
          const timestamp = Date.now()
          const separator = team.UserAnswerPicture.includes('?') ? '&' : '?'
          team.UserAnswerPicture = `${team.UserAnswerPicture}${separator}_t=${timestamp}`
        }
        return team
      })
    }
    catch (error: any) {
      console.error('Failed to fetch game statistics', error)
      window.$message?.error(error.message || '获取游戏现场统计结果失败')
    }
  }
}

// 定时刷新 检查是否可以下一步
timer.value = setInterval(checkNextStep, 3000)
// 定时刷新 游戏统计数据
statisticsTimer.value = setInterval(fetchGetGameStatisticsData, 3000)

/** 销毁 定时刷新 检查是否可以下一步 */
onBeforeUnmount(() => {
  clearInterval(timer.value)
  clearInterval(statisticsTimer.value)
})
</script>

<template>
  <CompetitionLayout
    :show-title="true" :show-back="false" :show-next="showNextBtn" :title-bg-type="3" title-text-color="#ffffff" title="答题图解" action-position="top"
    back-btn-text="返回" :next-btn-text="isCompleted ? '该组已完成，回到选组' : '下一题'" btn-theme="light" @back="handleBack"
    @next="handleNext"
  >
    <div class="relative h-full w-full flex flex-col items-center px-12 pt-10 font-sans">
      <!-- Content -->
      <div class="w-full flex flex-col flex-1 overflow-hidden">
        <div class="mb-2 text-xl text-red-600 font-bold">
          备注：评委正在评分中，请等待。。。
        </div>

        <div v-if="teams && teams.length > 0" class="grid grid-cols-4 h-full gap-6 pb-8">
          <div
            v-for="team in teams" :key="team.id"
            class="flex flex-col border-2 border-gray-200 rounded-xl bg-white/90 p-4 shadow-sm"
          >
            <div
              class="mb-3 flex items-center gap-2 rounded-full from-sky-300 to-cyan-200 bg-gradient-to-r px-4 py-2 shadow-sm"
            >
              <span class="text-lg text-white font-bold drop-shadow">{{ team.TeamName }}</span>
              <span class="rounded-full bg-orange-100/60 px-5 py-2 text-sm">
                AI评分 <span class="text-md text-orange-600 font-bold">{{ team.Points }}</span>
              </span>
              <span class="rounded-full bg-green-100/60 px-5 py-2 text-sm">
                评委评分 <span class="text-md text-green-600 font-bold">{{ team.ResultPotins }}</span>
              </span>
            </div>

            <!-- Answer Image Area -->
            <div class="relative mb-4 flex-1 overflow-hidden border border-gray-300 rounded bg-gray-50">
              <!-- Grid Background Simulation -->
              <div class="pointer-events-none absolute inset-0 grid grid-cols-8 gap-px bg-gray-200 opacity-20">
                <!-- <div v-for="n in 64" :key="n" class="bg-white" /> -->
              </div>
              <NImage :src="team.UserAnswerPicture" class="h-full w-full" object-fit="contain" />
            </div>

            <!-- Stats & Score -->
            <!-- <div class="flex flex-col gap-2">
              <div class="text-sm text-gray-700 font-medium">
                写了数量{{ team.writtenCount }}，正确{{ team.correctCount }}个，积分{{ team.score }}
              </div>
            </div> -->
          </div>
        </div>
      </div>

      <!-- Zoom Modal -->
      <div
        v-if="zoomedImage" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
        @click="zoomedImage = null"
      >
        <div class="relative max-h-[90vh] max-w-[90vw] p-4">
          <img :src="zoomedImage" class="max-h-full max-w-full rounded bg-white shadow-2xl" alt="Zoomed Answer">
          <div class="absolute bottom-4 left-1/2 text-sm text-white/80 -translate-x-1/2">
            点击任意处关闭
          </div>
        </div>
      </div>
    </div>
  </CompetitionLayout>
</template>

<style scoped>
/* Custom Scrollbar for content if needed */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
</style>