<!-- 试卷详情 -->
<template>
  <div class="page-container examDetails-addPage">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <div class="exam-title">{{ examInfo.title }}</div>
      <div class="exam-subtitle">总{{ examInfo.totalCount }}题 / 共{{ examInfo.totalScore }}分</div>

      <div class="exam-name-box">{{ examInfo.name }}</div>

      <div class="exam-info-box">
        <div class="info-item"><span class="label">试卷总分：</span>{{ examInfo.totalScore }}分</div>
        <div class="info-item"><span class="label">及格分数：</span>{{ examInfo.passScore }}分</div>
        <div class="info-item"><span class="label">我的得分：</span>{{ examInfo.myScore }}分</div>
        <div class="info-item"><span class="label">考试用时：</span>{{ examInfo.duration }}</div>
        <div class="info-item">
          <span class="label">考试结果：</span>
          <span :class="examInfo.passed ? 'result-pass' : 'result-fail'">
            {{ examInfo.passed ? '通过' : '无效' }}
          </span>
        </div>
      </div>

      <!-- 题目导航 -->
      <div v-for="group in questionGroups" :key="group.type" class="question-group">
        <div class="group-header">
          <span class="group-title">{{ group.typeName }}</span>
          <span class="group-count">{{ group.questions.length }}题 / 共{{ group.totalScore }}分</span>
        </div>
        <div class="question-nums">
          <div
            v-for="q in group.questions"
            :key="q.index"
            :class="['num-item', getNumClass(q), currentIndex === q.index ? 'num-active' : '']"
            @click="selectQuestion(q.index)"
          >
            {{ q.index }}
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容区：只展示当前选中题目 -->
    <div class="right-panel" v-if="currentQuestion">
      <div class="question-card">
        <!-- 题目头部 -->
        <div class="question-header">
          <div class="question-index-box">{{ currentQuestion.index }}</div>
          <div class="question-type-score">{{ currentQuestion.typeName }}（{{ currentQuestion.score }}分）</div>
          <div class="question-stars">
            <i
              v-for="s in 4"
              :key="s"
              :class="['star-icon', s <= currentQuestion.starLevel ? 'star-active' : 'star-empty']"
            >★</i>
          </div>
        </div>

        <!-- 题目内容（富文本） -->
        <div class="question-content" v-html="currentQuestion.content"></div>

        <!-- 单选题选项 -->
        <div v-if="currentQuestion.type === 'single'" class="options-list">
          <div
            v-for="opt in currentQuestion.options"
            :key="opt.key"
            :class="['option-item', isSelectedOption(currentQuestion, opt.key) ? 'option-selected' : '']"
          >
            <span class="option-radio">
              <i v-if="isSelectedOption(currentQuestion, opt.key)" class="el-icon-check radio-checked"></i>
              <i v-else class="radio-empty"></i>
            </span>
            <span class="option-key">{{ opt.key }}</span>
            <span class="option-text" v-html="opt.text"></span>
          </div>
        </div>

        <!-- 多选题选项 -->
        <div v-if="currentQuestion.type === 'multiple'" class="options-list">
          <div
            v-for="opt in currentQuestion.options"
            :key="opt.key"
            :class="['option-item', isSelectedOption(currentQuestion, opt.key) ? 'option-selected' : '']"
          >
            <span class="option-checkbox">
              <el-checkbox :value="isSelectedOption(currentQuestion, opt.key)" disabled></el-checkbox>
            </span>
            <span class="option-key">{{ opt.key }}</span>
            <span class="option-text" v-html="opt.text"></span>
          </div>
        </div>

        <!-- 判断题选项 -->
        <div v-if="currentQuestion.type === 'judge'" class="options-list">
          <div
            v-for="opt in judgeOptions"
            :key="opt.key"
            :class="['option-item', isSelectedOption(currentQuestion, opt.key) ? 'option-selected' : '']"
          >
            <span class="option-radio">
              <i v-if="isSelectedOption(currentQuestion, opt.key)" class="el-icon-check radio-checked"></i>
              <i v-else class="radio-empty"></i>
            </span>
            <span class="option-key">{{ opt.key }}</span>
            <span class="option-text">{{ opt.text }}</span>
          </div>
        </div>

        <!-- 答题结果 -->
        <div class="answer-result-box">
          <div class="answer-status">
            <span v-if="currentQuestion.isCorrect" class="status-correct">✅ 回答正确</span>
            <span v-else class="status-wrong">❌ 回答错误</span>
          </div>
          <div class="answer-detail">
            <div class="answer-row"><span class="answer-label">回答选项：</span>{{ currentQuestion.userAnswer }}</div>
            <div class="analysis-title">试题解析</div>
            <div class="analysis-content" v-html="currentQuestion.analysis"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { examElExamResultOverview, examElExamResultQuestionDetail } from '@/api/safetyEducationExaminationNew/index'
  export default {
    name: 'examDetails',
    props: {
      propsData: {}
    },
    data() {
      return {
        // 当前选中的题目序号
        currentIndex: null,
        // 左侧考试基本信息（来自 examElExamResultOverview 接口）
        examInfo: {
          title: '新生入学考试',
          name: '考试名称考试名称考试名称考试名称考试名称考试名称考试名称考试名称考试名称',
          totalCount: 12,
          totalScore: 100,
          passScore: 90,
          myScore: 70,
          duration: '29分56秒',
          passed: false
        },
        judgeOptions: [
          { key: 'A', text: '正确' },
          { key: 'B', text: '错误' }
        ],
        // 左侧题目分组（来自 examElExamResultOverview 接口）
        // status: 'correct' | 'wrong' | 'unanswered'
        questionGroups: [
          {
            type: 'single', typeName: '单选题', totalScore: 60,
            questions: [
              { index: 1, status: 'correct', score: 10 },
              { index: 2, status: 'wrong', score: 10 },
              { index: 3, status: 'correct', score: 10 },
              { index: 4, status: 'wrong', score: 10 },
              { index: 5, status: 'unanswered', score: 10 },
              { index: 6, status: 'correct', score: 10 }
            ]
          },
          {
            type: 'multiple', typeName: '多选题', totalScore: 30,
            questions: [
              { index: 7, status: 'wrong', score: 10 },
              { index: 8, status: 'correct', score: 10 },
              { index: 9, status: 'unanswered', score: 10 }
            ]
          },
          {
            type: 'judge', typeName: '判断题', totalScore: 10,
            questions: [
              { index: 10, status: 'correct', score: 10 },
              { index: 11, status: 'wrong', score: 10 },
              { index: 12, status: 'unanswered', score: 10 }
            ]
          }
        ],
        // 已加载的题目详情缓存，key 为题目序号
        questionCache: {},
        // 当前题目详情（来自 examElExamResultQuestionDetail 接口）
        currentQuestion: null,
        // 右侧加载中状态
        questionLoading: false,
        // 假数据：模拟 examElExamResultQuestionDetail 接口按序号返回
        mockQuestions: {
          1:  { index: 1,  type: 'single',   typeName: '单选题', score: 10, starLevel: 3, userAnswer: 'B', isCorrect: true,
                content: '<p>第1题：题目内容题目内容题目内容题目内容题目内容题目内容题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项内容A选项内容A' }, { key: 'B', text: '选项内容B选项内容B' }, { key: 'C', text: '选项内容C选项内容C' }, { key: 'D', text: '选项内容D选项内容D' }],
                analysis: '<p>本题考察...正确答案为B，因为...</p>' },
          2:  { index: 2,  type: 'single',   typeName: '单选题', score: 10, starLevel: 2, userAnswer: 'A', isCorrect: false,
                content: '<p>第2题：题目内容题目内容题目内容题目内容题目内容题目内容题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项内容A' }, { key: 'B', text: '选项内容B' }, { key: 'C', text: '选项内容C' }, { key: 'D', text: '选项内容D' }],
                analysis: '<p>本题正确答案为C，因为...</p>' },
          3:  { index: 3,  type: 'single',   typeName: '单选题', score: 10, starLevel: 1, userAnswer: 'C', isCorrect: true,
                content: '<p>第3题：题目内容题目内容题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          4:  { index: 4,  type: 'single',   typeName: '单选题', score: 10, starLevel: 0, userAnswer: 'D', isCorrect: false,
                content: '<p>第4题：题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          5:  { index: 5,  type: 'single',   typeName: '单选题', score: 10, starLevel: 0, userAnswer: '',  isCorrect: false,
                content: '<p>第5题：题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          6:  { index: 6,  type: 'single',   typeName: '单选题', score: 10, starLevel: 0, userAnswer: 'B', isCorrect: true,
                content: '<p>第6题：题目内容题目内容题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          7:  { index: 7,  type: 'multiple', typeName: '多选题', score: 10, starLevel: 2, userAnswer: 'A,B', isCorrect: false,
                content: '<p>第7题：多选题题目内容多选题题目内容多选题题目内容多选题题目内容多选题题目内容</p>',
                options: [{ key: 'A', text: '选项内容A' }, { key: 'B', text: '选项内容B' }, { key: 'C', text: '选项内容C' }, { key: 'D', text: '选项内容D' }],
                analysis: '<p>正确答案为A、B、C，解析内容...</p>' },
          8:  { index: 8,  type: 'multiple', typeName: '多选题', score: 10, starLevel: 0, userAnswer: 'A,C', isCorrect: true,
                content: '<p>第8题：多选题题目内容多选题题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          9:  { index: 9,  type: 'multiple', typeName: '多选题', score: 10, starLevel: 0, userAnswer: '',  isCorrect: false,
                content: '<p>第9题：多选题题目内容多选题题目内容</p>',
                options: [{ key: 'A', text: '选项A' }, { key: 'B', text: '选项B' }, { key: 'C', text: '选项C' }, { key: 'D', text: '选项D' }],
                analysis: '<p>解析内容。</p>' },
          10: { index: 10, type: 'judge',    typeName: '判断题', score: 10, starLevel: 1, userAnswer: 'A', isCorrect: true,
                content: '<p>第10题：以下说法正确的是：安全生产是企业第一责任。</p>',
                options: [],
                analysis: '<p>此说法正确，安全生产是企业的首要责任。</p>' },
          11: { index: 11, type: 'judge',    typeName: '判断题', score: 10, starLevel: 0, userAnswer: 'B', isCorrect: false,
                content: '<p>第11题：判断题题目内容判断题题目内容判断题题目内容</p>',
                options: [],
                analysis: '<p>解析内容。</p>' },
          12: { index: 12, type: 'judge',    typeName: '判断题', score: 10, starLevel: 0, userAnswer: '',  isCorrect: false,
                content: '<p>第12题：判断题题目内容判断题题目内容判断题题目内容</p>',
                options: [],
                analysis: '<p>解析内容。</p>' }
        }
      }
    },
    computed: {},
    created() {},
    mounted() {
      this.initialize()
    },
    methods: {
      initialize() {
        // 默认选中第一题（假数据直接从 data 里读取，无需接口）
        const firstGroup = this.questionGroups[0]
        if (firstGroup && firstGroup.questions.length) {
          this.$set(this, 'currentIndex', firstGroup.questions[0].index)
          this.$set(this, 'currentQuestion', this.mockQuestions[firstGroup.questions[0].index] || null)
        }
      },
      backPage() {
        this.$parent.tableButton(6)
      },
      // 点击左侧题号：切换当前题目，按需从接口加载详情
      selectQuestion(index) {
        this.$set(this, 'currentIndex', index)
        if (this.questionCache[index]) {
          this.$set(this, 'currentQuestion', this.questionCache[index])
          return
        }
        // 假数据直接从 mockQuestions 取，对接真实接口时替换为下方注释的接口调用
        const detail = this.mockQuestions[index] || null
        this.$set(this.questionCache, index, detail)
        this.$set(this, 'currentQuestion', detail)
      },
      // 判断选项是否被选中
      isSelectedOption(q, key) {
        if (!q.userAnswer) return false
        return q.userAnswer.split(',').includes(key)
      },
      // 根据左侧题目列表的 status 字段获取题号样式
      // status: 'correct' → 绿色，'wrong' → 红色，'unanswered' → 灰色
      getNumClass(q) {
        if (q.status === 'correct') return 'num-correct'
        if (q.status === 'wrong') return 'num-wrong'
        return 'num-unanswered'
      }
    }
  }
</script>

<style scoped lang="scss">
  .examDetails-addPage {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #f5f5f5;

    /* ========== 左侧面板 ========== */
    .left-panel {
      width: 400px;
      min-width: 400px;
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 20px 16px;
      border-right: 1px solid #e8e8e8;

      &::-webkit-scrollbar { width: 4px; }
      &::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

      .exam-title {
        font-size: 16px;
        font-weight: 700;
        color: #1890ff;
        margin-bottom: 4px;
      }

      .exam-subtitle {
        font-size: 13px;
        color: #666;
        margin-bottom: 16px;
      }

      .exam-name-box {
        font-size: 13px;
        color: #333;
        margin-bottom: 12px;
        line-height: 1.6;
      }

      .exam-info-box {
        background: #f5f5f5;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 20px;

        .info-item {
          font-size: 13px;
          color: #333;
          margin-bottom: 6px;
          line-height: 1.5;
          &:last-child { margin-bottom: 0; }

          .label { font-weight: 500; }
          .result-pass { color: #52c41a; font-weight: 700; }
          .result-fail { color: #faad14; font-weight: 700; }
        }
      }

      .question-group {
        margin-bottom: 16px;

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

          .group-title { font-size: 14px; font-weight: 600; color: #333; }
          .group-count { font-size: 12px; color: #999; }
        }

        .question-nums {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;

          .num-item {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            position: relative;
            color: #fff;
            transition: opacity 0.2s;

            &:hover { opacity: 0.85; }

            &.num-correct { background: #52c41a; }
            &.num-wrong { background: #ff4d4f; }
            &.num-unanswered { background: #999; color: #fff; }
            &.num-active {
              outline: 3px solid #1890ff;
              outline-offset: 1px;
            }
          }
        }
      }
    }

    /* ========== 右侧内容区 ========== */
    .right-panel {
      flex: 1;
      overflow-y: auto;
      padding: 20px;

      &::-webkit-scrollbar { width: 6px; }
      &::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

      .question-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;

        .question-header {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .question-index-box {
            width: 28px;
            height: 28px;
            background: #1890ff;
            color: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            margin-right: 10px;
            flex-shrink: 0;
          }

          .question-type-score {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            flex: 1;
          }

          .question-stars {
            display: flex;
            gap: 2px;

            .star-icon {
              font-size: 18px;
              font-style: normal;
              &.star-active { color: #fadb14; }
              &.star-empty { color: #d9d9d9; }
            }
          }
        }

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

        .options-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-bottom: 16px;

          .option-item {
            display: flex;
            align-items: center;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            padding: 10px 14px;
            cursor: default;
            transition: border-color 0.2s;

            &.option-selected {
              border-color: #1890ff;
              background: #e6f7ff;

              .option-key { color: #1890ff; }
              .option-text { color: #1890ff; }
            }

            .option-radio {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              border: 1px solid #d9d9d9;
              margin-right: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;

              .radio-checked { color: #1890ff; font-size: 12px; }
              .radio-empty { display: block; width: 8px; height: 8px; }
            }

            .option-checkbox {
              margin-right: 10px;
              flex-shrink: 0;
            }

            .option-key {
              font-size: 14px;
              font-weight: 600;
              color: #666;
              margin-right: 8px;
              width: 16px;
              flex-shrink: 0;
            }

            .option-text {
              font-size: 14px;
              color: #333;
              flex: 1;
            }
          }
        }

        .answer-result-box {
          background: #f5f5f5;
          border-radius: 6px;
          padding: 14px 16px;

          .answer-status {
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: 600;

            .status-correct { color: #52c41a; }
            .status-wrong { color: #ff4d4f; }
          }

          .answer-detail {
            .answer-row {
              font-size: 14px;
              color: #333;
              margin-bottom: 10px;

              .answer-label { font-weight: 600; }
            }

            .analysis-title {
              font-size: 14px;
              font-weight: 600;
              color: #333;
              margin-bottom: 6px;
            }

            .analysis-content {
              font-size: 13px;
              color: #fa8c16;
              line-height: 1.7;
            }
          }
        }
      }
    }
  }
</style>
