<route lang="jsonc">
{
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "小题详情"
  }
}
</route>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useHomeStore } from '@/store/home'

defineOptions({
  name: 'QuestionDetailPage',
})

// 小题详情数据类型
interface QuestionDetailItem {
  questionNumber: string
  classScoreRate: string
  gradeScoreRate: string
  scoreDifference: string
}

// 使用store
const homeStore = useHomeStore()

// 选中的考试ID
const selectedExamId = ref<number | null>(null)

// 考试选项
const examOptions = computed(() => homeStore.examOptions)

// Mock数据
const questionDetailData = ref<QuestionDetailItem[]>([
  {
    questionNumber: '一1',
    classScoreRate: '16%',
    gradeScoreRate: '42%',
    scoreDifference: '-26%',
  },
  {
    questionNumber: '一2',
    classScoreRate: '16%',
    gradeScoreRate: '16%',
    scoreDifference: '0%',
  },
  {
    questionNumber: '一3',
    classScoreRate: '42%',
    gradeScoreRate: '16%',
    scoreDifference: '26%',
  },
])

// 返回上一页
function goBack() {
  uni.navigateBack()
}

// 考试选择变化处理
function handleExamChange(event: { value: string | number, selectedItem: Record<string, any> }) {
  selectedExamId.value = Number(event.value)
  // TODO: 根据选中的考试ID获取小题详情数据
  console.log('选中考试ID:', event.value)
}

// 查看详情
function viewDetail(item: QuestionDetailItem) {
  // TODO: 跳转到具体小题详情页面或显示详情弹窗
  console.log('查看详情:', item)
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
  })
}

// 页面初始化
onMounted(async () => {
  try {
    // 如果store中没有数据，先获取选项数据
    if (homeStore.examOptions.length === 0) {
      await homeStore.fetchOptions()
    }
    // 设置默认选中第一个考试
    if (homeStore.examOptions.length > 0 && !selectedExamId.value) {
      selectedExamId.value = homeStore.examOptions[0].value
    }
  }
  catch (error) {
    console.error('初始化数据失败:', error)
  }
})
</script>

<template>
  <view class="question-detail-page min-h-screen bg-slate-50">
    <!-- 导航栏 -->
    <wd-navbar placeholder fixed>
      <template #left>
        <div class="flex items-center" @tap="goBack">
          <wd-icon name="arrow-left" size="20px" />
        </div>
      </template>
      <template #title>
        <div class="flex items-center justify-center">
          <text class="text-xs">小题详情 ——</text>
          <wd-drop-menu>
            <wd-drop-menu-item
              v-model="selectedExamId"
              :options="examOptions"
              @change="handleExamChange"
            />
          </wd-drop-menu>
        </div>
      </template>
    </wd-navbar>

    <!-- 主要内容区域 -->
    <view class="p-4">
      <!-- 小题详情表格 -->
      <wd-table :data="questionDetailData" :height="400">
        <wd-table-col prop="questionNumber" label="题号" :width="`${20}%`" fixed />
        <wd-table-col prop="classScoreRate" label="班级得分率" :width="`${20}%`" />
        <wd-table-col prop="gradeScoreRate" label="年级得分率" :width="`${20}%`" />
        <wd-table-col prop="scoreDifference" label="得分率差值" :width="`${20}%`">
          <template #value="{ row }">
            <text
              :class="[
                row.scoreDifference.startsWith('-') ? 'text-red-500'
                : row.scoreDifference === '0%' ? 'text-gray-600' : 'text-green-500',
              ]"
            >
              {{ row.scoreDifference }}
            </text>
          </template>
        </wd-table-col>
        <wd-table-col prop="detail" label="详情" :width="`${20}%`" align="center">
          <template #value="{ row }">
            <wd-icon
              name="view"
              size="18px"
              class="cursor-pointer text-blue-500"
              @tap="viewDetail(row)"
            />
          </template>
        </wd-table-col>
      </wd-table>
    </view>
  </view>
</template>
