<template>
  <div class="question-preview">
    <div class="p-4 bg-white rounded-lg shadow-sm">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-800">
          试题预览
        </h2>
        <el-button @click="handleBack">返回列表</el-button>
      </div>
      
      <!-- 试题预览内容 -->
      <div v-if="questionData" class="question-content">
        <div class="mb-4">
          <h3 class="text-lg font-medium text-gray-900 mb-2">
            试题内容
          </h3>
          <p class="text-gray-700">{{ questionData.content }}</p>
        </div>
        
        <div class="mb-4">
          <h3 class="text-lg font-medium text-gray-900 mb-2">
            试题信息
          </h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="试题类型">
              {{ getQuestionTypeText(questionData.questionType) }}
            </el-descriptions-item>
            <el-descriptions-item label="难度等级">
              {{ getDifficultyText(questionData.difficulty) }}
            </el-descriptions-item>
            <el-descriptions-item label="所属章节">
              {{ questionData.chapterName }}
            </el-descriptions-item>
            <el-descriptions-item label="分值">
              {{ questionData.score }}分
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      
      <div v-else class="text-center py-10 text-gray-500">
        加载中...
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const id = route.params.id as string;

// 试题数据
const questionData = ref(null);

// 加载试题数据
const loadQuestionData = async () => {
  if (id) {
    // 这里应该调用API获取试题详情
    // 暂时使用模拟数据
    questionData.value = {
      id: id,
      content: '这是一道测试题，用于预览功能展示。',
      questionType: '1',
      difficulty: '2',
      chapterId: '1',
      chapterName: '第一章 基础知识',
      score: 10,
    };
  }
};

// 获取试题类型文本
const getQuestionTypeText = (type) => {
  const typeMap = {
    '1': '单选题',
    '2': '多选题',
    '3': '判断题',
    '4': '填空题',
    '5': '简答题',
  };
  return typeMap[type] || '未知类型';
};

// 获取难度等级文本
const getDifficultyText = (difficulty) => {
  const difficultyMap = {
    '1': '简单',
    '2': '中等',
    '3': '困难',
  };
  return difficultyMap[difficulty] || '未知难度';
};

// 返回列表
const handleBack = () => {
  router.push('/examManage/questionBank');
};

onMounted(() => {
  loadQuestionData();
});
</script>

<style scoped>
.question-preview {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.question-content {
  line-height: 1.6;
}
</style>
