<template>
  <div class="exam-container">
    <div class="exam-header">
      <h2>安全模拟考试</h2>
      <div class="exam-controls" v-if="!isExamStarted">
        <select v-model="examType">
          <option value="comprehensive">综合测试</option>
          <option value="special">专项测试</option>
        </select>
        <button @click="startExam" class="start-btn">开始考试</button>
      </div>
      <div class="exam-info" v-if="isExamStarted">
        <span class="progress">题目：{{ currentQuestion + 1 }}/{{ questions.length }}</span>
        <span class="timer">用时：{{ formattedTime }}</span>
        <button @click="finishExam" class="finish-btn">交卷</button>
      </div>
    </div>
    <div class="exam-content" v-if="isExamStarted && questions.length > 0">
      <div class="question-card">
        <div class="question-header">
          <span class="question-number">第 {{ currentQuestion + 1 }} 题</span>
          <span class="question-type">{{ currentQ.type }}</span>
        </div>
        <div class="question-content">
          {{ currentQ.question }}
        </div>
        <div class="options">
          <div
            v-for="(option, index) in currentQ.options"
            :key="index"
            :class="['option', { selected: userAnswers[currentQuestion] === index }]"
            @click="selectAnswer(index)"
          >
            <span class="option-label">{{ String.fromCharCode(65 + index) }}</span>
            <span class="option-text">{{ option }}</span>
          </div>
        </div>
        <div class="question-nav">
          <button @click="prevQuestion" :disabled="currentQuestion === 0">上一题</button>
          <button @click="nextQuestion" :disabled="currentQuestion === questions.length - 1">下一题</button>
        </div>
      </div>
      <div class="question-list">
        <h4>答题卡</h4>
        <div class="question-numbers">
          <div
            v-for="(q, i) in questions"
            :key="i"
            :class="['number', { active: i === currentQuestion, answered: userAnswers[i] !== undefined }]"
            @click="jumpToQuestion(i)"
          >{{ i + 1 }}</div>
        </div>
      </div>
    </div>
    <div class="exam-result" v-if="examResult">
      <h3>考试结果</h3>
      <div class="score-card">
        <div class="score">{{ examResult.score }}</div>
        <div class="score-label">总分</div>
      </div>
      <div class="stats">
        <span>正确：{{ examResult.correct }}/{{ questions.length }}</span>
        <span>用时：{{ formattedTime }}</span>
      </div>
      <button @click="resetExam" class="restart-btn">重新考试</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { getMockQuestions } from '@/mock/examMock'

const examType = ref('comprehensive')
const isExamStarted = ref(false)
const questions = ref([])
const currentQuestion = ref(0)
const userAnswers = ref({})
const examResult = ref(null)
const timer = ref(0)
let timerInterval = null

const currentQ = computed(() => questions.value[currentQuestion.value] || {})

const formattedTime = computed(() => {
  const mins = Math.floor(timer.value / 60)
  const secs = timer.value % 60
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
})

const startExam = () => {
  questions.value = getMockQuestions()
  isExamStarted.value = true
  currentQuestion.value = 0
  userAnswers.value = {}
  examResult.value = null
  timer.value = 0
  timerInterval = setInterval(() => timer.value++, 1000)
}

const selectAnswer = (index) => {
  userAnswers.value[currentQuestion.value] = index
}

const nextQuestion = () => {
  if (currentQuestion.value < questions.value.length - 1) {
    currentQuestion.value++
  }
}

const prevQuestion = () => {
  if (currentQuestion.value > 0) {
    currentQuestion.value--
  }
}

const jumpToQuestion = (index) => {
  currentQuestion.value = index
}

const finishExam = () => {
  clearInterval(timerInterval)
  let correct = 0
  questions.value.forEach((q, i) => {
    if (userAnswers.value[i] === q.answer) correct++
  })
  const score = Math.round((correct / questions.value.length) * 100)
  examResult.value = { score, correct, total: questions.value.length }
}

const resetExam = () => {
  isExamStarted.value = false
  examResult.value = null
  questions.value = []
}

onUnmounted(() => {
  if (timerInterval) clearInterval(timerInterval)
})
</script>

<style scoped lang="scss">
.exam-container {
  height: 100%;
  background: #f8f9fa;
  overflow-y: auto;
  padding: 24px;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  h2 {
    font-size: 20px;
    color: #333;
  }

  .exam-controls {
    display: flex;
    gap: 12px;

    select {
      padding: 8px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      font-size: 14px;
    }

    .start-btn {
      padding: 8px 20px;
      background: #1890ff;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;

      &:hover {
        background: #40a9ff;
      }
    }
  }

  .exam-info {
    display: flex;
    gap: 16px;
    align-items: center;

    .progress, .timer {
      color: #666;
    }

    .finish-btn {
      padding: 8px 16px;
      background: #ff4d4f;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}

.exam-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.question-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

  .question-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .question-number {
      font-weight: 500;
      color: #333;
    }

    .question-type {
      padding: 2px 8px;
      background: #f0f5ff;
      color: #1890ff;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  .question-content {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .options {
    .option {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      margin-bottom: 8px;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        border-color: #1890ff;
      }

      &.selected {
        background: #f0f5ff;
        border-color: #1890ff;
      }

      .option-label {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 50%;
        margin-right: 12px;
        font-size: 14px;
      }

      &.selected .option-label {
        background: #1890ff;
        color: #fff;
      }
    }
  }

  .question-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;

    button {
      padding: 8px 20px;
      border: 1px solid #d9d9d9;
      background: #fff;
      border-radius: 6px;
      cursor: pointer;

      &:hover:not(:disabled) {
        border-color: #1890ff;
        color: #1890ff;
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }
}

.question-list {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  height: fit-content;

  h4 {
    margin-bottom: 16px;
    color: #333;
  }

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

    .number {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;

      &:hover {
        border-color: #1890ff;
      }

      &.active {
        background: #1890ff;
        color: #fff;
        border-color: #1890ff;
      }

      &.answered {
        background: #52c41a;
        color: #fff;
        border-color: #52c41a;
      }
    }
  }
}

.exam-result {
  text-align: center;
  background: #fff;
  padding: 48px;
  border-radius: 12px;

  .score-card {
    margin: 24px 0;

    .score {
      font-size: 64px;
      font-weight: 600;
      color: #1890ff;
    }

    .score-label {
      color: #666;
      font-size: 14px;
    }
  }

  .stats {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    gap: 24px;
    color: #666;
  }

  .restart-btn {
    padding: 10px 32px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
}
</style>
