
<template>
  <van-popup v-model:show="innerShow" position="top" style="height: 100%">
    <van-sticky>
      <van-nav-bar title="错题回顾" left-arrow @click-left="close" />
    </van-sticky>

    <div v-if="loading" class="loading-wrapper">
      <van-loading>加载中...</van-loading>
    </div>

    <div v-else-if="error" class="error">加载失败：{{ error }}</div>

    <div v-else>
      <div style="margin: 10px 20px; font-weight: bold;">
        本次得分：{{ totalScore }}
      </div>
      <van-divider />

      <!-- 遍历错题/全部题 -->
      <div v-for="item in mistakeData" :key="item.id" class="question">
        <p>
          <span v-if="item.category === '单选'">[单选]</span>
          <span v-if="item.category === '多选'">[多选]</span>
          <span v-if="item.category === '判断'">[判断]</span>
          {{ item.stem }}
        </p>

        <p>
          <span :style="{ color: item.userAnswer === item.answer ? '#007aff' : 'red' }">
            提交答案: {{ item.userAnswer || '未作答' }}
          </span>
        </p>
        <p style="color: #007aff">正确答案: {{ item.answer }}</p>

        <div v-if="item.category === '单选' || item.category === '多选'" class="kong">
          <div>A. {{ item.optionA }}</div>
          <div>B. {{ item.optionB }}</div>
          <div>C. {{ item.optionC }}</div>
          <div v-if="item.optionD">D. {{ item.optionD }}</div>
          <div v-if="item.optionE">E. {{ item.optionE }}</div>
        </div>
        <div v-if="item.category === '判断'" class="kong">
          <div>A. 正确</div>
          <div>B. 错误</div>
        </div>

        <van-divider />
      </div>

      <!-- ✅ 新增：底部确定按钮 -->
      <div style="text-align: center; margin: 20px 0;">
        <van-button type="primary" size="large" @click="close">确定</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { getCurrentInstance, ref, watch } from 'vue';
import { showFailToast } from 'vant';
const { proxy } = getCurrentInstance();
const props = defineProps({
  show: Boolean,
  courseId: String,
  userId: String
});

const emit = defineEmits(['update:show']);

const innerShow = ref(false);
const loading = ref(false);
const error = ref('');
const mistakeData = ref([]);
const totalScore = ref(0);

// 同步外部 show 控制
watch(() => props.show, (val) => {
  innerShow.value = val;
  if (val) {
    loadMistakeData();
  }
});

const close = () => {
  innerShow.value = false;
  emit('update:show', false);
};

const loadMistakeData = async () => {
  loading.value = true;
  error.value = '';
  try {
    const query = { headId: props.courseId };
    const res = await proxy.$axios.post('/sgsafe/ExamLine/queryMistake', {
      params: JSON.stringify(query)
    });

    if (res.data.code === 0) {
      const data = res.data.data || [];
      mistakeData.value = data;

      // 注意：queryMistake 返回的是每道题的 userAnswer 和 answer
      // 总分通常是 userScore 字段之和
      totalScore.value = data.reduce((sum, item) => sum + (Number(item.userScore) || 0), 0);
    } else {
      error.value = res.data.msg || '获取错题失败';
      showFailToast(error.value);
    }
  } catch (err) {
    console.error('加载错题失败', err);
    error.value = '网络错误';
    showFailToast('加载错题失败');
  } finally {
    loading.value = false;
  }
};
</script>