<template>
  <div class="quiz-container">
    <!-- 加载中提示 -->
    <div v-if="isLoading" class="loading">加载中...</div>

    <!-- 当前题目 -->
    <div v-else-if="currentQuestion" class="question-container">
      <h2>题目 {{ questionCount }}</h2>
      <QuestionText :text="currentQuestion.text" :medias="data.medias" />
      <div class="options">
        <div v-for="(answer, idx) in currentQuestion.answers.slice(1)" :key="idx" class="option">
          <label :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
            <input
                type="radio"
                :value="idx"
                v-model="userAnswer"
                :name="'question'"
                :disabled="submitted"
            />
            <span v-html="processMedia(answer, data.medias)"></span>
          </label>
        </div>
      </div>

      <!-- 提交按钮或下一题按钮 -->
      <button v-if="!submitted" @click="submitAnswer" class="submit-btn">提交答案</button>
      <button v-else @click="nextQuestion" class="next-btn">下一题</button>

      <!-- 答题结果和解析 -->
      <div v-if="submitted" class="result">
        <p v-if="isCorrect" class="correct-text">答对了！</p>
        <p v-else class="incorrect-text">答错了。</p>
        <p>正确答案是：<span v-html="processMedia(correctAnswerText, data.medias)"></span></p>
        <div v-if="currentQuestion.explanation" class="explanation">
          <h3>解题思路</h3>
          <div v-html="processMedia(currentQuestion.explanation, data.medias)"></div>
        </div>

        <!-- 类似题目对比 -->
        <div v-if="similarQuestions.length > 0" class="similar-questions">
          <h3>对比其他类似题目</h3>
          <div v-for="(similar, index) in similarQuestions" :key="index" class="similar-question">
            <h4>题目 {{ index + 1 }}</h4>
            <QuestionText :text="similar.text" :medias="data.medias" />
            <p>正确答案：<span v-html="processMedia(similar.correctAnswer, data.medias)"></span></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 进度条 -->
    <div v-if="!isLoading" class="progress-bar">
      <div
          class="progress"
          :style="{
          width: `${progressPercentage}%`,
          background: `linear-gradient(to right, red, yellow, green ${progressPercentage}%, transparent ${progressPercentage}%)`
        }"
      >
        {{ progressPercentage.toFixed(1) }}%
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import QuestionText from './QuestionText.vue';

// 响应式数据存储 JSON
const data = reactive({
  itemtypes: [],
  texts: [],
  explanations: [],
  gradings: [],
  answerkeys: [],
  answers: [],
  medias: {}
});

// 当前题目、用户答案、状态变量
const currentQuestion = ref(null);
const userAnswer = ref(null);
const submitted = ref(false);
const isCorrect = ref(false);
const correctAnswerText = ref('');
const correctIndex = ref(null);
const isLoading = ref(true);
const questionCount = ref(1);
const similarQuestions = ref([]); // 类似题目数组

// 最近20题的答题记录
const recentResults = ref([]);

// 进度条百分比
const progressPercentage = computed(() => {
  if (recentResults.value.length === 0) return 0;
  const correctCount = recentResults.value.filter(result => result).length;
  return (correctCount / Math.min(recentResults.value.length, 20)) * 100;
});

// 加载数据
onMounted(async () => {
  try {
    const response = await axios.get('https://mva-cyber.club/data/file/phy250226.json');
    const jsonData = response.data;
    Object.assign(data, jsonData);

    // 随机选择第一道题
    selectRandomQuestion();
  } catch (error) {
    console.error('加载数据失败:', error);
    alert('数据加载失败，请稍后重试。');
  } finally {
    isLoading.value = false;
  }
});

// 随机选择一道题
function selectRandomQuestion() {
  if (data.texts.length <= 1) return;
  const index = Math.floor(Math.random() * (data.texts.length - 1)) + 1;
  currentQuestion.value = {
    text: data.texts[index],
    answers: data.answers[index],
    answerkeys: data.answerkeys[index],
    explanation: data.explanations[index],
    type: data.itemtypes[index] // 保存题目类型用于查找相似题目
  };
  userAnswer.value = null;
  submitted.value = false;
  similarQuestions.value = [];
}

// 处理媒体标签
function processMedia(text, medias) {
  if (!text) return '';
  const mediaRegex = /<media i(\d+)>/g;
  return text.replace(mediaRegex, (match, id) => {
    const mediaKey = `m${id}`;
    if (medias[mediaKey]) {
      const [type, url, width, height] = medias[mediaKey];
      if (type === 'image') {
        return `<img src="${url}" width="${width}" height="${height}" alt="Question Image" />`;
      }
    }
    return '';
  });
}
function calculateStringSimilarity(str1, str2) {
  // 处理空字符串或非字符串输入
  if (typeof str1 !== 'string' || typeof str2 !== 'string') {
    return 0;
  }

  // 如果两个字符串完全相同，直接返回100%
  if (str1 === str2) {
    return 100;
  }

  // 获取字符串长度
  const len1 = str1.length;
  const len2 = str2.length;

  // 如果任一字符串为空，返回0%
  if (len1 === 0 || len2 === 0) {
    return 0;
  }

  // 创建二维数组
  const matrix = Array(len2 + 1).fill(null).map(() =>
      Array(len1 + 1).fill(null)
  );

  // 初始化第一行和第一列
  for (let i = 0; i <= len1; i++) {
    matrix[0][i] = i;
  }
  for (let j = 0; j <= len2; j++) {
    matrix[j][0] = j;
  }

  // 填充矩阵
  for (let j = 1; j <= len2; j++) {
    for (let i = 1; i <= len1; i++) {
      const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
      matrix[j][i] = Math.min(
          matrix[j][i - 1] + 1, // 删除
          matrix[j - 1][i] + 1, // 插入
          matrix[j - 1][i - 1] + indicator // 替换
      );
    }
  }

  // 计算相似度百分比
  const maxLength = Math.max(len1, len2);
  const levenshteinDistance = matrix[len2][len1];
  const similarity = ((maxLength - levenshteinDistance) / maxLength) * 100;

  // 返回保留两位小数的百分比
  return Number(similarity.toFixed(2));
}
// 查找类似题目
function findSimilarQuestions() {
  const currentText = currentQuestion.value.text;
  const similar = [];
  for (let i = 1; i < data.itemtypes.length; i++) {
    console.log(calculateStringSimilarity(data.texts[i], currentText), {1: data.texts[i]})
    if (
        calculateStringSimilarity(data.texts[i], currentText) > 80 && // 相似度
        data.texts[i] !== currentQuestion.value.text// 不是当前题目
        // similar.length < 2 // 最多选 2 道
    ) {
      const correctIdx = data.answerkeys[i].findIndex((key, idx) => idx > 0 && key === 1) - 1;
      similar.push({
        text: data.texts[i],
        correctAnswer: data.answers[i][correctIdx + 1]
      });
    }
  }
  similarQuestions.value = similar;
}

// 提交答案
function submitAnswer() {
  if (userAnswer.value === null) {
    alert('请选择一个答案！');
    return;
  }
  correctIndex.value = currentQuestion.value.answerkeys.findIndex((key, idx) => idx > 0 && key === 1) - 1;
  isCorrect.value = userAnswer.value === correctIndex.value;
  correctAnswerText.value = currentQuestion.value.answers[correctIndex.value + 1];
  submitted.value = true;

  // 更新最近20题记录
  recentResults.value.push(isCorrect.value);
  if (recentResults.value.length > 20) {
    recentResults.value.shift();
  }

  // 查找类似题目
  findSimilarQuestions();
}

// 下一题
function nextQuestion() {
  questionCount.value++;
  selectRandomQuestion();
}
</script>

<style scoped>
.quiz-container {
  max-width: 800px;
  margin: 20px auto;
  height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #666;
}

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

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  margin-top: 20px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  transition: width 0.5s ease;
}

.options {
  margin-top: 20px;
}

.option {
  margin: 10px 0;
}

.option label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}

.option input {
  margin-right: 10px;
}

.option label.correct {
  color: green;
  font-weight: bold;
}

.option label.incorrect {
  color: red;
}

.submit-btn,
.next-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn:hover,
.next-btn:hover {
  background-color: #0056b3;
}

.result {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px solid #ddd;
}

.correct-text {
  color: green;
  margin: 10px 0;
}

.incorrect-text {
  color: red;
  margin: 10px 0;
}

.explanation {
  margin-top: 20px;
}

.explanation h3 {
  margin-bottom: 10px;
}

.similar-questions {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px dashed #ddd;
}

.similar-question {
  margin-bottom: 15px;
}

.similar-question h4 {
  margin-bottom: 10px;
}
</style>