<script lang="ts" setup>
import { computed, ref } from 'vue'

// 定义接口类型（暂时使用模拟数据）
interface ExamQuestionItem {
  examId: number
  examName: string
  totalQuestions: number
  lowScoreQuestions: number
}

const props = defineProps<{
  selectedSubjectId: number
}>()

// 模拟数据 - 实际接口可用时替换
const examQuestionData = ref<ExamQuestionItem[]>([
  {
    examId: 1,
    examName: '初三年级期末考试',
    totalQuestions: 24,
    lowScoreQuestions: 22,
  },
  {
    examId: 2,
    examName: '初三年级期中考试',
    totalQuestions: 26,
    lowScoreQuestions: 18,
  },
  {
    examId: 3,
    examName: '初三年级月考二',
    totalQuestions: 20,
    lowScoreQuestions: 15,
  },
])

// 根据科目筛选数据（暂时返回全部，实际接口可用时根据科目过滤）
const filteredExamData = computed(() => {
  // TODO: 根据 props.selectedSubjectId 过滤数据
  return examQuestionData.value
})

// 查看详情处理
function handleViewDetail(examId: number) {
  // TODO: 跳转到详情页面
  console.log('查看详情:', examId)
  uni.navigateTo({
    url: `/pages/class-analysis/question-detail?examId=${examId}`,
  })
}

// 获取得分率低的题目百分比
function getLowScorePercentage(item: ExamQuestionItem): number {
  if (item.totalQuestions === 0)
    return 0
  return Math.round((item.lowScoreQuestions / item.totalQuestions) * 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 class="rounded-xl bg-white p-4 shadow-sm">
    <view class="mb-4">
      <text class="text-lg text-slate-800 font-semibold">考试小题概览</text>
    </view>

    <!-- 考试列表 -->
    <view class="space-y-3">
      <view
        v-for="item in filteredExamData"
        :key="item.examId"
        class="border border-gray-200 rounded-lg 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.examName }}</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.totalQuestions }}</text>
              <text>个小题，其中</text>
              <text
                class="font-medium"
                :class="getLowScoreColor(getLowScorePercentage(item))"
              >
                {{ item.lowScoreQuestions }}
              </text>
              <text>个小题得分率低于年级</text>
            </view>
          </view>

          <!-- 查看详情按钮 -->
          <view class="ml-4">
            <wd-button
              type="primary"
              size="small"
              @click="handleViewDetail(item.examId)"
            >
              查看详情
            </wd-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 暂无数据提示 -->
    <view v-if="filteredExamData.length === 0" class="py-8 text-center">
      <text class="text-sm text-gray-500">暂无考试数据</text>
    </view>
  </view>
</template>

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