<template>
  <div v-if="displayQuestions.length > 0" class="questions-container">
    <div v-for="(question, index) in displayQuestions" :key="question.id" class="preview-question-item">
      
      <!-- 单选题、多选题、判断题 -->
      <div v-if="question.options" class="question-content">
        <p class="question-title">{{ index + 1 }}. {{ question.title }}</p>
        <div class="options-list">
          <div 
            v-for="(option, optIndex) in question.options" 
            :key="optIndex" 
            class="option-item"
            :class="{ 'correct-option': option.isCorrect }"
          >
            <input 
              :type="['单选题', '判断题'].includes(getQuestionType(question.type)) ? 'radio' : 'checkbox'" 
              :name="['单选题', '判断题'].includes(getQuestionType(question.type)) ? question.id : `${question.id}_${optIndex}`" 
              :disabled="true"
              :checked="option.isCorrect"
            >
            <span class="option-content">{{ String.fromCharCode(65 + optIndex) }}. {{ option.text }}</span>
          </div>
        </div>
      </div>
      
      <!-- 填空题、简答题 -->
      <div v-else class="question-content">
        <p class="question-title">{{ index + 1 }}. {{ question.title }}</p>
        <div class="answer-section">
          <p class="answer-label">正确答案：</p>
          <p class="answer-content">{{ question.correctAnswer }}</p>
        </div>
      </div>
    </div>
    <!-- 如果有更多题目，显示提示 -->
    <div v-if="questions.length > maxQuestions" class="more-questions-hint">
      注：仅显示前 {{ maxQuestions }} 题，共 {{ questions.length }} 题
    </div>
  </div>
  <div v-else class="no-questions">
    暂无预览数据
  </div>
</template>

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

// 定义组件属性
interface Option {
  id: number;
  text: string;
  isCorrect: boolean;
}

interface Question {
  id: number;
  type: number;
  title: string;
  options?: Option[];
  correctAnswer?: string;
  score: number;
}

const props = defineProps<{
  questions: Question[];
  maxQuestions?: number;
}>();

// 设置默认显示题数为5
const maxQuestions = props.maxQuestions || 30;

// 计算要显示的题目
const displayQuestions = computed(() => {
  return props.questions.slice(0, maxQuestions);
});

// 根据类型ID获取题目类型名称
const getQuestionType = (type: number): string => {
  switch(type) {
    case 1: return '单选题';
    case 2: return '多选题';
    case 3: return '判断题';
    case 4: return '填空题';
    case 5: return '简答题';
    default: return '其他题型';
  }
};
</script>

<style scoped>
  .questions-container {
    max-height:600px;
    overflow-y: auto;
    padding-right: 10px;
  }

  .preview-question-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e8eb;
  }

  .preview-question-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .question-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .question-type {
    font-weight: bold;
    color: #303133;
    margin-right: 10px;
  }

  .question-score {
    color: #909399;
    font-size: 14px;
  }

  .question-content {
    margin-left: 20px;
  }

  .question-title {
    font-size: 16px;
    color: #303133;
    margin-bottom: 15px;
    line-height: 1.5;
  }

  .options-list {
    margin-left: 20px;
  }

  .option-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .option-item:hover {
    background-color: #f5f7fa;
  }

  .option-item input[type="radio"],
  .option-item input[type="checkbox"] {
    margin-right: 10px;
  }

  .option-content {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
  }

  .correct-option {
    background-color: #f0f9eb;
    border-left: 3px solid #67c23a;
  }

  .correct-option .option-content {
    color: #303133;
    font-weight: 500;
  }

  .answer-section {
    margin-top: 10px;
    padding: 12px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .answer-label {
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
  }

  .answer-content {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .no-questions {
    text-align: center;
    color: #909399;
    padding: 40px 0;
  }

  .more-questions-hint {
    text-align: center;
    color: #909399;
    font-size: 14px;
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
</style>

