<template>
  <div class="exam-page">
    <!-- 练习中心标题 -->
    <div class="banner-section">
      <div class="banner-container">
        <img src="/banners/考前须知.png" alt="考前须知" class="banner-image" />
      </div>
      <div class="banner-text">
        <h2>考试中心</h2>
        <p>涵盖多种题型，全方位考核，AI智能阅卷</p>
      </div>
    </div>





    <!-- 课程信息导航 -->
    <div class="course-info-nav">
      <div class="container">
        <div class="nav-content">
          <div class="nav-left">
            <span class="nav-title">{{ courseName }}</span>
            <span class="nav-separator">></span>
            <span class="nav-item">{{ examName }}</span>
          </div>
          <div class="nav-right">
            <span class="question-type-item" :class="{ 'active': currentQuestionType === '单选题' }">单选 ({{
              questionsByType['单选题'].length }})</span>
            <span class="type-separator">|</span>
            <span class="question-type-item" :class="{ 'active': currentQuestionType === '多选题' }">多选 ({{
              questionsByType['多选题'].length }})</span>
            <span class="type-separator">|</span>
            <span class="question-type-item" :class="{ 'active': currentQuestionType === '判断题' }">判断 ({{
              questionsByType['判断题'].length }})</span>
            <span class="type-separator">|</span>
            <span class="question-type-item" :class="{ 'active': currentQuestionType === '填空题' }">填空 ({{
              questionsByType['填空题'].length }})</span>
            <span class="type-separator">|</span>
            <span class="question-type-item" :class="{ 'active': currentQuestionType === '简答题' }">简答 ({{
              questionsByType['简答题'].length }})</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 练习主体内容 -->
    <div class="exam-main" v-if="!examFinished">
      <div class="container">
        <div class="exam-layout">
          <!-- 左侧导航 -->
          <div class="exam-sidebar">
            <!-- 练习题目 -->
            <div class="answer-sheet" :class="{ 'disabled': examSubmitted }">
              <div class="answer-sheet-header">
                <h4>练习题目</h4>
                <span class="progress-text">{{ String(currentQuestionIndex + 1).padStart(2, '0') }}<span>/{{
  String(questions.length).padStart(2, '0') }}</span></span>
              </div>
              <div class="question-grid">
                <!-- 单选题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>单选 ({{ questionsByType['单选题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['单选题']" :key="question.id" class="answer-card-number"
                      :class="[getQuestionStatus(question.id - 1), { 'disabled': examSubmitted }]"
                      @click="handleQuestionClick(question.id - 1)">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 多选题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>多选 ({{ questionsByType['多选题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['多选题']" :key="question.id" class="answer-card-number"
                      :class="[getQuestionStatus(question.id - 1), { 'disabled': examSubmitted }]"
                      @click="handleQuestionClick(question.id - 1)">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 判断题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>判断 ({{ questionsByType['判断题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['判断题']" :key="question.id" class="answer-card-number"
                      :class="[getQuestionStatus(question.id - 1), { 'disabled': examSubmitted }]"
                      @click="handleQuestionClick(question.id - 1)">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 填空题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>填空 ({{ questionsByType['填空题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['填空题']" :key="question.id" class="answer-card-number"
                      :class="[getQuestionStatus(question.id - 1), { 'disabled': examSubmitted }]"
                      @click="handleQuestionClick(question.id - 1)">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 简答题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>简答 ({{ questionsByType['简答题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['简答题']" :key="question.id" class="answer-card-number"
                      :class="[getQuestionStatus(question.id - 1), { 'disabled': examSubmitted }]"
                      @click="handleQuestionClick(question.id - 1)">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 答题状态说明 -->
              <div class="answer-legend">
                <div class="legend-item">
                  <div class="legend-icon unanswered"></div>
                  <span class="legend-text">只看错题</span>
                </div>
              </div>

              <!-- 练习控制按钮 -->
              <div class="submit-section">
                <button class="btn-pause-practice" :class="{ 'paused': isPaused }" @click="pausePractice">
                  {{ isPaused ? '恢复练习' : '暂停练习' }}
                </button>
                <button class="btn-end-practice" @click="endPractice">
                  结束练习
                </button>
              </div>
            </div>
          </div>

          <!-- 右侧题目内容 -->
          <div class="exam-content">
            <div class="question-card" v-if="currentQuestion && !examFinished">
              <div class="question-header">
                <span class="question-title-info">{{ String(currentQuestionIndex + 1).padStart(2, '0') }}【{{
                  getQuestionTypeShort(currentQuestion.type) }}】<span>{{ currentQuestion.score }}分</span></span>
              </div>

              <div class="question-content">
                <div class="question-title">
                  {{ currentQuestion.title }}
                </div>

                <!-- 选择题选项 -->
                <div
                  v-if="currentQuestion.type === '单选题' || currentQuestion.type === '多选题' || currentQuestion.type === '判断题'"
                  class="question-options">
                  <div v-for="(option, index) in currentQuestion.options" :key="index" class="option-item"
                    :class="{ 'selected': isOptionSelected(index) }" @click="selectOption(index)">
                    <div class="option-checkbox">
                      <input type="checkbox" :name="`question-${currentQuestionIndex}`"
                        :checked="isOptionSelected(index)" @change="handleCheckboxClick(index, $event)"
                        @click="handleCheckboxClick(index, $event)">
                    </div>
                    <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                    <span class="option-text">{{ option }}</span>
                  </div>

                  <!-- 答案解析 -->
                  <div v-if="showAnswerExplanation[currentQuestionIndex]" class="answer-explanation">
                    <div class="explanation-header">
                      <div class="result-indicator"
                        :class="{ 'correct': questionResults[currentQuestionIndex], 'incorrect': !questionResults[currentQuestionIndex] }">
                        {{ questionResults[currentQuestionIndex] ? '回答正确' : '回答错误' }}
                      </div>
                      <div class="answer-details">
                        <span class="correct-answer">{{ getCorrectAnswerText() }}</span>
                        <span class="user-answer">{{ getUserAnswerText() }}</span>
                      </div>
                    </div>
                    <div class="explanation-content">
                      <h4>答案解析:</h4>
                      <p>{{ currentQuestion.explanation }}</p>
                    </div>
                  </div>
                </div>

                <!-- 填空题输入框 -->
                <div v-else-if="currentQuestion.type === '填空题'" class="fill-blank">
                  <div class="fill-item" v-for="(_, index) in currentQuestion.blanks || [1]" :key="index">
                    <span class="fill-number">{{ index + 1 }}.</span>
                    <input type="text" :value="getFillAnswer(currentQuestionIndex, index)"
                      @input="setFillAnswer(currentQuestionIndex, index, $event.target.value)" placeholder=""
                      class="fill-input" />
                  </div>
                  <div class="fill-hint">
                    *请在上方输入框内输入填空内容
                  </div>

                  <!-- 填空题答案解析 -->
                  <div v-if="showAnswerExplanation[currentQuestionIndex]" class="answer-explanation">
                    <div class="explanation-header">
                      <div class="result-indicator"
                        :class="{ 'correct': questionResults[currentQuestionIndex], 'incorrect': !questionResults[currentQuestionIndex] }">
                        {{ questionResults[currentQuestionIndex] ? '回答正确' : '回答错误' }}
                      </div>
                      <div class="answer-details">
                        <span class="correct-answer">{{ getCorrectAnswerText() }}</span>
                        <span class="user-answer">{{ getUserAnswerText() }}</span>
                      </div>
                    </div>
                    <div class="explanation-content">
                      <h4>答案解析:</h4>
                      <p>{{ currentQuestion.explanation }}</p>
                    </div>
                  </div>
                </div>

                <!-- 简答题文本域 -->
                <div v-else-if="currentQuestion.type === '简答题'" class="essay-answer">
                  <div class="essay-container">
                    <textarea :value="essayAnswers[currentQuestionIndex]"
                      @input="handleEssayAnswerChange(currentQuestionIndex, $event.target.value)" placeholder=""
                      class="essay-textarea" rows="8" maxlength="500"></textarea>
                  </div>
                  <div class="essay-footer">
                    <div class="essay-hint">
                      *请在上方输入框内输入填空内容
                    </div>
                    <div class="essay-counter">
                      {{ getEssayLength(currentQuestionIndex) }}/500
                    </div>
                  </div>

                  <!-- 简答题答案解析 -->
                  <div v-if="showAnswerExplanation[currentQuestionIndex]" class="answer-explanation">
                    <div class="explanation-header">
                      <div class="result-indicator"
                        :class="{ 'correct': questionResults[currentQuestionIndex], 'incorrect': !questionResults[currentQuestionIndex] }">
                        {{ questionResults[currentQuestionIndex] ? '回答正确' : '回答错误' }}
                      </div>
                      <div class="answer-details">
                        <span class="correct-answer">{{ getCorrectAnswerText() }}</span>
                        <span class="user-answer">{{ getUserAnswerText() }}</span>
                      </div>
                    </div>
                    <div class="explanation-content">
                      <h4>答案解析:</h4>
                      <p>{{ currentQuestion.explanation }}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="question-navigation">
                <button class="btn-nav btn-prev" @click="previousQuestion" :disabled="currentQuestionIndex === 0">
                  上一题
                </button>
                <button class="btn-nav btn-next" @click="nextQuestion">
                  下一题
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认交卷对话框 -->
    <div class="confirm-dialog-overlay" v-if="showConfirmDialog" @click="cancelSubmit">
      <div class="confirm-dialog" @click.stop>
        <div class="dialog-content">
          <p class="dialog-message">{{ confirmDialogMessage }}</p>
          <div class="dialog-buttons">
            <button class="btn-cancel" @click="cancelSubmit">否</button>
            <button class="btn-cancel" @click="confirmSubmit">是</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 时间到提示对话框 -->
    <div class="time-up-overlay" v-if="showTimeUpDialog">
      <div class="time-up-dialog">
        <div class="time-up-content">
          <div class="time-up-image">
            <img src="/images/examination/time-up.png" alt="时间到" class="time-up-img" />
          </div>
          <p class="time-up-message">时间到，已自动为您提交答题卡！</p>
          <!-- <button class="btn-confirm" @click="goToResult">确定</button> -->
        </div>
      </div>
    </div>

    <!-- 练习结果 -->
    <div class="exam-result" v-if="examFinished">
      <div class="container">
        <div class="exam-layout">
          <!-- 左侧答题卡保持不变 -->
          <div class="exam-sidebar">

            <!-- 答题卡 -->
            <div class="answer-sheet" :class="{ 'disabled': examSubmitted }">
              <div class="answer-sheet-header">
                <h4>答题卡</h4>
                <span class="progress-text">
                  <span class="progress-current">{{ String(questions.length).padStart(2, '0') }}</span>
                  <span class="progress-total">/{{ String(questions.length).padStart(2, '0') }}</span>
                </span>
              </div>
              <div class="question-grid">
                <!-- 单选题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>单选 ({{ questionsByType['单选题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['单选题']" :key="question.id"
                      class="answer-card-number answered" :class="{ 'disabled': examSubmitted }">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 多选题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>多选 ({{ questionsByType['多选题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['多选题']" :key="question.id"
                      class="answer-card-number answered" :class="{ 'disabled': examSubmitted }">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 判断题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>判断 ({{ questionsByType['判断题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['判断题']" :key="question.id"
                      class="answer-card-number answered" :class="{ 'disabled': examSubmitted }">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 填空题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>填空 ({{ questionsByType['填空题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['填空题']" :key="question.id"
                      class="answer-card-number answered" :class="{ 'disabled': examSubmitted }">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>

                <!-- 简答题 -->
                <div class="question-section">
                  <div class="section-header">
                    <h5>简答 ({{ questionsByType['简答题'].length }})</h5>
                  </div>
                  <div class="question-numbers">
                    <div v-for="question in questionsByType['简答题']" :key="question.id"
                      class="answer-card-number answered" :class="{ 'disabled': examSubmitted }">
                      {{ String(question.id).padStart(2, '0') }}
                    </div>
                  </div>
                </div>
              </div>

              <!-- 答题状态说明 -->
              <div class="answer-legend">
                <div class="legend-item">
                  <div class="legend-color legend-unanswered"></div>
                  <span>未答</span>
                </div>
                <div class="legend-item">
                  <div class="legend-color legend-answered"></div>
                  <span>已答</span>
                </div>
              </div>

              <!-- 提交按钮区域 -->
              <div class="submit-section">
                <button class="btn-submit-exam" :class="{ 'disabled': examSubmitted }" disabled>
                  交卷
                </button>
              </div>
            </div>
          </div>

          <!-- 右侧提交成功信息 -->
          <div class="exam-content">
            <div class="submit-success">
              <div class="success-image">
                <img src="/images/examination/submit-the-paper.png" alt="提交成功" class="success-img">
              </div>
              <div class="success-message">
                <h3>答题卡已成功提交！预计1-3个工作日完成批阅请您耐心等候查询成绩</h3>
              </div>
              <div class="success-actions">
                <button class="btn-return-home" @click="goHome">返回课程</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 练习结果弹窗 -->
    <div class="practice-result-modal" v-if="showPracticeResultModal">
      <div class="modal-overlay" @click="closePracticeResult"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>答题报告</h3>
          <!-- <button class="close-btn" @click="closePracticeResult">&times;</button> -->
        </div>
        <div class="modal-body">
          <!-- 得分展示区域 -->
          <div class="score-display">
            <div class="difficulty-tag">难度:4.8</div>
            <div class="score-gauge">
              <div class="gauge-circle">
                <div class="gauge-fill" :style="{ transform: `rotate(${Math.min((finalScore / 120) * 180, 180)}deg)` }">
                </div>
                <div class="score-content">
                  <div class="score-label">我的得分</div>
                  <div class="score-number">{{ finalScore }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 答题详情 -->
          <div class="quiz-details">
            <div class="detail-item">
              <span class="detail-label">答题时间:</span>
              <span class="detail-value">{{ new Date().toLocaleDateString('zh-CN') }} {{ new
                Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">答题时长:</span>
              <span class="detail-value">56分23秒</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">答题总数:</span>
              <span class="detail-value">{{ correctCount }}/{{ questions.length }}</span>
            </div>
          </div>

          <!-- 得分情况 -->
          <div class="score-breakdown">
            <h4>得分情况</h4>
            <div class="breakdown-items">
              <div class="breakdown-item">
                <span class="item-label">单选</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 80%"></div>
                </div>
                <span class="item-score"><span class="item-score-number">8</span>/10</span>
              </div>
              <div class="breakdown-item">
                <span class="item-label">多选</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 60%"></div>
                </div>
                <span class="item-score"><span class="item-score-number">6</span>/10</span>
              </div>
              <div class="breakdown-item">
                <span class="item-label">判断</span>
                <div class="progress-bar">
                  <div class="progress-fill" style="width: 90%"></div>
                </div>
                <span class="item-score"><span class="item-score-number">9</span>/10</span>
              </div>
            </div>
          </div>

          <!-- 统计数据 -->
          <div class="statistics">
            <div class="stat-item">
              <div class="stat-number orange">120</div>
              <div class="stat-label">最高分</div>
            </div>
            <div class="stat-item">
              <div class="stat-number red">第 <span class="stat-number-rank">10</span> 名</div>
              <div class="stat-label">练习人数3892人</div>
            </div>
            <div class="stat-item">
              <div class="stat-number blue">90</div>
              <div class="stat-label">答对最多</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const route = useRoute()
const router = useRouter()

// 路由参数
const courseId = ref(Number(route.params.courseId))
const sectionId = ref(Number(route.params.sectionId))
const courseName = ref(route.query.courseName as string || '课程名称')
const examName = ref(route.query.examName as string || '练习')

// 练习状态
const examStarted = ref(false)
const examFinished = ref(false)
const examSubmitted = ref(false) // 新增：练习已提交状态
const isPaused = ref(false) // 新增：练习是否暂停状态
const showPracticeResultModal = ref(false) // 新增：控制练习结果弹窗显示

// 确认对话框状态
const showConfirmDialog = ref(false)
const confirmDialogMessage = ref('')
const confirmDialogType = ref('') // 'complete' 或 'incomplete'
const examDuration = ref(120) // 练习时长（分钟）- 2小时
const remainingTime = ref(0) // 剩余时间（秒）
const timer = ref<NodeJS.Timeout | null>(null)
const showTimeUpDialog = ref(false) // 时间到提示对话框状态

// 题目相关
const currentQuestionIndex = ref(0)
const selectedAnswers = ref<number[]>([])
const multipleAnswers = ref<number[][]>([]) // 多选题答案
const fillAnswers = ref<string[][]>([]) // 填空题答案
const essayAnswers = ref<string[]>([]) // 简答题答案
const isMarked = ref<boolean[]>([])
const finalScore = ref(0)
const correctCount = ref(0)

// 练习相关状态
const showAnswerExplanation = ref<boolean[]>([]) // 是否显示答案解析
const questionResults = ref<boolean[]>([]) // 题目答题结果（正确/错误）

// 初始化答案数组
const initializeAnswers = () => {
  selectedAnswers.value = new Array(questions.value.length).fill(undefined)
  multipleAnswers.value = Array.from({ length: questions.value.length }, () => [])
  fillAnswers.value = new Array(questions.value.length).fill('')
  essayAnswers.value = new Array(questions.value.length).fill('')
  isMarked.value = new Array(questions.value.length).fill(false)

  // 初始化练习相关状态
  showAnswerExplanation.value = new Array(questions.value.length).fill(false)
  questionResults.value = new Array(questions.value.length).fill(false)
}

// 模拟练习题目
const questions = ref([
  // 单选题 (1-10)
  {
    id: 1,
    type: '单选题',
    score: 2,
    title: '信息学奥赛中常用的编程语言是什么？',
    options: ['Java', 'Python', 'C++', 'JavaScript'],
    correctAnswer: 2,
    explanation: 'C++是信息学奥赛中最常用的编程语言，因为它具有高效的执行速度和丰富的算法库支持。'
  },
  {
    id: 2,
    type: '单选题',
    score: 2,
    title: '以下哪个是正确的C++变量声明？',
    options: ['int 2num;', 'int num_2;', 'int num-2;', 'int num 2;'],
    correctAnswer: 1,
    explanation: 'C++变量名不能以数字开头，不能包含连字符，不能包含空格。int num_2; 是正确的变量声明。'
  },
  {
    id: 3,
    type: '单选题',
    score: 2,
    title: '在C++中，以下哪个运算符用于取地址？',
    options: ['*', '&', '%', '^'],
    correctAnswer: 1,
    explanation: '&运算符用于取变量的地址，*运算符用于解引用指针。'
  },
  {
    id: 4,
    type: '单选题',
    score: 2,
    title: '以下哪个循环结构在执行前不检查条件？',
    options: ['for循环', 'while循环', 'do-while循环', '以上都不是'],
    correctAnswer: 2,
    explanation: 'do-while循环先执行循环体，然后再检查条件，所以至少会执行一次。'
  },
  {
    id: 5,
    type: '单选题',
    score: 2,
    title: '在C++中，数组下标从几开始？',
    options: ['1', '0', '-1', '任意数'],
    correctAnswer: 1,
    explanation: 'C++中数组下标从0开始，这是C++语言的标准规定。'
  },
  {
    id: 6,
    type: '单选题',
    score: 2,
    title: '以下哪个是C++的标准输入流？',
    options: ['cout', 'cin', 'printf', 'scanf'],
    correctAnswer: 1,
    explanation: 'cin是C++的标准输入流，cout是标准输出流。printf和scanf是C语言的函数。'
  },
  {
    id: 7,
    type: '单选题',
    score: 2,
    title: '在C++中，以下哪个关键字用于定义常量？',
    options: ['var', 'let', 'const', 'final'],
    correctAnswer: 2,
    explanation: 'const是C++中用于定义常量的关键字，var和let是其他编程语言的关键字。'
  },
  {
    id: 8,
    type: '单选题',
    score: 2,
    title: '以下哪个是正确的函数定义语法？',
    options: ['function int add()', 'int add()', 'def add()', 'add() int'],
    correctAnswer: 1,
    explanation: 'C++中函数定义语法是：返回类型 函数名(参数列表)。int add()是正确的语法。'
  },
  {
    id: 9,
    type: '单选题',
    score: 2,
    title: '在C++中，以下哪个符号用于单行注释？',
    options: ['//', '/* */', '#', '--'],
    correctAnswer: 0,
    explanation: '//用于单行注释，/* */用于多行注释。#是预处理指令符号。'
  },
  {
    id: 10,
    type: '单选题',
    score: 2,
    title: '以下哪个是C++中的逻辑与运算符？',
    options: ['&', '&&', 'and', '|'],
    correctAnswer: 1,
    explanation: '&&是逻辑与运算符，&是位与运算符，|是位或运算符。'
  },
  // 多选题 (11-20)
  {
    id: 11,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++的基本数据类型？',
    options: ['int', 'float', 'string', 'char'],
    correctAnswer: [0, 1, 3],
    explanation: 'int（整型）、float（浮点型）、char（字符型）是C++的基本数据类型，string是标准库类型。'
  },
  {
    id: 12,
    type: '多选题',
    score: 3,
    title: '以下哪些是面向对象编程的特征？',
    options: ['封装', '继承', '多态', '抽象'],
    correctAnswer: [0, 1, 2, 3],
    explanation: '面向对象编程的四大特征是：封装（隐藏实现细节）、继承（代码重用）、多态（同一接口不同实现）、抽象（提取共同特征）。'
  },
  {
    id: 13,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的循环语句？',
    options: ['for', 'while', 'do-while', 'foreach'],
    correctAnswer: [0, 1, 2],
    explanation: 'C++中的循环语句包括for、while、do-while。foreach不是C++标准语法，但可以用范围for循环实现类似功能。'
  },
  {
    id: 14,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的条件语句？',
    options: ['if', 'switch', 'case', 'else'],
    correctAnswer: [0, 1],
    explanation: 'if和switch是C++中的条件语句，case是switch语句的一部分，else是if语句的配套关键字。'
  },
  {
    id: 15,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的运算符？',
    options: ['++', '--', '+=', '=='],
    correctAnswer: [0, 1, 2, 3],
    explanation: '这些都是C++中的运算符：++（自增）、--（自减）、+=（复合赋值）、==（相等比较）。'
  },
  {
    id: 16,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的存储类？',
    options: ['auto', 'static', 'extern', 'register'],
    correctAnswer: [0, 1, 2, 3],
    explanation: '这些都是C++中的存储类：auto（自动）、static（静态）、extern（外部）、register（寄存器）。'
  },
  {
    id: 17,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的访问修饰符？',
    options: ['public', 'private', 'protected', 'internal'],
    correctAnswer: [0, 1, 2],
    explanation: 'C++中的访问修饰符包括public（公有）、private（私有）、protected（保护）。internal是C#中的修饰符。'
  },
  {
    id: 18,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的标准库？',
    options: ['iostream', 'vector', 'string', 'algorithm'],
    correctAnswer: [0, 1, 2, 3],
    explanation: '这些都是C++标准库：iostream（输入输出）、vector（动态数组）、string（字符串）、algorithm（算法）。'
  },
  {
    id: 19,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的容器？',
    options: ['vector', 'list', 'map', 'set'],
    correctAnswer: [0, 1, 2, 3],
    explanation: '这些都是C++标准库中的容器：vector（向量）、list（链表）、map（映射）、set（集合）。'
  },
  {
    id: 20,
    type: '多选题',
    score: 3,
    title: '以下哪些是C++中的智能指针？',
    options: ['unique_ptr', 'shared_ptr', 'weak_ptr', 'auto_ptr'],
    correctAnswer: [0, 1, 2],
    explanation: 'C++11引入的智能指针包括unique_ptr、shared_ptr、weak_ptr。auto_ptr已被废弃，不推荐使用。'
  },
  // 判断题 (21-30)
  {
    id: 21,
    type: '判断题',
    score: 1,
    title: 'C++是一种面向对象的编程语言。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++支持面向对象编程，具有类、继承、多态等面向对象特性，同时也支持过程式编程。'
  },
  {
    id: 22,
    type: '判断题',
    score: 1,
    title: 'C++中的数组下标从1开始。',
    options: ['正确', '错误'],
    correctAnswer: 1,
    explanation: 'C++中数组下标从0开始，这是C++语言的标准规定。'
  },
  {
    id: 23,
    type: '判断题',
    score: 1,
    title: 'C++中可以使用//进行单行注释。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++支持//单行注释和/* */多行注释两种注释方式。'
  },
  {
    id: 24,
    type: '判断题',
    score: 1,
    title: 'C++中的变量必须先声明后使用。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++中变量必须先声明后使用，这是语言的基本规则。'
  },
  {
    id: 25,
    type: '判断题',
    score: 1,
    title: 'C++中的函数可以重载。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++支持函数重载，允许同名函数有不同的参数列表。'
  },
  {
    id: 26,
    type: '判断题',
    score: 1,
    title: 'C++中的类可以继承多个父类。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++支持多重继承，一个类可以继承多个父类。'
  },
  {
    id: 27,
    type: '判断题',
    score: 1,
    title: 'C++中的指针可以进行算术运算。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'C++中指针可以进行加减运算，用于数组遍历和内存操作。'
  },
  {
    id: 28,
    type: '判断题',
    score: 1,
    title: 'C++中的const关键字用于定义常量。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: 'const关键字用于定义常量，防止变量被修改。'
  },
  {
    id: 29,
    type: '判断题',
    score: 1,
    title: 'C++中的虚函数可以实现多态。',
    options: ['正确', '错误'],
    correctAnswer: 0,
    explanation: '虚函数是实现运行时多态的关键机制，允许在运行时确定调用哪个函数。'
  },
  {
    id: 30,
    type: '判断题',
    score: 1,
    title: 'C++中的析构函数可以有参数。',
    options: ['正确', '错误'],
    correctAnswer: 1,
    explanation: '析构函数不能有参数，这是C++语言的规定。析构函数用于清理对象资源。'
  },
  // 填空题 (31-40)
  {
    id: 31,
    type: '填空题',
    score: 1,
    title: '危险化学品生产企业应当提供危险化学品安全技术说明书，并在包装______上标贴或者悬挂与包装内危险化学品相符的化学品______。',
    options: [],
    blanks: [1, 2],
    correctAnswer: ['包装', '标签'],
    explanation: '根据危险化学品安全管理规定，企业应在包装上标贴化学品标签，确保安全信息清晰可见。'
  },
  {
    id: 32,
    type: '填空题',
    score: 4,
    title: 'C++中定义整型变量的关键字是______。',
    options: [],
    correctAnswer: 'int',
    explanation: 'int是C++中用于定义整型变量的关键字，可以存储整数类型的值。'
  },
  {
    id: 33,
    type: '填空题',
    score: 4,
    title: 'C++中用于包含头文件的预处理指令是______。',
    options: [],
    correctAnswer: '#include',
    explanation: '#include是C++的预处理指令，用于包含头文件，将其他文件的内容插入到当前文件中。'
  },
  {
    id: 34,
    type: '填空题',
    score: 4,
    title: 'C++中主函数的名称是______。',
    options: [],
    correctAnswer: 'main',
    explanation: 'main是C++程序的入口函数，程序执行时首先调用main函数。'
  },
  {
    id: 35,
    type: '填空题',
    score: 4,
    title: 'C++中用于定义类的关键字是______。',
    options: [],
    correctAnswer: 'class',
    explanation: 'class是C++中用于定义类的关键字，类是面向对象编程的基本单位。'
  },
  {
    id: 36,
    type: '填空题',
    score: 4,
    title: 'C++中用于动态分配内存的运算符是______。',
    options: [],
    correctAnswer: 'new',
    explanation: 'new运算符用于动态分配内存，返回指向新分配内存的指针。'
  },
  {
    id: 37,
    type: '填空题',
    score: 4,
    title: 'C++中用于释放动态分配内存的运算符是______。',
    options: [],
    correctAnswer: 'delete',
    explanation: 'delete运算符用于释放通过new分配的内存，防止内存泄漏。'
  },
  {
    id: 38,
    type: '填空题',
    score: 4,
    title: 'C++中用于定义命名空间的关键字是______。',
    options: [],
    correctAnswer: 'namespace',
    explanation: 'namespace用于定义命名空间，避免名称冲突，组织代码结构。'
  },
  {
    id: 39,
    type: '填空题',
    score: 4,
    title: 'C++中用于继承的符号是______。',
    options: [],
    correctAnswer: ':',
    explanation: '冒号(:)用于表示类的继承关系，如class Derived : public Base。'
  },
  {
    id: 40,
    type: '填空题',
    score: 4,
    title: 'C++中用于访问类成员的运算符是______。',
    options: [],
    correctAnswer: '.',
    explanation: '点运算符(.)用于访问对象的成员，如object.member。'
  },
  // 简答题 (41-44)
  {
    id: 41,
    type: '简答题',
    score: 10,
    title: '请简述C++中面向对象编程的三大特征。',
    options: [],
    correctAnswer: '封装、继承、多态',
    explanation: '封装：将数据和操作数据的方法封装在类中，隐藏实现细节；继承：子类继承父类的属性和方法，实现代码重用；多态：同一接口可以有多种不同的实现方式。'
  },
  {
    id: 42,
    type: '简答题',
    score: 10,
    title: '请解释C++中指针和引用的区别。',
    options: [],
    correctAnswer: '指针是变量的地址，引用是变量的别名',
    explanation: '指针：存储变量的内存地址，可以为空，可以重新赋值指向其他变量；引用：是变量的别名，必须初始化，不能重新绑定到其他变量，更安全。'
  },
  {
    id: 43,
    type: '简答题',
    score: 10,
    title: '请说明C++中构造函数和析构函数的作用。',
    options: [],
    correctAnswer: '构造函数用于初始化对象，析构函数用于清理对象',
    explanation: '构造函数：在创建对象时自动调用，用于初始化对象的成员变量；析构函数：在对象销毁时自动调用，用于清理资源，如释放动态分配的内存。'
  },
  {
    id: 44,
    type: '简答题',
    score: 10,
    title: '请解释C++中虚函数的概念和作用。',
    options: [],
    correctAnswer: '虚函数实现多态，允许在运行时确定调用哪个函数',
    explanation: '虚函数：在基类中声明为virtual的函数，子类可以重写；作用：实现运行时多态，通过基类指针或引用调用时，会根据实际对象类型调用相应的函数。'
  }
])

// 计算属性
const currentQuestion = computed(() => questions.value[currentQuestionIndex.value])
const currentQuestionType = computed(() => currentQuestion.value?.type || '')
// const totalScore = computed(() => questions.value.reduce((sum, q) => sum + q.score, 0))

// const answeredCount = computed(() => {
//   let count = 0
//   questions.value.forEach((question, index) => {
//     if (question.type === '单选题' || question.type === '判断题') {
//       if (selectedAnswers.value[index] !== -1) count++
//     } else if (question.type === '多选题') {
//       if (multipleAnswers.value[index] && multipleAnswers.value[index].length > 0) count++
//     } else if (question.type === '填空题') {
//       const answers = fillAnswers.value[index] || []
//       if (answers.some(answer => answer && answer.trim() !== '')) count++
//     } else if (question.type === '简答题') {
//       if (essayAnswers.value[index] && essayAnswers.value[index].trim() !== '') count++
//     }
//   })
//   return count
// }) // 暂时注释，后续需要时再启用
// const unansweredCount = computed(() => questions.value.length - answeredCount.value)
// const markedCount = computed(() => isMarked.value.filter(marked => marked).length)

// 按题型分组统计
const questionsByType = computed(() => {
  const groups = {
    '单选题': questions.value.filter((q: any) => q.type === '单选题'),
    '多选题': questions.value.filter((q: any) => q.type === '多选题'),
    '判断题': questions.value.filter((q: any) => q.type === '判断题'),
    '填空题': questions.value.filter((q: any) => q.type === '填空题'),
    '简答题': questions.value.filter((q: any) => q.type === '简答题')
  }
  return groups
})

// 监听简答题答案变化，强制更新答题卡状态
// const essayAnswersWatcher = computed(() => {
//   return essayAnswers.value.map((answer: string) => answer ? answer.trim() : '')
// })

// 简答题答案变化处理
const handleEssayAnswerChange = (questionIndex: number, value: string) => {
  essayAnswers.value[questionIndex] = value

  // 检查简答题答案
  if (questionIndex === currentQuestionIndex.value) {
    checkAnswer()
  }
}

// 获取正确答案文本
const getCorrectAnswerText = () => {
  const question = currentQuestion.value
  if (!question) return ''

  if (question.type === '单选题' || question.type === '判断题') {
    return String.fromCharCode(65 + Number(question.correctAnswer))
  } else if (question.type === '多选题') {
    const answers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
    return answers.map((answer: string | number) => String.fromCharCode(65 + Number(answer))).join(', ')
  } else if (question.type === '填空题') {
    const answers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
    return answers.join(', ')
  } else if (question.type === '简答题') {
    return question.correctAnswer
  }
  return ''
}

// 获取用户答案文本
const getUserAnswerText = () => {
  const question = currentQuestion.value
  const currentIndex = currentQuestionIndex.value
  if (!question) return ''

  if (question.type === '单选题' || question.type === '判断题') {
    const answer = selectedAnswers.value[currentIndex]
    return answer !== undefined ? String.fromCharCode(65 + answer) : '未作答'
  } else if (question.type === '多选题') {
    const answers = multipleAnswers.value[currentIndex] || []
    return answers.length > 0 ? answers.map((answer: number) => String.fromCharCode(65 + answer)).join(', ') : '未作答'
  } else if (question.type === '填空题') {
    const answers = fillAnswers.value[currentIndex] || []
    return answers.length > 0 ? answers.join(', ') : '未作答'
  } else if (question.type === '简答题') {
    const answer = essayAnswers.value[currentIndex] || ''
    return answer.trim() || '未作答'
  }
  return '未作答'
}



// 开始练习
const startExam = () => {
  examStarted.value = true
  remainingTime.value = examDuration.value * 60
  startTimer()
}

// 开始计时器
const startTimer = () => {
  timer.value = setInterval(() => {
    remainingTime.value--
    if (remainingTime.value <= 0) {
      // 时间到，显示提示对话框并设置3秒后自动提交
      showTimeUpAndSubmit()
      if (timer.value) {
        clearInterval(timer.value)
      }
    }
  }, 1000)
}

// 暂停练习
const pausePractice = () => {
  if (isPaused.value) {
    // 恢复练习
    isPaused.value = false
    if (timer.value) {
      startTimer()
    }
  } else {
    // 暂停练习
    isPaused.value = true
    if (timer.value) {
      clearInterval(timer.value)
      timer.value = null
    }
  }
}

// 结束练习
const endPractice = () => {
  // 显示确认对话框
  confirmDialogMessage.value = '确定要结束练习吗？结束后将无法继续答题。'
  confirmDialogType.value = 'end'
  showConfirmDialog.value = true
}

// 计算练习结果
const calculatePracticeResult = () => {
  correctCount.value = 0
  finalScore.value = 0

  questions.value.forEach((question, index) => {
    let isCorrect = false

    if (question.type === '单选题' || question.type === '判断题') {
      isCorrect = selectedAnswers.value[index] === question.correctAnswer
    } else if (question.type === '多选题') {
      const userAnswers = multipleAnswers.value[index] || []
      const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
      isCorrect = userAnswers.length === correctAnswers.length &&
        userAnswers.every(answer => correctAnswers.includes(answer))
    } else if (question.type === '填空题') {
      const userAnswers = fillAnswers.value[index] || []
      const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
      isCorrect = userAnswers.length === correctAnswers.length &&
        userAnswers.every((answer, i) =>
          answer && answer.trim().toLowerCase() === String(correctAnswers[i]).toLowerCase()
        )
    } else if (question.type === '简答题') {
      const userAnswer = essayAnswers.value[index] || ''
      isCorrect = userAnswer.trim() !== '' // 只要有内容就算答题了
    }

    if (isCorrect) {
      correctCount.value++
      finalScore.value += question.score
    }
  })
}

// 检查答案是否正确
const checkAnswer = () => {
  const question = currentQuestion.value
  const currentIndex = currentQuestionIndex.value

  if (!question) return

  let isCorrect = false

  if (question.type === '单选题' || question.type === '判断题') {
    isCorrect = selectedAnswers.value[currentIndex] === question.correctAnswer
  } else if (question.type === '多选题') {
    const userAnswers = multipleAnswers.value[currentIndex] || []
    const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
    isCorrect = userAnswers.length === correctAnswers.length &&
      userAnswers.every((answer: number) => correctAnswers.includes(answer))
  } else if (question.type === '填空题') {
    const userAnswers = fillAnswers.value[currentIndex] || []
    const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
    isCorrect = userAnswers.length === correctAnswers.length &&
      userAnswers.every((answer: string, i: number) =>
        answer && answer.trim().toLowerCase() === String(correctAnswers[i]).toLowerCase()
      )
  } else if (question.type === '简答题') {
    const userAnswer = essayAnswers.value[currentIndex] || ''
    isCorrect = userAnswer.trim() !== '' // 只要有内容就算答题了
  }

  // 记录答题结果message-item
  questionResults.value[currentIndex] = isCorrect

  // 无论正确还是错误都显示答案解析
  showAnswerExplanation.value[currentIndex] = true
}

// 选择选项（通用）
const selectOption = (optionIndex: number) => {
  const question = currentQuestion.value
  if (question.type === '多选题') {
    const currentAnswers = multipleAnswers.value[currentQuestionIndex.value] || []
    const answerIndex = currentAnswers.indexOf(optionIndex)
    if (answerIndex > -1) {
      // 取消选择
      currentAnswers.splice(answerIndex, 1)
    } else {
      // 添加选择
      currentAnswers.push(optionIndex)
    }
    multipleAnswers.value[currentQuestionIndex.value] = [...currentAnswers]

    // 强制更新答题卡状态
    multipleAnswers.value = [...multipleAnswers.value]

    // 检查多选题答案
    checkAnswer()
  } else {
    // 单选题、判断题
    // 如果点击的是已选中的选项，则取消选择
    if (selectedAnswers.value[currentQuestionIndex.value] === optionIndex) {
      selectedAnswers.value[currentQuestionIndex.value] = -1
      // 取消选择时也显示答案解析，让用户知道正确答案
      showAnswerExplanation.value[currentQuestionIndex.value] = true
      // 重新检查答案状态
      checkAnswer()
    } else {
      selectedAnswers.value[currentQuestionIndex.value] = optionIndex
      // 检查单选题答案
      checkAnswer()
    }

    // 强制更新答题卡状态
    selectedAnswers.value = [...selectedAnswers.value]
  }
}

// 检查选项是否被选中
const isOptionSelected = (optionIndex: number) => {
  const question = currentQuestion.value
  if (question.type === '多选题') {
    const currentAnswers = multipleAnswers.value[currentQuestionIndex.value] || []
    return currentAnswers.includes(optionIndex)
  } else {
    return selectedAnswers.value[currentQuestionIndex.value] === optionIndex
  }
}

// 处理复选框点击
const handleCheckboxClick = (optionIndex: number, event: Event) => {
  event.stopPropagation()
  selectOption(optionIndex)
}

// 上一题
const previousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

// 下一题
const nextQuestion = () => {
  if (currentQuestionIndex.value < questions.value.length - 1) {
    currentQuestionIndex.value++
  }
}

// 跳转到指定题目
const goToQuestion = (index: number) => {
  currentQuestionIndex.value = index

  // 如果该题目已经作答，显示答案解析
  if (showAnswerExplanation.value[index]) {
    // 答案解析已经显示，不需要额外操作
  }
}

// 处理题号点击
const handleQuestionClick = (index: number) => {
  if (!examSubmitted.value) {
    goToQuestion(index)
  }
}

// 检查是否所有题目都已作答
// const checkAllQuestionsAnswered = () => {
//   let unansweredCount = 0

//   questions.value.forEach((question, index) => {
//     let isAnswered = false

//     if (question.type === '单选题' || question.type === '判断题') {
//       isAnswered = selectedAnswers.value[index] !== undefined && selectedAnswers.value[index] !== null
//     } else if (question.type === '多选题') {
//       const userAnswers = multipleAnswers.value[index] || []
//       isAnswered = userAnswers.length > 0
//     } else if (question.type === '填空题') {
//       const userAnswer = fillAnswers.value[index] || []
//       isAnswered = userAnswer.some(answer => answer && answer.trim() !== '')
//     } else if (question.type === '简答题') {
//       const userAnswer = essayAnswers.value[index] || ''
//       isAnswered = userAnswer.trim() !== ''
//     }

//     if (!isAnswered) {
//       unansweredCount++
//     }
//   })

//   return unansweredCount === 0
// }

// 获取题目类型简称
const getQuestionTypeShort = (type: string) => {
  switch (type) {
    case '单选题': return '单选题'
    case '多选题': return '多选题'
    case '判断题': return '判断题'
    case '填空题': return '填空题'
    case '简答题': return '简答题'
    default: return type
  }
}

// 填空题答案处理
const getFillAnswer = (questionIndex: number, blankIndex: number) => {
  if (!fillAnswers.value[questionIndex]) {
    fillAnswers.value[questionIndex] = []
  }
  return fillAnswers.value[questionIndex][blankIndex] || ''
}

const setFillAnswer = (questionIndex: number, blankIndex: number, value: string) => {
  if (!fillAnswers.value[questionIndex]) {
    fillAnswers.value[questionIndex] = []
  }
  fillAnswers.value[questionIndex][blankIndex] = value

  // 强制更新答题卡状态
  fillAnswers.value = [...fillAnswers.value]

  // 检查填空题答案
  if (questionIndex === currentQuestionIndex.value) {
    checkAnswer()
  }
}

// 简答题字数统计
const getEssayLength = (questionIndex: number) => {
  const answer = essayAnswers.value[questionIndex] || ''
  return answer.length
}

// 获取题目状态
const getQuestionStatus = (index: number) => {
  const classes = []
  const question = questions.value[index]

  // 当前题目
  if (index === currentQuestionIndex.value) {
    classes.push('current')
  }

  // 已答题目
  let isAnswered = false
  if (question.type === '单选题' || question.type === '判断题') {
    isAnswered = selectedAnswers.value[index] !== undefined && selectedAnswers.value[index] !== null
  } else if (question.type === '多选题') {
    isAnswered = multipleAnswers.value[index] && multipleAnswers.value[index].length > 0
  } else if (question.type === '填空题') {
    const answers = fillAnswers.value[index] || []
    isAnswered = answers.some(answer => answer && answer.trim() !== '')
  } else if (question.type === '简答题') {
    isAnswered = !!(essayAnswers.value[index] && essayAnswers.value[index].trim() !== '')
  }

  if (isAnswered) {
    classes.push('answered')

    // 如果已答题，根据答题结果添加正确/错误状态
    if (questionResults.value[index] !== undefined) {
      if (questionResults.value[index]) {
        classes.push('correct')
      } else {
        classes.push('incorrect')
      }
    }
  }

  // 标记题目
  if (isMarked.value[index]) {
    classes.push('marked')
  }

  return classes
}

// 提交练习
// const submitExam = () => {

//   // 防止重复提交
//   if (examSubmitted.value) {
//     return
//   }

//   // 检查是否所有题目都已作答
//   const allAnswered = checkAllQuestionsAnswered()

//   if (allAnswered) {
//     // 所有题目都已作答
//     confirmDialogMessage.value = '您已完成所有题目的作答，是否确认交卷？交卷后不可再修改答题卡！'
//     confirmDialogType.value = 'complete'
//   } else {
//     // 还有未作答的题目
//     confirmDialogMessage.value = '检测到您当前还有未作答题目，是否确认交卷？'
//     confirmDialogType.value = 'incomplete'
//   }

//   showConfirmDialog.value = true
// }

// 确认交卷
const confirmSubmit = () => {
  showConfirmDialog.value = false
  if (confirmDialogType.value === 'end') {
    // 结束练习
    if (timer.value) {
      clearInterval(timer.value)
      timer.value = null
    }
    // 计算练习结果
    calculatePracticeResult()
    showPracticeResultModal.value = true
  } else {
    executeSubmit()
  }
}

// 取消交卷
const cancelSubmit = () => {
  showConfirmDialog.value = false
}

// 执行实际的交卷操作
const executeSubmit = () => {
  if (timer.value) {
    clearInterval(timer.value)
  }

  // 计算得分
  correctCount.value = 0
  finalScore.value = 0

  questions.value.forEach((question, index) => {
    let isCorrect = false

    if (question.type === '单选题' || question.type === '判断题') {
      isCorrect = selectedAnswers.value[index] === question.correctAnswer
    } else if (question.type === '多选题') {
      const userAnswers = multipleAnswers.value[index] || []
      const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
      isCorrect = userAnswers.length === correctAnswers.length &&
        userAnswers.every(answer => correctAnswers.includes(answer))
    } else if (question.type === '填空题') {
      const userAnswers = fillAnswers.value[index] || []
      const correctAnswers = Array.isArray(question.correctAnswer) ? question.correctAnswer : [question.correctAnswer]
      // 填空题需要所有空都填对
      isCorrect = userAnswers.length === correctAnswers.length &&
        userAnswers.every((answer, i) =>
          answer && answer.trim().toLowerCase() === String(correctAnswers[i]).toLowerCase()
        )
    } else if (question.type === '简答题') {
      // 简答题需要人工评分，这里暂时不计分
      const userAnswer = essayAnswers.value[index] || ''
      isCorrect = userAnswer.trim() !== '' // 只要有内容就算答题了
    }

    if (isCorrect) {
      correctCount.value++
      finalScore.value += question.score
    }
  })

  // 先设置提交状态，让界面变灰
  examSubmitted.value = true
  console.log('练习完成，得分:', finalScore.value)

  // 延迟显示提交成功页面，让用户看到灰色状态
  setTimeout(() => {
    examFinished.value = true
  }, 1500) // 延迟1.5秒让用户看到交卷完成的灰色状态
}

// 查看答案
// const reviewAnswers = () => {
//   // 这里可以跳转到答案解析页面
//   alert('答案解析功能开发中...')
// }

// 返回课程
// const goBack = () => {
//   router.push(`/course/${courseId.value}`)
// }

// 返回课程列表
const goHome = () => {
  router.push('/course/1')
}

// 时间到后前往结果页面
const goToResult = () => {
  showTimeUpDialog.value = false
  executeSubmit()
}

// 显示时间到对话框并设置3秒后自动提交
const showTimeUpAndSubmit = () => {
  showTimeUpDialog.value = true
  setTimeout(() => {
    goToResult()
  }, 3000)
}

// 格式化时间
// const formatTime = (seconds: number): string => {
//   const minutes = Math.floor(seconds / 60)
//   const remainingSeconds = seconds % 60
//   return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
// }

// 已移除未使用的时间格式化函数，避免构建时报未使用错误

// 组件卸载时清理计时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

onMounted(() => {
  console.log('练习页面加载完成')
  console.log('课程ID:', courseId.value)
  console.log('章节ID:', sectionId.value)
  console.log('练习名称:', examName.value)

  // 初始化答案数组
  initializeAnswers()

  // 练习页面直接开始，不需要等待用户点击
  startExam()
})

// 关闭练习结果弹窗
const closePracticeResult = () => {
  showPracticeResultModal.value = false
}

// 查看练习详情
// const reviewPractice = () => {
//   // 这里可以实现查看练习详情的功能
//   console.log('查看练习详情')
// }
</script>

<style scoped>
.exam-page {
  min-height: 100vh;
  background: #F6F6F6;
}

.banner-section {
  position: relative;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}


.banner-text h2 {
  width: 128px;
  height: 39px;
  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
  font-weight: bold;
  font-size: 32px;
  color: #000000;
  line-height: 39px;
  text-align: center;
  font-style: normal;
}

.banner-text p {
  width: 252px;
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 20px;
  text-align: center;
  font-style: normal;
}

/* 练习中心标题 */
.exam-center-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  padding: 40px 0;
  text-align: center;
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.center-title {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.center-subtitle {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

/* 课程信息导航 */
.course-info-nav {
  background: #F6F6F6;
  padding: 12px 0;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 390px;
  padding-right: 20px;
}

.nav-left {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.nav-title {
  color: #333333;
  cursor: default;
}

.nav-item {
  color: #999;
  cursor: default;
}

.nav-separator {
  margin: 0 8px;
  color: #999;
}

.nav-right {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.question-type-item {
  color: #999;
  font-weight: 400;
  transition: all 0.3s;
}

.question-type-item.active {
  color: #1D94D5;
  font-weight: 500;
}

.type-separator {
  margin: 0 12px;
  color: #999;
}

/* 面包屑导航 */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 练习主体布局 */
.exam-main {
  padding: 0;
  min-height: calc(100vh - 200px);
}

.exam-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 左侧边栏 */
.exam-sidebar {
  width: 370px;
  flex-shrink: 0;
}

/* 练习时间 */
.exam-timer {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  width: 370px;
  height: 170px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.exam-timer h4 {
  text-align: left;
  font-size: 16px;
  color: #000;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.timer-display {
  font-size: 34px;
  font-weight: 700;
  color: #1D94D5;
  font-family: 'Arial', sans-serif;
  letter-spacing: 4px;
  background: #EEF9FF;
  padding: 15px 20px 0 20px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
}

.timer-display span {
  display: inline-block;
  width: 36px;
  text-align: center;
}

.timer-warning {
  color: #FF5722 !important;
  animation: pulse 1.5s infinite;
}

.timer-separator {
  color: #1D94D5;
}

.timer-labels {
  margin-top: -5px;
  padding-bottom: 10px;
  background-color: #EEF9FF;
  display: flex;
  justify-content: center;
  gap: 55px;
  font-size: 13px;
  color: #999999;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* 禁用状态样式 - 根据图片调整为更浅的灰色 */
.exam-timer.disabled {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
}

.exam-timer.disabled h4 {
  color: #999 !important;
}

.timer-display.disabled {
  color: #999 !important;
  background: #f6f6f6 !important;
  border-color: #ddd !important;
}

.timer-labels.disabled {
  color: #999 !important;
  background-color: #f6f6f6 !important;
}

/* 确保父级计时器容器背景保持白色 */
.exam-timer.disabled {
  background: white !important;
}

/* 计时器分隔符在禁用状态下变灰 */
.timer-display.disabled .timer-separator {
  color: #999 !important;
}

/* 确保"剩余时间"标题在禁用状态下保持黑色 */
.exam-timer.disabled h4 {
  color: #000 !important;
}

.answer-sheet.disabled {
  /* background: #f5f5f5 !important; */
  border: 1px solid #e0e0e0 !important;
}

.answer-sheet.disabled h4 {
  color: #999 !important;
}

.answer-sheet.disabled .progress-text {
  color: #999 !important;
}

.answer-sheet.disabled .progress-text .progress-current {
  color: #000 !important;
}

.answer-sheet.disabled .progress-text .progress-total {
  color: #999 !important;
}

.answer-sheet.disabled .section-header h5 {
  color: #999 !important;
}

.answer-sheet.disabled .answer-card-number {
  background: white !important;
  color: #999 !important;
  border-color: #999 !important;
  cursor: not-allowed !important;
}

/* 确保disabled状态覆盖其他状态 */
.answer-sheet.disabled .answer-card-number.answered {
  background: white !important;
  color: #999 !important;
  border-color: #999 !important;
}

.answer-sheet.disabled .answer-card-number.current {
  background: white !important;
  color: #999 !important;
  border-color: #999 !important;
}

.answer-sheet.disabled .answer-card-number.marked {
  background: white !important;
  color: #999 !important;
  border-color: #999 !important;
}

.answer-sheet.disabled .btn-submit-exam {
  background-color: #999 !important;
  color: #fff !important;
  cursor: not-allowed !important;
}

/* 交卷后计时器样式 */
.answer-sheet.disabled .timer-display {
  background-color: #f6f6f6 !important;
  color: #999 !important;
}

.answer-sheet.disabled .timer-labels {
  color: #999 !important;
  background-color: #f6f6f6 !important;
}

.answer-sheet.disabled .timer-separator {
  color: #999 !important;
}

.answer-sheet.disabled .exam-timer {
  background: white !important;
}

.answer-sheet.disabled .exam-timer h4 {
  color: #000 !important;
}

/* 交卷后图例样式 */
.answer-sheet.disabled .legend-color.legend-unanswered {
  background: white !important;
  border-color: #999 !important;
}

.answer-sheet.disabled .legend-color.legend-answered {
  background: #999 !important;
  border-color: #999 !important;
  display: block !important;
}

.answer-sheet.disabled .legend-color.legend-answered::after {
  color: white !important;
  font-size: 12px !important;
  font-weight: bold !important;
}


/* 图例颜色块基础样式 */
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-right: 8px;
  display: inline-block;
  position: relative;
}

.legend-color.legend-unanswered {
  background: white;
  border: 2px solid #d9d9d9;
}

.legend-color.legend-answered {
  background: #999;
  border: 2px solid #999;
}

.legend-color.legend-answered::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

/* 答题卡 */
.answer-sheet {
  background: white;
  padding: 20px;
  width: 370px;
  height: auto;
  box-sizing: border-box;
  overflow-y: auto;
  margin-bottom: 40px;
}

/* 答题卡标题区域 */
.answer-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

.answer-sheet h4 {
  font-size: 16px;
  color: #333;
  margin: 0;
  font-weight: 700;
}

.progress-text {
  font-size: 16px;
  color: #0088D1;
  font-weight: 500;
}

.progress-text span {
  color: #999;
}

.progress-text .progress-current {
  color: #000;
}

.progress-text .progress-total {
  color: #999;
}

.question-section {
  margin-bottom: 20px;
}

.section-header {
  padding-bottom: 8px;
}

.section-header h5 {
  font-size: 16px;
  color: #999;
  margin: 0;
  font-weight: 400;
}

.question-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.answer-card-number {
  width: 64px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  color: #999;
}

.answer-card-number:hover {
  border-color: #0088d1;
  color: #0088d1;
}

.answer-card-number.current {
  background: white;
  color: #0088D1;
  border-color: #0088D1;
}

.answer-card-number.answered {
  background: #0088D1;
  color: #fff;
  border-color: #0088D1;
}

.answer-card-number.marked {
  background: #faad14;
  color: white;
  border-color: #faad14;
}

.answer-card-number.correct {
  background: #0088D1;
  color: white;
  border-color: #0088D1;
}

.answer-card-number.incorrect {
  background: #FE2E2F;
  color: white;
  border-color: #FE2E2F;
}

/* 答题状态说明 */
.answer-legend {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
}

.legend-icon.unanswered {
  background: #fff;
  border-color: #0088D1;
}

.legend-icon.answered {
  background: #e6f7ff;
  border-color: #91d5ff;
}

.legend-icon.correct {
  background: #0088D1;
  border-color: #0088D1;
}

.legend-icon.incorrect {
  background: #FE2E2F;
  border-color: #FE2E2F;
}

.legend-text {
  font-size: 16px;
  color: #000;
}

/* 提交按钮区域 */
.submit-section {
  padding-top: 20px;
  display: flex;
  gap: 12px;
}

.btn-pause-practice,
.btn-end-practice {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.btn-pause-practice {
  background: #E2F5FF;
  color: #0088D1;
  border: 1px solid #0088D1;
}

.btn-pause-practice:hover {
  background: #f0f9ff;
  border-color: #0088D1;
  color: #0088D1;
}

.btn-end-practice {
  background: #0088D1;
  color: white;
  border: 1px solid #0088D1;
}

.btn-end-practice:hover {
  background: #0077bb;
  border-color: #0077bb;
}

/* 暂停状态下的样式 */
.btn-pause-practice.paused {
  background: #FFF2E8;
  color: #FA8C16;
  border-color: #FA8C16;
}

.btn-pause-practice.paused:hover {
  background: #FFF7E6;
  border-color: #FA8C16;
  color: #FA8C16;
}

.btn-submit-exam {
  width: 100%;
  background: #0088d1;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-submit-exam:hover {
  background: #0077bb;
}

/* 右侧题目内容 */
.exam-content {
  flex: 1;
  background: white;
  padding: 24px;
  min-height: 560px;
  min-width: 950px;
}

.question-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.question-header {
  margin-bottom: 12px;
}

.question-title-info {
  color: #0088D1;
  font-size: 16px;
  font-weight: 500;
}

.question-title-info span {
  background-color: #EEF9FF;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 10px;
}

.question-content {
  flex: 1;
  margin-bottom: 24px;
}

.question-title {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  margin: 0 0 24px 0;
  line-height: 1.8;
}

.question-options {
  margin-bottom: 24px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 5px 20px;
  border: none;
  border-radius: 6px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: #EEF9FF;
  min-height: 50px;
}

.option-item:hover {
  background: #EEF9FF;
}

.option-item.selected {
  background: #EEF9FF;
  color: #333;
}

.option-checkbox {
  margin-right: 12px;
  position: relative;
}

.option-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 1.5px solid #0088D1;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.option-checkbox input[type="checkbox"]:checked {
  background: #0088d1;
  border-color: #0088d1;
}

.option-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.option-label {
  font-weight: 500;
  color: #333;
  margin-right: 8px;
  min-width: 24px;
}

.option-text {
  flex: 1;
  color: #333;
  line-height: 1.6;
  font-size: 15px;
}

.option-checkbox {
  margin-right: 12px;
  margin-top: 2px;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-checkbox input[type="checkbox"],
.option-checkbox input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #0088D1;
  cursor: pointer;
  margin: 0;
}

.option-checkbox input[type="checkbox"]:checked,
.option-checkbox input[type="radio"]:checked {
  background-color: #0088D1;
  border-color: #0088D1;
}

/* 填空题样式 */
.fill-blank {
  margin-bottom: 24px;
}

.fill-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  background: #EEF9FF;
  padding: 8px 20px;
  border-radius: 4px;
}

.fill-number {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  min-width: 24px;
}

.fill-input {
  flex: 1;
  padding: 8px 2PX;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s;
  background: #EEF9FF;
}

.fill-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 136, 209, 0.2);
}

.fill-hint {
  margin-top: 12px;
  padding: 8px 0;
  color: #999;
  font-size: 14px;
  text-align: left;
}

/* 简答题样式 */
.essay-answer {
  margin-bottom: 24px;
}

/* 答案解析样式 */
.answer-explanation {
  margin-top: 25px;
}

.explanation-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 25px;
}

.result-indicator {
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  min-width: 100px;
  text-align: center;
}

.result-indicator.correct {
  background: #0088D1;
}

.result-indicator.incorrect {
  background: #FE2E2F;
}

.answer-details {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  min-width: 250px;
}

.correct-answer {
  color: #0288D1;
  font-weight: 500;
  line-height: 1.4;
}

.correct-answer::before {
  content: '正确答案: ';
  color: #333;
  font-weight: normal;
}

.user-answer {
  font-weight: 500;
  line-height: 1.4;
}

.user-answer::before {
  content: '你的答案: ';
  color: #333;
  font-weight: normal;
}

/* 根据答题结果显示不同颜色 */
.answer-explanation .explanation-header .result-indicator.correct~.answer-details .user-answer {
  color: #0288D1;
}

.answer-explanation .explanation-header .result-indicator.incorrect~.answer-details .user-answer {
  color: #FE2E2F;
}

.explanation-content {
  margin-top: 10px;
  padding: 12px;
  background-color: #F5F8FB;
  border-radius: 4px;
}

.explanation-content h4 {
  color: #999999;
  font-size: 12px;
  font-weight: 500;
}

.explanation-content p {
  margin: 0;
  color: #333;
  font-size: 12px;
}

.essay-container {
  background: #EEF9FF;
  padding: 20px;
  border-radius: 4px;
}

.essay-textarea {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  transition: all 0.3s;
  background: #EEF9FF;
  box-sizing: border-box;
}

.essay-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 136, 209, 0.2);
}

.essay-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 0;
}

.essay-hint {
  color: #999;
  font-size: 14px;
}

.essay-counter {
  color: #999;
  font-size: 14px;
  font-weight: 500;
}

.question-navigation {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 20px;
}

.btn-nav {
  padding: 10px 32px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 200px;
  font-weight: 400;
}

.btn-prev {
  background: #E2F5FF;
  color: #0088d1;
  border: 1px solid #0088d1;
}

.btn-next {
  background: #0088d1;
  color: white;
  border: 1px solid #0088d1;
}

.btn-prev:hover {
  background: #f0f9ff;
  border-color: #0088d1;
  color: #0088d1;
}

.btn-next:hover {
  background: #0077bb;
  border-color: #0077bb;
}

.btn-prev:disabled {
  background: #f5f5f5;
  color: #bfbfbf;
  border-color: #e8e8e8;
  cursor: not-allowed;
}

/* 练习结果 */
.exam-result {
  display: flex;
  justify-content: center;
}

.result-card {
  background: white;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.result-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.result-score {
  margin-bottom: 24px;
}

.score-label {
  font-size: 12px;
  color: #999;
}

.score-value {
  font-size: 36px;
  font-weight: 600;
  color: #52c41a;
  margin: 0 8px;
}

.score-total {
  font-size: 18px;
  color: #666;
}

.result-details {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 0;
  margin-bottom: 24px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.result-item:last-child {
  margin-bottom: 0;
}

.result-item .label {
  color: #666;
}

.result-item .value {
  font-weight: 500;
  color: #333;
}

.result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.btn-review {
  background: #1890ff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-review:hover {
  background: #40a9ff;
}



/* 练习结果 */
.exam-result {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px 0;
}

.exam-result .exam-layout {
  display: flex;
  gap: 24px;
  margin: 0 auto;
}

.exam-result .exam-sidebar {
  flex-shrink: 0;
}

.exam-result .exam-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 提交成功页面样式 */
.submit-success {
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  max-width: 970px;
  width: 100%;
}

.success-image {
  margin-bottom: 30px;
}

.icon-container {
  position: relative;
  display: inline-block;
  font-size: 48px;
}

.lightbulb {
  font-size: 48px;
  margin-right: 20px;
}

.paper {
  font-size: 48px;
  margin-right: 20px;
}

.checkmark {
  font-size: 32px;
  color: #52c41a;
  position: absolute;
  top: -10px;
  right: -10px;
  background: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.success-message {
  margin: auto;
  width: 372px;
  height: 50px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  line-height: 25px;
  text-align: center;
  font-style: normal;
  margin-bottom: 40px;
}

.success-message h3 {
  color: #333;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
  padding: 0 20px;
}

.success-actions {
  display: flex;
  justify-content: center;
}

.btn-return-home {
  background: #0088D1;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 11px 70px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-return-home:hover {
  background: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .exam-layout {
    flex-direction: column;
  }

  .exam-sidebar {
    width: 100%;
    order: 2;
  }

  .exam-content {
    order: 1;
    margin-bottom: 20px;
  }

  .question-numbers {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .nav-content {
    margin-left: 0;
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .nav-content {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-left: 0;
    padding: 0 20px;
  }

  .nav-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .type-separator {
    margin: 0 8px;
  }

  .center-title {
    font-size: 28px;
  }

  .center-subtitle {
    font-size: 14px;
  }



  .exam-actions {
    flex-direction: column;
  }

  .question-navigation {
    flex-direction: column;
  }

  .btn-nav {
    width: 100%;
  }
}

/* 确认对话框样式 */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.confirm-dialog {
  background: white;
  border-radius: 8px;
  width: 320px;
  height: 168px;
  border-radius: 8px;
  margin: 20px;
  overflow: hidden;
}

.dialog-content {
  text-align: center;
}

.dialog-message {
  padding: 32px 24px 0 24px;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin: 0 0 39px 0;
  font-weight: 400;
}

.dialog-buttons {
  display: flex;
  justify-content: center;
}

.btn-cancel,
.btn-confirm {
  padding: 12px 32px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #E5E5E5;
  min-width: 80px;
  transition: all 0.2s;
}

.btn-cancel {
  width: 50%;
  background: white;
  color: #666;
  border-color: #ddd;
  border-bottom: none;
}

.btn-cancel:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .confirm-dialog {
    max-width: 320px;
  }

  .dialog-content {
    padding: 24px 20px 20px 20px;
  }

  .dialog-message {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .dialog-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .btn-cancel,
  .btn-confirm {
    width: 100%;
    padding: 12px 16px;
  }
}

/* 时间到提示对话框样式 */
.time-up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.time-up-dialog {
  background: white;
  border-radius: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 320px;
  min-height: 168px;
  width: 90%;
  margin: 20px;
  padding: 20px;
  position: relative;
}

.time-up-content {
  margin-top: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.time-up-image {
  margin-bottom: 24px;
}

.time-up-img {
  position: absolute;
  top: -55%;
  left: 25%;

  width: 178px;
  height: 178px;
  object-fit: contain;
}

.time-up-message {
  font-size: 17px;
  color: #000;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* 时间到对话框响应式调整 */
@media (max-width: 768px) {
  .time-up-dialog {
    max-width: 320px;
  }
}

/* 交卷后提交按钮背景变灰 - 样式已在上面定义 */

/* 练习结果弹窗样式 */
.practice-result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.modal-content {
  position: relative;
  background-color: #fff;
  z-index: 10000;
  width: 300px;
  height: 520px;
  overflow-y: auto;
  margin: auto;
  padding: 20px;
}



.modal-footer {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.practice-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.btn-review-practice,
.btn-return-course {
  background-color: #0088d1;
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 136, 209, 0.2);
}

.btn-review-practice:hover,
.btn-return-course:hover {
  background-color: #0066a3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 136, 209, 0.3);
}

.btn-return-home {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #333;
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-return-home:hover {
  background-color: #e9ecef;
  border-color: #0088d1;
  color: #0088d1;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-content {
    padding: 20px;
    max-width: 350px;
  }

  .score-section {
    gap: 12px;
  }

  .score-card {
    min-width: 100px;
  }

  .score-number {
    font-size: 36px;
  }

  .score-label {
    font-size: 12px;
  }

  .btn-review-practice,
  .btn-return-course,
  .btn-return-home {
    padding: 12px 20px;
    font-size: 14px;
  }

  .modal-header h3 {
    font-size: 20px;
  }

  .summary-header h4 {
    font-size: 18px;
  }
}



/* 答题报告样式 */
.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1.5px solid #E6E6E6;
  position: relative;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin: 0;
  text-align: center;
}

.difficulty-tag {
  position: absolute;
  top: 10px;
  right: 0;
  background: #0288D1;
  color: white;
  width: 56px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px 4px 4px 0;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  /* padding: 20px; */
}

/* 得分展示区域 */
.score-display {
  display: flex;
  justify-content: center;
  /* margin-bottom: 10px; */
  padding: 25px 0;
  position: relative;
}

.score-gauge {
  position: relative;
  width: 180px;
  height: 90px;
}

.gauge-circle {
  width: 180px;
  height: 90px;
  position: relative;
  background-image: url('/images/examination/score-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.gauge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.score-content {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: 100%;
}

.score-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.score-number {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

/* 答题详情 */
.quiz-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
  padding: 0 34px;
  padding-bottom: 15px;
  gap: 2px;
  border-bottom: 1.5px solid #E6E6E6;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  display: block;
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}

.detail-value {
  font-size: 12px;
  color: #999;
}

/* 得分情况 */
.score-breakdown {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1.5px solid #E6E6E6;
}

.score-breakdown h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 10px 0;
  text-align: center;
  font-weight: 600;
}

.breakdown-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-label {
  font-size: 12px;
  color: #666666;
  font-weight: 500;
  min-width: 25px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #E2F5FF;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 5px;
}

.progress-fill {
  height: 100%;
  background: #0288D1;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.item-score {
  font-size: 12px;
  color: #666666;
  font-weight: 600;
}

.item-score-number {
  color: #0288D1;
  margin-right: 2px;
}

/* 统计数据 */
.statistics {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  font-size: 24px;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-number.orange {
  color: #F38505;
}

.stat-number.red {
  color: #999;
  font-size: 10px;
}

.stat-number.red span {
  color: #FF3636;
  font-size: 24px;
}

.stat-number.blue {
  color: #3F76ED;
}

.stat-label {
  font-size: 10px;
  color: #999;
  line-height: 1.2;
}
</style>
