<script lang="ts" setup>
import type { ExamQuestionStat } from '@/service/types'

const props = defineProps<{
  dataList: ExamQuestionStat[]
}>()

// 查看详情处理
function handleViewDetail(examId: number) {
  uni.navigateTo({
    url: `/pages/class-analysis/question-detail?examId=${examId}`,
  })
}

// 获取得分率低的题目百分比
function getLowScorePercentage(item: ExamQuestionStat): number {
  if (!item.question_count)
    return 0
  return Math.round(((item.score_rate_lower_count || 0) / item.question_count) * 100)
}

// 根据低分率获取颜色
function getLowScoreColor(percentage: number): string {
  if (percentage >= 80)
    return 'text-red-600'
  if (percentage >= 60)
    return 'text-orange-600'
  if (percentage >= 40)
    return 'text-yellow-600'
  return 'text-green-600'
}
</script>

<template>
  <view v-if="dataList.length" class="space-y-3">
    <view
      v-for="item in dataList"
      :key="item.exam_id"
      class="border border-gray-200 rounded-lg bg-white p-4"
    >
      <view class="flex items-center justify-between">
        <view class="flex-1">
          <!-- 考试名称 -->
          <view class="mb-2">
            <text class="text-xs text-gray-800 font-medium">{{ item.exam_name }}</text>
          </view>

          <!-- 小题统计信息 -->
          <view class="flex items-center gap-1 text-gray-600" style="font-size: 12px;">
            <text>本次考试共</text>
            <text class="text-blue-600 font-medium">{{ item.question_count }}</text>
            <text>个小题，其中</text>
            <text
              class="font-medium"
              :class="getLowScoreColor(getLowScorePercentage(item))"
            >
              {{ item.score_rate_lower_count }}
            </text>
            <text>个小题得分率低于年级</text>
          </view>
        </view>

        <!-- 查看详情按钮 -->
        <view class="ml-4">
          <wd-button
            type="primary"
            size="small"
            @click="handleViewDetail(item.exam_id!)"
          >
            查看详情
          </wd-button>
        </view>
      </view>
    </view>
  </view>
  <view v-else class="py-8 text-center">
    <text class="text-sm text-gray-500">暂无考试数据</text>
  </view>
</template>

<style lang="scss" scoped>
// 自定义样式
</style>
