<!-- 开始考试 -->
<template>
  <div class="app-container startTheExam">
    <div class="page-container-top-max-big-box" v-if="pageType === 1">
      <p class="top-1-p">开始考试</p>
      <p class="top-2-p" @click="backPage()">返回</p>
    </div>
    <div class="content-box" v-if="pageType === 1">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="exam-title">{{ examInfo.examTypeName }}</div>
        <div class="exam-subtitle">总{{ examInfo.questionCount }}题 / 共{{ examInfo.totalScore }}分</div>
        <div class="exam-name-box scrollbar-box">{{ examInfo.examName }}</div>
        <p class="examKindType" v-if="examInfo.examKind== 2">补考</p>
        <div class="question-group-max-box">
          <!-- 题目导航 -->
          <div v-for="(item,index) in questionTypeGroups" :key="index" class="question-group">
            <div class="group-header">
              <span class="group-title">{{ item.questionTypeName }}</span>
              <span class="group-count">{{ item.questionCount }}题 / 共{{ item.totalScore }}分</span>
            </div>
            <div class="question-nums">
              <div
                v-for="(minItem,minIndex) in item.questions"
                :key="minIndex"
                :class="['num-item', getNumClass(minItem), groupIndex===index&&questionIndex===minIndex ? 'num-active' : '']"
                @click="selectQuestion(minItem,index,minIndex)"
              >
                {{ minItem.questionNo }}
              </div>
            </div>
          </div>
        </div>
        <div class="left-time-box">
          <p>剩余时间</p>
          <p>{{formatTime(displayRemaining)}}</p>
        </div>
      </div>
      <!-- 右侧内容区：只展示当前选中题目 -->
      <div class="right-panel" v-if="currentQuestion">
        <div class="question-card scrollbar-box">
          <!-- 题目头部 -->
          <div class="question-header">
            <div class="question-index-box">{{ currentQuestion.questionNo }}</div>
            <div class="question-type-score">{{ currentQuestion.questionTypeName }}（{{ currentQuestion.questionScore
              }}分）
            </div>
            <div class="question-stars">
              <i
                v-for="s in 4"
                :key="s"
                :class="['star-icon', s <= currentQuestion.difficulty ? 'star-active' : 'star-empty']"
              >★</i>
            </div>
          </div>
          <!-- 题目内容（富文本） -->
          <div class="question-content" v-html="currentQuestion.questionContent"></div>
          <!-- 单选题选项/多选题选项 -->
          <div class="options-list">
            <div v-for="(minItem,minIndex) in currentQuestion.options"
                 :key="minIndex" class="option-item"
                 @click="checkItemButton(currentQuestion,minItem)"
                 :class="isValueInList(minItem.optionLabel,currentQuestion.answerTags)?'option-selected':''">
              <span class="option-radio">
                <i v-if="isValueInList(minItem.optionLabel,currentQuestion.answerTags)"
                   class="el-icon-check radio-checked"
                ></i>
                <i v-else class="radio-empty"></i>
              </span>
              <span class="option-key"
                    v-if="currentQuestion.questionType == '1' || currentQuestion.questionType == '2'"
              >{{ minItem.optionLabel }}</span>
              <span class="option-text" v-html="minItem.optionContent"></span>
            </div>
          </div>
        </div>
        <div class="question-button-box">
          <p class="previous-question" :class="!isFirstQuestion?'check-button':''" @click="prevQuestion">上一题</p>
          <p class="null-p"></p>
          <p class="submit-exam" @click="submitExam()">交卷</p>
          <p class="null-p"></p>
          <p class="next-question" :class="!isLastQuestion?'check-button':''" @click="nextQuestion">下一题</p>
        </div>
      </div>
    </div>
    <div class="shade-max-big-box" v-if="shadeType">
      <div class="shade-big-box">
        <div class="title-box">
          <p><span>{{shadeData.totalScore}}</span>分</p>
        </div>
        <!--<div class="title-box" v-if="shadeData.type==4">-->
          <!--<p>成绩无效</p>-->
        <!--</div>-->
        <p class="text-p">{{shadeData.type==1||shadeData.type==2?'本次考试成绩不及格！':(shadeData.type==3?'本次考试成绩突破历史最佳记录':(shadeData.type==4?'本次考试成绩未突破历史最佳记录，故作无效处理！':''))}}</p>
        <div class="button-box">
          <p class="null-p"></p>
          <p class="button-p-1" v-if="shadeData.type==1||shadeData.type==2" @click="reviewMistakes()">查看错题</p>
          <p class="button-p-2" v-if="(shadeData.type==1||shadeData.type==2)&&shadeData.canContinueExam == 1" @click="retakeExam()">重新考试</p>
          <p class="button-p-2" v-if="shadeData.type==3||shadeData.type==4" @click="backPage()">确定</p>
          <p class="null-p"></p>
        </div>
        <p class="out-button el-icon-close" @click="backPage()"></p>
      </div>
    </div>
    <historyOfIncorrectQuestions :historyOfIncorrectQuestionsPropsData="historyOfIncorrectQuestionsPropsData" v-if="pageType === 2"></historyOfIncorrectQuestions>
  </div>
</template>
<script>
  import WarningCountdown from '@/utils/timerUtils/WarningCountdown'
  import {
    examElExamAttemptReviewSidebar, examElExamAttemptReviewQuestion,
    examUserExamGetExamSurplusTime,examUserExamAnswerSave,
    examUserExamSubmit,examUserExamStart,
  } from '@/api/safetyEducationExaminationNew/index'
  import historyOfIncorrectQuestions from "@/views/safetyEducationExaminationNew/components/historyOfIncorrectQuestions.vue";

  export default {
    name: 'index',
    components: {
      historyOfIncorrectQuestions,
    },
    data() {
      return {
        pageType:1,
        newData: {},
        //考试信息
        examInfo: {
          examTypeName: '',
          examName: '',
          questionCount: 0,
          totalScore: 0,
          passScore: 0,
          earnedScore: 0,
          durationText: '',
          passStatus: null
        },
        //左侧数据
        questionTypeGroups: [],
        //右侧 数据
        currentQuestion: null,
        //按钮状态
        groupIndex: 0,
        questionIndex: 0,
        //倒计时相关
        warningTimer: null,
        displayRemaining: 0,
        //遮罩层数据
        shadeType:false,
        shadeData:{
          type:0,//1.不及格-可以重新考试 2.不及格-不可以重新考试 3.最佳成绩 4.非最佳成绩
          totalScore:0,//分数
          canContinueExam:0, //重新考试 0不可以1可以
        },
        historyOfIncorrectQuestionsPropsData:{},
        submitType:false,
      }
    },
    computed: {
      // 判断是否是绝对的第一题（用于禁用上一题按钮）
      isFirstQuestion() {
        return this.groupIndex === 0 && this.questionIndex === 0
      },
      // 判断是否是绝对的最后一题（用于禁用下一题按钮）
      isLastQuestion() {
        const lastGroupIndex = this.questionTypeGroups.length - 1
        const lastGroup = this.questionTypeGroups[lastGroupIndex]
        const lastQuestionIndex = lastGroup ? lastGroup.questions.length - 1 : 0

        return this.groupIndex === lastGroupIndex && this.questionIndex === lastQuestionIndex
      }
    },
    created() {
    },
    mounted() {
      this.initialize()
    },
    methods: {
      initialize() {
        if (this.$route.query) {
          this.$set(this, 'newData', this.$route.query)
        } else {
          this.$router.back()
          return
        }
        this.$nextTick(() => {
          this.examElExamAttemptReviewSidebar();
        })
      },
      //左侧数据
      examElExamAttemptReviewSidebar(){
        examElExamAttemptReviewSidebar({ attemptId: this.newData.attemptId,examKind:this.newData.examKind }).then(response => {
          this.$set(this,'submitType',false);
          this.$set(this,'groupIndex',0);
          this.$set(this,'questionIndex',0);
          this.$set(this, 'examInfo', {
            examTypeName: response.data.examTypeName ? response.data.examTypeName : '',
            examName: response.data.examName ? response.data.examName : '',
            questionCount: response.data.questionCount ? response.data.questionCount : 0,
            totalScore: response.data.totalScore ? response.data.totalScore : 0,
            passScore: response.data.passScore ? response.data.passScore : 0,
            earnedScore: response.data.earnedScore ? response.data.earnedScore : 0,
            durationText: response.data.durationText ? response.data.durationText : '',
            passStatus: response.data.passStatus ? response.data.passStatus : null
          })
          this.$set(this, 'questionTypeGroups', response.data.questionTypeGroups)
          // 默认选中第一题（假数据直接从 data 里读取，无需接口）
          const firstGroup = this.questionTypeGroups[0]
          if (firstGroup && firstGroup.questions.length) {
            this.examElExamAttemptReviewQuestion(firstGroup.questions[0].snapshotQuestionId)
            this.examUserExamGetExamSurplusTime()
          }
        })
      },
      //选中答案
      checkItemButton(item,minItem){
        if(item.questionType == 1){
          item.answerTags = [minItem.optionLabel]
        }else if(item.questionType == 2){
          const index = item.answerTags.indexOf(minItem.optionLabel)
          if (index === -1) {
            item.answerTags.push(minItem.optionLabel);
          } else {
            item.answerTags.splice(index, 1);
          }
        }else if(item.questionType == 3){
          item.answerTags = [minItem.optionLabel]
        }
      },
      // 上一题
      prevQuestion() {
        // 如果已经是第一题，不做任何操作
        if (this.isFirstQuestion) return
        //判断当前提是否已作答
        if(this.currentQuestion.answerTags[0]){
          examUserExamAnswerSave({
            attemptId: this.newData.attemptId,
            snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
            userAnswer:this.currentQuestion.answerTags+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answered',1);
            //切换索引至下一题
            if (this.questionIndex > 0) {
              // 当前组内还有上一题，直接题索引减 1
              this.questionIndex--
            } else {
              // 当前已经是该组的第一题，需要切换到上一个组的最后一题
              this.groupIndex--
              const prevGroup = this.questionTypeGroups[this.groupIndex]
              this.questionIndex = prevGroup.questions.length - 1
            }
            this.examElExamAttemptReviewQuestion(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].snapshotQuestionId)
          })
        }else{
          //切换索引至下一题
          if (this.questionIndex > 0) {
            // 当前组内还有上一题，直接题索引减 1
            this.questionIndex--
          } else {
            // 当前已经是该组的第一题，需要切换到上一个组的最后一题
            this.groupIndex--
            const prevGroup = this.questionTypeGroups[this.groupIndex]
            this.questionIndex = prevGroup.questions.length - 1
          }
          this.examElExamAttemptReviewQuestion(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].snapshotQuestionId)
        }
      },
      // 下一题
      nextQuestion() {
        // 如果已经是最后一题，不做任何操作
        if (this.isLastQuestion) return
        //判断当前提是否已作答
        if(this.currentQuestion.answerTags[0]){
          examUserExamAnswerSave({
            attemptId: this.newData.attemptId,
            snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
            userAnswer:this.currentQuestion.answerTags+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answered',1);
            //切换索引至下一题
            const currentGroup = this.questionTypeGroups[this.groupIndex]
            if (this.questionIndex < currentGroup.questions.length - 1) {
              // 当前组内还有下一题，直接题索引加 1
              this.questionIndex++
            } else {
              // 当前已经是该组的最后一题，需要切换到下一个组的第一题
              this.groupIndex++
              this.questionIndex = 0
            }
            this.examElExamAttemptReviewQuestion(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].snapshotQuestionId)
          })
        }else{
          //切换索引至下一题
          const currentGroup = this.questionTypeGroups[this.groupIndex]
          if (this.questionIndex < currentGroup.questions.length - 1) {
            // 当前组内还有下一题，直接题索引加 1
            this.questionIndex++
          } else {
            // 当前已经是该组的最后一题，需要切换到下一个组的第一题
            this.groupIndex++
            this.questionIndex = 0
          }
          this.examElExamAttemptReviewQuestion(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex].snapshotQuestionId)
        }
      },
      //右侧数据
      examElExamAttemptReviewQuestion(id) {
        examElExamAttemptReviewQuestion({
          attemptId: this.newData.attemptId,
          snapshotQuestionId: id,
          examScene:1,
        }).then(response => {
          this.$set(this, 'currentQuestion', response.data)
        })
      },
      //查询考试剩余时间
      examUserExamGetExamSurplusTime() {
        examUserExamGetExamSurplusTime({ attemptId: this.newData.attemptId, }).then(response => {
          this.initTimer(response.data)
        })
      },
      //返回按钮
      backPage() {
        this.$router.back()
      },
      //交卷按钮
      submitExam(){
        if(this.currentQuestion.answerTags[0]){
          examUserExamAnswerSave({
            attemptId: this.newData.attemptId,
            snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
            userAnswer:this.currentQuestion.answerTags+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answered',1);
            this.examUserExamAnswerSaveExamUserExamSubmit();
          })
        }else{
          this.examUserExamAnswerSaveExamUserExamSubmit();
        }
      },
      examUserExamAnswerSaveExamUserExamSubmit(){
        let self = this;
        let num = 0;
        for(let i=0;i<self.questionTypeGroups.length;i++){
          for(let o=0;o<self.questionTypeGroups[i].questions.length;o++){
            if(self.questionTypeGroups[i].questions[o].answered == 0){
              num++
            }
          }
        }
        self.$confirm(num==0?'确认要交卷吗？':'还有'+num+'题未答，确认要交卷吗?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          self.examUserExamSubmit();
        }).catch(() => {})
      },
      //交卷
      examUserExamSubmit(){
        examUserExamSubmit({ attemptId: this.newData.attemptId, }).then(response => {
          this.$set(this,'submitType',true);
          //清除定时器
          if (this.warningTimer) {
            this.warningTimer.destroy()
            this.warningTimer = null; // 建议同时将实例置为 null
          }
          if(response.data.totalScore >= this.examInfo.passScore){
            if(response.data.needPrompt == 1){
              //最佳记录
              this.$set(this,'shadeData',{
                type:3,
                totalScore:response.data.totalScore,
                canContinueExam:0,
              });
              this.$set(this,'shadeType',true);
            }else{
              //非最佳记录
              this.$set(this,'shadeData',{
                type:4,
                totalScore:response.data.totalScore,
                canContinueExam:0,
              });
              this.$set(this,'shadeType',true);
            }
          }else{
            if(response.data.canContinueExam == 1){
              //可以补考
              this.$set(this,'shadeData',{
                type:1,
                totalScore:response.data.totalScore,
                canContinueExam:1,
              });
              this.$set(this,'shadeType',true);
            }else{
              //不能补考
              this.$set(this,'shadeData',{
                type:2,
                totalScore:response.data.totalScore,
                canContinueExam:0,
              });
              this.$set(this,'shadeType',true);
            }
          }
        })
      },
      //查看错题
      reviewMistakes(){
        this.$set(this,'historyOfIncorrectQuestionsPropsData',{
          type:2,
          attemptId:this.newData.attemptId,
        });
        localStorage.setItem('startTrainingSkip',1)
        this.$set(this,'shadeType',false);
        this.$set(this,'pageType',2);
      },
      //查看错题返回
      tableButton(){
        this.$router.back();
      },
      //重新考试
      retakeExam(){
        examUserExamStart({examId:this.newData.examId,examScene:1,}).then(response => {
          if(response.data.attemptId){
            this.$set(this.newData, 'attemptId',response.data.attemptId)
            this.$set(this,'shadeType',false);
            this.$nextTick(() => {
              this.examElExamAttemptReviewSidebar();
            })
          }else{
            this.msgError(response.message)
            this.$router.back()
          }
        })
      },
      // 点击左侧题号：切换当前题目，按需从接口加载详情
      selectQuestion(item, index, minIndex) {
        if(this.currentQuestion.answerTags[0]){
          examUserExamAnswerSave({
            attemptId: this.newData.attemptId,
            snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
            userAnswer:this.currentQuestion.answerTags+'',
          }).then(response => {
            this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answered',1);
            this.$set(this, 'groupIndex', index)
            this.$set(this, 'questionIndex', minIndex)
            this.examElExamAttemptReviewQuestion(item.snapshotQuestionId)
          })
        }else {
          this.$set(this, 'groupIndex', index)
          this.$set(this, 'questionIndex', minIndex)
          this.examElExamAttemptReviewQuestion(item.snapshotQuestionId)
        }
      },
      // 判断选项是否被选中
      isSelectedOption(q, key) {
        if (!q.userAnswer) return false
        return q.userAnswer.split(',').includes(key)
      },
      // 根据左侧题目列表的 status 字段获取题号样式
      // status: '1' → 绿色，'0' → 红色，'null' → 灰色
      getNumClass(item) {
        if (item.answered === 1) return 'num-correct'
        if (item.answered === 0) return 'num-unanswered'
      },
      //匹配用户选择
      isValueInList(target, list) {
        if (!Array.isArray(list)) return false
        return list.some(item => item === target)
      },
      //返回用户选择答案
      arrayToString(list) {
        // 防御性编程：如果传入的不是数组，返回空字符串防止报错
        if (!Array.isArray(list)) return ''

        return list.join(',')
      },
      //开到倒计时
      initTimer(num) {
        this.warningTimer = new WarningCountdown({
          totalSeconds: num, // 测试：小于5分钟，将在最后1分钟（剩余60秒时）预警
          // 每秒更新 UI
          onTick: (remainingSeconds) => {
            this.$set(this, 'displayRemaining', remainingSeconds)
          },
          // 触发预警（只触发一次）
          onWarning: (remainingSeconds) => {
            //考试时间即将结束提示
            // console.log('考试时间即将结束提示')
            this.msgError('请注意剩余时间');
            this.msgError('请注意剩余时间');
            this.msgError('请注意剩余时间');
          },
          // 倒计时结束
          onFinished: () => {
            //自动交卷
            // console.log('自动交卷')
            this.msgError('考试时间结束,已自动交卷');
            this.msgError('考试时间结束,已自动交卷');
            this.msgError('考试时间结束,已自动交卷');
            if(this.currentQuestion.answerTags[0]){
              examUserExamAnswerSave({
                attemptId: this.newData.attemptId,
                snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
                userAnswer:this.currentQuestion.answerTags+'',
              }).then(response => {
                this.$set(this.questionTypeGroups[this.groupIndex].questions[this.questionIndex],'answered',1);
                this.examUserExamSubmit();
              })
            }else{
              this.examUserExamSubmit();
            }
          }
        })
        this.warningTimer.start()
      },
      //时间换算
      formatTime(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return '0秒'
        }
        const minutes = Math.floor(totalSeconds / 60)
        const seconds = totalSeconds % 60
        if (minutes > 0 && seconds > 0) {
          return `${minutes}分${seconds}秒`
        } else if (minutes > 0 && seconds === 0) {
          return `${minutes}分`
        } else {
          return `${seconds}秒`
        }
      }
    },
    beforeDestroy() {
      //离开提交
      if(!this.submitType){
        if(this.currentQuestion.answerTags[0]){
          examUserExamAnswerSave({
            attemptId: this.newData.attemptId,
            snapshotQuestionId:this.currentQuestion.snapshotQuestionId,
            userAnswer:this.currentQuestion.answerTags+'',
          }).then(response => {})
        }
      }
      //销毁倒计时
      if (this.warningTimer) {
        this.warningTimer.destroy()
        this.warningTimer = null
      }
    }
  }
</script>
<style scoped lang="scss">
  .startTheExam {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    margin: 10px;

    .content-box {
      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;
        position: relative;

        &::-webkit-scrollbar {
          width: 4px;
        }

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

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

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

        .exam-name-box {
          font-size: 14px;
          font-weight: 700;
          color: #333;
          margin-bottom: 12px;
          line-height: 1.6;
        }
        .examKindType{
          position: absolute;
          top:0;
          right:0;
          color:#fff;
          background-color: #F59A23;
          width:60px;
          line-height:30px;
          font-size:16px;
          border-bottom-left-radius: 6px;
          text-align: center;
        }

        .question-group-max-box {
          flex: 1;
        }

        .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;
              }
            }
          }
        }

        .left-time-box {
          padding-top: 20px;
          display: flex;

          p {
            line-height: 30px;
          }

          p:nth-child(1) {
            flex: 4;
            color: #666;
            text-align: right;
            padding: 0 10px;
            font-size: 16px;
            font-weight: 700;
          }

          p:nth-child(2) {
            flex: 5;
            color: #EC808D;
            padding: 0 10px;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }

      /* ========== 右侧内容区 ========== */
      .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20px;

        &::-webkit-scrollbar {
          width: 6px;
        }

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

        .question-card {
          flex: 1;
          display: flex;
          flex-direction: column;
          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: pointer;
              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;
                margin:0 20px;
              }
            }
          }
        }

        .question-button-box {
          height: 34px;
          display: flex;
          margin-top: 20px;

          .null-p {
            flex: 1;
          }

          .previous-question {
            width: 100px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #999;
            color: #fff;
            text-align: center;
            margin: 0 0 0 120px;
            cursor: pointer;
          }

          .next-question {
            width: 100px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #999;
            color: #fff;
            text-align: center;
            margin: 0 120px 0 0;
            cursor: pointer;
          }

          .submit-exam {
            width: 140px;
            line-height: 34px;
            height: 34px;
            border-radius: 6px;
            background-color: #0183fa;
            color: #fff;
            text-align: center;
            cursor: pointer;
          }

          .check-button {
            background-color: #0183fa;
            color: #fff;
          }
        }
      }
    }
    .shade-max-big-box{
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background-color: rgba(0,0,0,0.4);
      display: flex;             /* 开启 Flex 布局 */
      justify-content: center;   /* 水平居中 */
      align-items: center;       /* 垂直居中 */
      .shade-big-box{
        width:500px;
        height:260px;
        border-radius:6px;
        background-color: #fff;
        position: relative;
        .title-box{
          margin-top:60px;
          p{
            line-height:40px;
            font-size: 16px;
            font-weight:700;
            color:#F59A23;
            text-align: center;
            span{
              font-size:30px;
              margin-right:10px;
            }
          }
        }
        .text-p{
          line-height:40px;
          color:#333;
          text-align: center;
          font-size:15px;
          font-weight: 700;
        }
        .button-box{
          margin-top:40px;
          display: flex;
          p{
            line-height:35px;
            border-radius:6px;
            text-align: center;
          }
          .null-p{
            flex: 1;
          }
          .button-p-1{
            cursor: pointer;
            margin-right:10px;
            width:100px;
            border:1px solid #0183fa;
            color:#0183fa;
            background-color: #fff;
          }
          .button-p-2{
            cursor: pointer;
            width:100px;
            border:1px solid #0183fa;
            color:#fff;
            background-color: #0183fa;
          }
        }
        .out-button{
          position: absolute;
          top:20px;
          right:20px;
          font-size:26px;
          color:#999;
          cursor: pointer;
        }
      }
    }
  }
</style>
