<template>
  <view class="exam-page">
    <!-- 考试信息 -->
    <view class="exam-header" v-if="!examStarted">
      <view class="exam-title">{{ examInfo.examName }}</view>
      <view class="exam-info">
        <view class="info-item">
          <text class="label">考试时长：</text>
          <text class="value">{{ examInfo.duration }}分钟</text>
        </view>
        <view class="info-item">
          <text class="label">总分：</text>
          <text class="value">{{ examInfo.totalScore }}分</text>
        </view>
        <view class="info-item">
          <text class="label">及格分：</text>
          <text class="value">{{ examInfo.passScore }}分</text>
        </view>
        <view class="info-item">
          <text class="label">题目数量：</text>
          <text class="value">{{ examInfo.questionCount }}题</text>
        </view>
      </view>
      <view class="exam-description">{{ examInfo.description }}</view>
      <button class="btn-start" @click="startExam">开始考试</button>
    </view>

    <!-- 考试进行中 -->
    <view class="exam-content" v-if="examStarted && !examFinished">
      <!-- 倒计时 -->
      <view class="timer-bar">
        <text class="timer-text">剩余时间：{{ formatTime(remainingTime) }}</text>
        <text class="question-progress">{{ currentQuestionIndex + 1 }}/{{ questions.length }}</text>
      </view>

      <!-- 题目 -->
      <view class="question-card">
        <view class="question-header">
          <text class="question-type">{{ getQuestionType(currentQuestion.questionType) }}</text>
          <text class="question-score">{{ currentQuestion.score }}分</text>
        </view>
        <view class="question-content">{{ currentQuestion.questionContent }}</view>

        <!-- 选项 -->
        <view class="options">
          <view 
            v-for="(option, index) in currentQuestion.options" 
            :key="index"
            class="option-item"
            :class="{ 'selected': isOptionSelected(option.key) }"
            @click="selectOption(option.key)"
          >
            <view class="option-key">{{ option.key }}</view>
            <view class="option-text">{{ option.value }}</view>
          </view>
        </view>

        <!-- 填空题输入框 -->
        <view v-if="currentQuestion.questionType === 'fill'" class="fill-input">
          <textarea 
            v-model="answers[currentQuestion.id]" 
            placeholder="请输入答案"
            class="textarea"
          ></textarea>
        </view>
      </view>

      <!-- 导航按钮 -->
      <view class="nav-buttons">
        <button class="btn-prev" @click="prevQuestion" :disabled="currentQuestionIndex === 0">上一题</button>
        <button class="btn-next" @click="nextQuestion" v-if="currentQuestionIndex < questions.length - 1">下一题</button>
        <button class="btn-submit" @click="confirmSubmit" v-else>提交答卷</button>
      </view>

      <!-- 答题卡 -->
      <view class="answer-sheet">
        <view class="sheet-title">答题卡</view>
        <view class="sheet-grid">
          <view 
            v-for="(question, index) in questions" 
            :key="index"
            class="sheet-item"
            :class="{ 
              'current': index === currentQuestionIndex,
              'answered': answers[question.id]
            }"
            @click="jumpToQuestion(index)"
          >
            {{ index + 1 }}
          </view>
        </view>
      </view>
    </view>

    <!-- 考试结果 -->
    <view class="exam-result" v-if="examFinished">
      <view class="result-icon">{{ examResult.isPassed ? '🎉' : '😢' }}</view>
      <view class="result-title">{{ examResult.isPassed ? '恭喜通过考试！' : '很遗憾，未通过考试' }}</view>
      <view class="result-score">
        <text class="score-value">{{ examResult.totalScore }}</text>
        <text class="score-label">分</text>
      </view>
      <view class="result-stats">
        <view class="stat-item">
          <text class="stat-value">{{ examResult.correctCount }}</text>
          <text class="stat-label">答对</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ examResult.totalCount - examResult.correctCount }}</text>
          <text class="stat-label">答错</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ examResult.passScore }}</text>
          <text class="stat-label">及格分</text>
        </view>
      </view>

      <!-- 答题详情 -->
      <view class="answer-details">
        <view class="details-title">答题详情</view>
        <view 
          v-for="(result, index) in examResult.results" 
          :key="index"
          class="detail-item"
          :class="{ 'correct': result.isCorrect, 'wrong': !result.isCorrect }"
        >
          <view class="detail-header">
            <text class="detail-index">第{{ index + 1 }}题</text>
            <text class="detail-score">{{ result.isCorrect ? '✓' : '✗' }} {{ result.score }}分</text>
          </view>
          <view class="detail-answer">
            <text class="answer-label">你的答案：</text>
            <text class="answer-value">{{ result.userAnswer || '未作答' }}</text>
          </view>
          <view class="detail-answer" v-if="!result.isCorrect">
            <text class="answer-label">正确答案：</text>
            <text class="answer-value correct-answer">{{ result.correctAnswer }}</text>
          </view>
          <view class="detail-explanation" v-if="result.explanation">
            <text class="explanation-label">解析：</text>
            <text class="explanation-text">{{ result.explanation }}</text>
          </view>
        </view>
      </view>

      <view class="result-buttons">
        <button class="btn-back" @click="goBack">返回</button>
        <button class="btn-retry" @click="retryExam" v-if="!examResult.isPassed">重新考试</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      examType: '',
      level: '',
      examInfo: {},
      examStarted: false,
      examFinished: false,
      questions: [],
      currentQuestionIndex: 0,
      answers: {},
      remainingTime: 0,
      timer: null,
      examResult: null
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex] || {};
    }
  },
  onLoad(options) {
    this.examType = options.courseType;
    this.level = options.level;
    this.loadExamInfo();
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    // 加载考试信息
    async loadExamInfo() {
      try {
        const res = await this.$http.get('/api/training/exams', {
          params: { examType: this.examType }
        });
        this.examInfo = res.data.find(exam => exam.level === this.level) || res.data[0];
      } catch (error) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    },

    // 开始考试
    async startExam() {
      try {
        const res = await this.$http.post('/api/training/start-exam', {
          examId: this.examInfo.id
        });
        this.questions = res.data.questions.map(q => ({
          ...q,
          options: JSON.parse(q.options)
        }));
        this.remainingTime = this.examInfo.duration * 60;
        this.examStarted = true;
        this.startTimer();
      } catch (error) {
        uni.showToast({ title: error.message || '开始考试失败', icon: 'none' });
      }
    },

    // 开始计时
    startTimer() {
      this.timer = setInterval(() => {
        this.remainingTime--;
        if (this.remainingTime <= 0) {
          this.submitExam();
        }
      }, 1000);
    },

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

    // 获取题目类型
    getQuestionType(type) {
      const types = {
        single: '单选题',
        multiple: '多选题',
        judge: '判断题',
        fill: '填空题'
      };
      return types[type] || '';
    },

    // 选择选项
    selectOption(key) {
      const questionId = this.currentQuestion.id;
      const questionType = this.currentQuestion.questionType;

      if (questionType === 'multiple') {
        // 多选题
        let selected = this.answers[questionId] || '';
        if (selected.includes(key)) {
          selected = selected.replace(key, '');
        } else {
          selected += key;
        }
        this.$set(this.answers, questionId, selected.split('').sort().join(''));
      } else {
        // 单选题和判断题
        this.$set(this.answers, questionId, key);
      }
    },

    // 判断选项是否被选中
    isOptionSelected(key) {
      const answer = this.answers[this.currentQuestion.id] || '';
      return answer.includes(key);
    },

    // 上一题
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--;
      }
    },

    // 下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++;
      }
    },

    // 跳转到指定题目
    jumpToQuestion(index) {
      this.currentQuestionIndex = index;
    },

    // 确认提交
    confirmSubmit() {
      const unanswered = this.questions.filter(q => !this.answers[q.id]).length;
      if (unanswered > 0) {
        uni.showModal({
          title: '提示',
          content: `还有${unanswered}题未作答，确定要提交吗？`,
          success: (res) => {
            if (res.confirm) {
              this.submitExam();
            }
          }
        });
      } else {
        this.submitExam();
      }
    },

    // 提交考试
    async submitExam() {
      if (this.timer) {
        clearInterval(this.timer);
      }

      try {
        const res = await this.$http.post('/api/training/submit-exam', {
          examId: this.examInfo.id,
          answers: this.answers
        });
        this.examResult = res.data;
        this.examFinished = true;
      } catch (error) {
        uni.showToast({ title: '提交失败', icon: 'none' });
      }
    },

    // 重新考试
    retryExam() {
      this.examStarted = false;
      this.examFinished = false;
      this.currentQuestionIndex = 0;
      this.answers = {};
      this.examResult = null;
    },

    // 返回
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.exam-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.exam-header {
  background: #fff;
  padding: 40rpx;
  text-align: center;

  .exam-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .exam-info {
    margin-bottom: 30rpx;

    .info-item {
      display: flex;
      justify-content: center;
      margin-bottom: 20rpx;
      font-size: 28rpx;

      .label {
        color: #999;
      }

      .value {
        color: #333;
        font-weight: bold;
      }
    }
  }

  .exam-description {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40rpx;
  }

  .btn-start {
    width: 400rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    border: none;
  }
}

.exam-content {
  padding: 20rpx;
}

.timer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .timer-text {
    font-size: 28rpx;
    color: #ff4d4f;
    font-weight: bold;
  }

  .question-progress {
    font-size: 28rpx;
    color: #999;
  }
}

.question-card {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .question-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .question-type {
      font-size: 24rpx;
      color: #7dd3c0;
      padding: 8rpx 16rpx;
      background: rgba(125, 211, 192, 0.1);
      border-radius: 8rpx;
    }

    .question-score {
      font-size: 24rpx;
      color: #ff4d4f;
    }
  }

  .question-content {
    font-size: 30rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 30rpx;
  }

  .options {
    .option-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background: #f5f5f5;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      border: 2rpx solid transparent;

      &.selected {
        background: rgba(125, 211, 192, 0.1);
        border-color: #7dd3c0;
      }

      .option-key {
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        background: #fff;
        border-radius: 50%;
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
      }

      .option-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .fill-input {
    .textarea {
      width: 100%;
      min-height: 200rpx;
      padding: 20rpx;
      background: #f5f5f5;
      border-radius: 12rpx;
      font-size: 28rpx;
    }
  }
}

.nav-buttons {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;

  button {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    border: none;
  }

  .btn-prev {
    background: #f5f5f5;
    color: #333;

    &[disabled] {
      opacity: 0.5;
    }
  }

  .btn-next {
    background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
    color: #fff;
  }

  .btn-submit {
    background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
    color: #fff;
  }
}

.answer-sheet {
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;

  .sheet-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }

  .sheet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20rpx;

    .sheet-item {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #f5f5f5;
      border-radius: 12rpx;
      font-size: 28rpx;
      color: #333;

      &.current {
        background: #7dd3c0;
        color: #fff;
      }

      &.answered {
        background: rgba(125, 211, 192, 0.3);
      }
    }
  }
}

.exam-result {
  background: #fff;
  padding: 40rpx;
  text-align: center;

  .result-icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }

  .result-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }

  .result-score {
    margin-bottom: 40rpx;

    .score-value {
      font-size: 80rpx;
      font-weight: bold;
      color: #7dd3c0;
    }

    .score-label {
      font-size: 32rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }

  .result-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40rpx;

    .stat-item {
      text-align: center;

      .stat-value {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .answer-details {
    text-align: left;
    margin-top: 40rpx;

    .details-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .detail-item {
      padding: 20rpx;
      background: #f5f5f5;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      border-left: 4rpx solid #7dd3c0;

      &.wrong {
        border-left-color: #ff4d4f;
      }

      .detail-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15rpx;

        .detail-index {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }

        .detail-score {
          font-size: 28rpx;
        }
      }

      .detail-answer {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;

        .answer-label {
          color: #999;
        }

        .correct-answer {
          color: #52c41a;
        }
      }

      .detail-explanation {
        font-size: 24rpx;
        color: #999;
        line-height: 1.6;
        margin-top: 15rpx;
        padding-top: 15rpx;
        border-top: 1rpx solid #e0e0e0;

        .explanation-label {
          font-weight: bold;
        }
      }
    }
  }

  .result-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;

    button {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      border: none;
    }

    .btn-back {
      background: #f5f5f5;
      color: #333;
    }

    .btn-retry {
      background: linear-gradient(135deg, #7dd3c0, #5bc0ad);
      color: #fff;
    }
  }
}
</style>
