<!-- 题目选择组件 -->
<script lang="ts" setup>
import { computed } from 'vue'
import { DictCode, useDict } from '@/composables/useDict'

defineOptions({
  name: 'QuestionTabs',
})

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  questionTabs: () => [],
})

const emit = defineEmits<Emits>()

// 通用题目接口
export interface QuestionTabItem {
  /** 题目ID */
  id: number
  /** 题目名称 */
  name: string
  /** 评价方法 */
  evaluate_method: string
  /** 大题号 */
  questionMajor?: string
  /** 小题号 */
  questionMinor?: string
  /** 总分 */
  totalScore?: number
  /** 平均分 */
  averageScore?: number
  /** 最高分 */
  maxScore?: number
  /** 最低分 */
  minScore?: number
}

// Props
interface Props {
  /** 题目数据 */
  questionTabs?: QuestionTabItem[]
  /** 当前选中的题目ID */
  activeQuestionId?: number
  /** 加载状态 */
  loading?: boolean
  /** 错误状态 */
  error?: any
}

// Emits
interface Emits {
  (e: 'change', questionId: number): void
  (e: 'retry'): void
}

const { getDictOptionsAndGetLabel } = useDict()
const [, getEvaluateMethodLabel] = getDictOptionsAndGetLabel(DictCode.EVALUATE_METHOD)

// 当前选中的选项卡
const activeTab = computed(() => {
  return `question-${props.activeQuestionId}`
})

// 当前选中的题目数据
const currentQuestion = computed(() => {
  return props.questionTabs.find(q => q.id === props.activeQuestionId)
})

// 切换题目
function handleTabChange(tabInfo: { index: number, name: string }) {
  const questionId = Number(tabInfo.name.replace('question-', ''))
  emit('change', questionId)
}
</script>

<template>
  <view class="question-tabs-container">
    <!-- 加载状态 -->
    <view v-if="loading" class="bg-white p-4">
      <view class="flex items-center justify-center">
        <wd-loading size="16" />
        <text class="ml-2 text-sm text-gray-500">加载题目中...</text>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else-if="error" class="bg-white p-4">
      <view class="text-center">
        <text class="mb-2 block text-sm text-red-500">题目加载失败</text>
        <wd-button type="primary" size="small" @click="emit('retry')">
          重试
        </wd-button>
      </view>
    </view>

    <!-- 题目选项卡 -->
    <view v-else class="bg-white">
      <wd-tabs
        :active="activeTab"
        class="question-tabs"
        swipeable
        @change="handleTabChange"
      >
        <wd-tab
          v-for="question in questionTabs"
          :key="question.id"
          :name="`question-${question.id}`"
          :title="`${question.name} (${getEvaluateMethodLabel(question.evaluate_method)})`"
        />
      </wd-tabs>
    </view>

    <!-- 暂无数据 -->
    <view v-if="!loading && !error && questionTabs.length === 0" class="bg-white p-8 text-center">
      <text class="text-sm text-gray-500">暂无题目数据</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.question-tabs-container {
  :deep(.wd-tab) {
    font-size: 14px;
    white-space: nowrap;
  }
}
</style>
