<template>
  <Page>
    <div class="startexamin_box">
      <div class="left">
        <div class="title">{{ getCurrentQuestionTitle() }}</div>
        <div class="examquestions">
          <div class="examquestions_item_title">
            <div>{{ getCurrentQuestionContent() }}</div>
            <div
              class="WindPowericon"
              @click="toggleQuestionMark"
              :class="{
                marked: isQuestionMarked(
                  getCurrentSelectedIndex().index,
                  getCurrentSelectedIndex().indexs,
                ),
              }"
            >
              <el-icon><CollectionTag /></el-icon>
            </div>
          </div>
          <el-radio-group
            v-if="isSingleChoice()"
            v-model="currentSingleChoiceAnswer"
            class="vertical-radio"
            @change="handleSingleChoiceChange"
          >
            <el-radio
              v-for="(option, index) in getCurrentQuestionOptions()"
              :key="index"
              :value="String(index + 1)"
              size="large"
            >
              {{ option }}
            </el-radio>
          </el-radio-group>

          <el-checkbox-group
            v-if="!isSingleChoice() && !isFillBlank() && !isEssayQuestion()"
            v-model="currentMultipleChoiceAnswers"
            class="vertical-checkbox"
            @change="handleMultipleChoiceChange"
          >
            <el-checkbox
              v-for="(option, index) in getCurrentQuestionOptions()"
              :key="index"
              :value="String(index + 1)"
              size="large"
            >
              {{ option }}
            </el-checkbox>
          </el-checkbox-group>

          <div v-if="isFillBlank()" class="fill-blank-inputs">
            <!-- <div class="fill-blank-question">
              {{ getCurrentQuestionContent() }}
            </div> -->
            <div class="fill-blank-inputs-container">
              <div
                v-for="(answer, index) in currentFillBlankAnswers"
                :key="index"
                class="fill-blank-item"
              >
                <label class="fill-blank-label">第{{ index + 1 }}空：</label>
                <el-input
                  v-model="currentFillBlankAnswers[index]"
                  placeholder="请输入答案"
                  size="large"
                  @input="handleFillBlankChange"
                />
              </div>
            </div>
          </div>

          <div v-if="isEssayQuestion()" class="essay-question-input">
            <div class="essay-question-description">
              {{ getCurrentQuestionDescription() + '：' }}
            </div>
            <el-input
              v-model="currentEssayAnswer"
              type="textarea"
              :rows="8"
              placeholder="请在此输入您的答案..."
              size="large"
              @input="handleEssayChange"
              class="essay-textarea"
            />
          </div>
        </div>
      </div>
      <div class="rigth">
        <div class="rigth_top">
          <div class="rigth_top_title">这里是考试名称</div>
          <div class="rigth_top_countdown">
            <span class="rigth_top_countdown_title">剩余时间</span>
            <span class="rigth_top_countdown_time">{{
              formatTime(remainingTime)
            }}</span>
            <el-button class="rigth_top_countdown_Submit" @click="handleTimeUp"
              >提前交卷</el-button
            >
          </div>
          <div class="rigth_top_previous_next">
            <el-button
              class="rigth_top_previousbtn"
              @click="goToPreviousQuestion"
              >上一题</el-button
            >
            <el-button
              class="rigth_top_nextbtn"
              type="primary"
              @click="goToNextQuestion"
            >
              下一题
            </el-button>
          </div>
        </div>
        <div class="rigth_main">
          <div
            class="rigth_main_content"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="rigth_main_content_title">
              <text>{{ item.type }}</text>
              <text>总 {{ item.data.length }} 题/共 20 分</text>
            </div>
            <div class="rigth_main_content_item">
              <div
                v-for="(items, indexs) in item.data"
                :class="[
                  'rigth_main_content_items',
                  {
                    selectedactive: contentitemsstatus[`${index}_${indexs}`],
                    answered: isQuestionAnswered(index, indexs),
                    marked: isQuestionMarked(index, indexs),
                  },
                ]"
                @click="contentitemsclick(index, indexs)"
              >
                {{ indexs + 1 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { CollectionTag } from '@element-plus/icons-vue';
import { useTabs } from '@vben/hooks';
const { closeCurrentTab } = useTabs();
const router = useRouter();
const route = useRoute();
// 答案状态管理：每个题目索引对应一个答案状态
const answerStatus = ref({}) as any;

// 标记题目状态管理：每个题目索引对应一个标记状态
const markedQuestions = ref({}) as any;

// 倒计时相关变量
const remainingTime = ref(0); // 剩余时间（秒）
const countdownTimer = ref(null as any); // 定时器引用
const EXAM_DURATION = 30 * 60; // 考试时长30分钟（1800秒）

// 初始化倒计时
const initCountdown = () => {
  const startTime = localStorage.getItem('examStartTime');

  if (startTime) {
    // 页面刷新或重新进入，根据开始时间计算剩余时间
    const now = Date.now();
    const startTimestamp = parseInt(startTime);

    // 计算从开始到现在的经过时间
    const elapsed = Math.floor((now - startTimestamp) / 1000);

    // 计算剩余时间
    const actualRemaining = Math.max(0, EXAM_DURATION - elapsed);

    if (actualRemaining > 0) {
      remainingTime.value = actualRemaining;
    } else {
      // 时间已到，自动交卷
      remainingTime.value = 0;
      handleTimeUp();
      return;
    }
  } else {
    // 首次进入考试，初始化时间
    remainingTime.value = EXAM_DURATION;
    localStorage.setItem('examStartTime', Date.now().toString());
  }

  startCountdown();
};

// 开始倒计时
const startCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value);
  }

  countdownTimer.value = setInterval(() => {
    if (remainingTime.value > 0) {
      remainingTime.value--;

      if (remainingTime.value === 0) {
        // 时间到，自动交卷
        handleTimeUp();
      }
    }
  }, 1000);
};

// 停止倒计时
const stopCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value);
    countdownTimer.value = null;
  }
};

// 格式化时间显示
const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;

  if (hours > 0) {
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  } else {
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
};

// 时间到处理
const handleTimeUp = async () => {
  await closeCurrentTab();
  stopCountdown();
  localStorage.removeItem('examStartTime');
  if (route.path === '/startexamin') {
    router.replace({
      path: '/examcompleted',
    });
  } else {
    router.replace({
      path: '/examManage/myExamPaper/cpn/endexamin/examcompleted',
    });
  }
};

// 组件挂载时初始化倒计时
onMounted(() => {
  initCountdown();
});

// 组件卸载时清理定时器
onUnmounted(() => {
  stopCountdown();
});

// 当前显示题目的答案状态
const currentSingleChoiceAnswer = ref('') as any;
const currentMultipleChoiceAnswers = ref([]) as any;
const currentFillBlankAnswers = ref([]) as any;
const currentEssayAnswer = ref('') as any;
const list = [
  {
    type: '第一题 单选题',
    data: [
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
    ],
  },
  {
    type: '第二题 多选题',
    data: [
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'],
      },
    ],
  },
  {
    type: '第四题 判断题',
    data: [
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
      {
        title: '本题的题目，请选择',
        content: ['A. 正确', 'B. 错误'],
      },
    ],
  },
  {
    type: '第五题 填空题',
    data: [
      {
        title: '请在横线上填入正确答案',
        content: '这是本题的题目,( ) ( ) ( )',
        blanks: 3,
      },
      {
        title: '请在横线上填入正确答案',
        content: '这是本题的题目,( )',
        blanks: 1,
      },
      {
        title: '请在横线上填入正确答案',
        content: '这是本题的题目,( ) ( ) ( )',
        blanks: 3,
      },
      {
        title: '请在横线上填入正确答案',
        content: '这是本题的题目,( ) ( )',
        blanks: 2,
      },
      {
        title: '请在横线上填入正确答案',
        content: '这是本题的题目,( ) ( ) ( )',
        blanks: 3,
      },
    ],
  },
  {
    type: '第六题 简答题',
    data: [
      {
        title: '这是本题的题目',
        content: '请作答',
      },
      {
        title: '这是本题的题目',
        content: '请作答',
      },
      {
        title: '这是本题的题目',
        content: '请作答',
      },
      {
        title: '这是本题的题目',
        content: '请作答',
      },
      {
        title: '这是本题的题目',
        content: '请作答',
      },
    ],
  },
];
const contentitemsstatus = ref({ '0_0': true }) as any;

// 默认选中单选题第一题（索引为 0_0）
contentitemsstatus.value['0_0'] = true;

// 获取当前选中的题目索引（使用计算属性优化性能）
const currentSelectedIndex = computed(() => {
  const keys = Object.keys(contentitemsstatus.value);
  if (keys.length === 0) return { index: 0, indexs: 0 };
  const selectedKey = keys.find((key) => contentitemsstatus.value[key]);
  if (!selectedKey) return { index: 0, indexs: 0 };
  const [index, indexs] = selectedKey.split('_').map(Number);
  return { index, indexs };
});

// 保持向后兼容的函数包装器
const getCurrentSelectedIndex = () => currentSelectedIndex.value;

// 判断是否为单选题（包含单选和判断题）
const isSingleChoice = () => {
  const { index } = getCurrentSelectedIndex();
  const type = list[index]?.type || '';
  return type.includes('单选') || type.includes('判断');
};

// 判断是否为填空题
const isFillBlank = () => {
  const { index } = getCurrentSelectedIndex();
  const type = list[index]?.type || '';
  return type.includes('填空');
};

// 判断是否为简答题
const isEssayQuestion = () => {
  const { index } = getCurrentSelectedIndex();
  const type = list[index]?.type || '';
  return type.includes('简答');
};

// 判断题目是否已答题
const isQuestionAnswered = (index, indexs) => {
  const key = `${index}_${indexs}`;
  const answer = answerStatus.value[key];
  return (
    answer &&
    ((answer.type === 'single' && answer.answer) ||
      (answer.type === 'multiple' &&
        answer.answers &&
        answer.answers.length > 0) ||
      (answer.type === 'fill_blank' &&
        answer.answers &&
        answer.answers.some((ans) => ans && ans.trim())) ||
      (answer.type === 'essay' && answer.answer && answer.answer.trim()))
  );
};

// 获取当前题目标题
const getCurrentQuestionTitle = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const question = list[index]?.data[indexs];
  const questionType = list[index]?.type || '题目';
  return `${questionType} (本题分值1分)`;
};

// 获取当前题目内容
const getCurrentQuestionContent = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const question = list[index]?.data[indexs];
  const type = list[index]?.type || '';

  if (type.includes('填空')) {
    return `${indexs + 1}. ${question?.content || '这是本题的题目，请填写'}`;
  }

  return `${indexs + 1}. ${question?.title || '这是本题的题目，请选择'}`;
};

// 获取当前题目选项
const getCurrentQuestionOptions = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const question = list[index]?.data[indexs];
  const type = list[index]?.type || '';

  if (type.includes('填空')) {
    return question?.content || '';
  }

  return question?.content || ['A.答案1', 'B.答案2', 'C.答案3', 'D.答案4'];
};

// 获取当前题目空白数量
const getCurrentBlankCount = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const question = list[index]?.data[indexs];
  return question?.blanks || 1;
};

// 获取简答题描述
const getCurrentQuestionDescription = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const question = list[index]?.data[indexs];
  const type = list[index]?.type || '';

  if (type.includes('简答')) {
    return question?.content || '请在此题中给出详细答案';
  }

  return '';
};

// 处理单选题答案变化
const handleSingleChoiceChange = (value) => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;
  answerStatus.value[key] = {
    type: 'single',
    answer: value,
  };
};

// 处理多选题答案变化
const handleMultipleChoiceChange = (values) => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;
  answerStatus.value[key] = {
    type: 'multiple',
    answers: values,
  };
};

// 处理填空题答案变化
const handleFillBlankChange = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;
  answerStatus.value[key] = {
    type: 'fill_blank',
    answers: currentFillBlankAnswers.value,
  };
};

// 处理简答题答案变化
const handleEssayChange = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;
  answerStatus.value[key] = {
    type: 'essay',
    answer: currentEssayAnswer.value,
  };
};

// 处理标记题目
const toggleQuestionMark = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;

  // 切换标记状态
  if (markedQuestions.value[key]) {
    delete markedQuestions.value[key];
  } else {
    markedQuestions.value[key] = true;
  }

  // 触发响应式更新
  markedQuestions.value = { ...markedQuestions.value };
};

// 判断题目是否被标记
const isQuestionMarked = (index, indexs) => {
  const key = `${index}_${indexs}`;
  return !!markedQuestions.value[key];
};

// 初始化填空题答案数组
const initializeFillBlankAnswers = () => {
  const blankCount = getCurrentBlankCount();
  const currentAnswers = currentFillBlankAnswers.value;

  // 如果当前答案数组长度与空白数量不匹配，重新初始化
  if (currentAnswers.length !== blankCount) {
    currentFillBlankAnswers.value = Array(blankCount).fill('');
  }
};

// 更新当前题目的答案显示状态
const updateCurrentAnswerDisplay = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const key = `${index}_${indexs}`;
  const answer = answerStatus.value[key];

  if (answer?.type === 'single') {
    currentSingleChoiceAnswer.value = answer.answer || '';
    currentMultipleChoiceAnswers.value = [];
    currentFillBlankAnswers.value = [];
    currentEssayAnswer.value = '';
  } else if (answer?.type === 'multiple') {
    currentMultipleChoiceAnswers.value = answer.answers || [];
    currentSingleChoiceAnswer.value = '';
    currentFillBlankAnswers.value = [];
    currentEssayAnswer.value = '';
  } else if (answer?.type === 'fill_blank') {
    // 初始化填空题答案数组
    initializeFillBlankAnswers();
    currentFillBlankAnswers.value =
      answer.answers || Array(getCurrentBlankCount()).fill('');
    currentSingleChoiceAnswer.value = '';
    currentMultipleChoiceAnswers.value = [];
    currentEssayAnswer.value = '';
  } else if (answer?.type === 'essay') {
    currentEssayAnswer.value = answer.answer || '';
    currentSingleChoiceAnswer.value = '';
    currentMultipleChoiceAnswers.value = [];
    currentFillBlankAnswers.value = [];
  } else {
    // 清除当前显示状态
    currentSingleChoiceAnswer.value = '';
    currentMultipleChoiceAnswers.value = [];
    if (isFillBlank()) {
      currentFillBlankAnswers.value = Array(getCurrentBlankCount()).fill('');
    } else {
      currentFillBlankAnswers.value = [];
    }
    if (isEssayQuestion()) {
      currentEssayAnswer.value = '';
    } else {
      currentEssayAnswer.value = '';
    }
  }
};

const contentitemsclick = (index, indexs) => {
  const key = `${index}_${indexs}`;
  // 单选模式：先清空所有选中状态，然后只设置当前题目为选中
  contentitemsstatus.value = {};
  contentitemsstatus.value[key] = true;

  // 更新当前题目的答案显示状态
  updateCurrentAnswerDisplay();
};

// 获取所有题目的扁平化列表（用于导航）
const getAllQuestions = () => {
  const questions = [];
  list.forEach((section, sectionIndex) => {
    section.data.forEach((question, questionIndex) => {
      questions.push({
        sectionIndex,
        questionIndex,
        key: `${sectionIndex}_${questionIndex}`,
        type: section.type,
        title: question.title || question.content,
      });
    });
  });
  return questions;
};

// 获取当前题目在所有题目中的位置
const getCurrentQuestionPosition = () => {
  const { index, indexs } = getCurrentSelectedIndex();
  const allQuestions = getAllQuestions();
  const currentKey = `${index}_${indexs}`;
  const position = allQuestions.findIndex((q) => q.key === currentKey);
  return position >= 0 ? position : 0;
};

// 跳转到指定位置的题目
const jumpToQuestion = (position) => {
  const allQuestions = getAllQuestions();
  if (position < 0 || position >= allQuestions.length) return;

  const targetQuestion = allQuestions[position];
  const key = targetQuestion.key;

  // 设置选中状态
  contentitemsstatus.value = {};
  contentitemsstatus.value[key] = true;

  // 更新当前题目的答案显示状态
  updateCurrentAnswerDisplay();
};

// 上一题
const goToPreviousQuestion = () => {
  const currentPosition = getCurrentQuestionPosition();
  if (currentPosition > 0) {
    jumpToQuestion(currentPosition - 1);
  }
};

// 下一题
const goToNextQuestion = () => {
  const allQuestions = getAllQuestions();
  const currentPosition = getCurrentQuestionPosition();
  if (currentPosition < allQuestions.length - 1) {
    jumpToQuestion(currentPosition + 1);
  }
};

// 初始化当前题目显示状态
updateCurrentAnswerDisplay();
</script>
<style lang="scss" scoped>
.startexamin_box {
  width: 100%;
  height: 796px;
  display: flex;
  justify-content: space-between;
  gap: 36px;
  overflow: hidden;
  .left {
    flex: 1;
    // border: 1px solid red;
    height: 100%;
    background-color: #fff;
    .title {
      width: 100%;
      height: 80px;
      background-color: #f7f9fa;
      font-size: 18px;
      font-weight: 500;
      line-height: 80px;
      box-sizing: border-box;
      padding-left: 24px;
    }
    .examquestions {
      box-sizing: border-box;
      padding-top: 40px;
      padding-left: 24px;

      .examquestions_item_title {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding-right: 24px;
        .WindPowericon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #fff;
          border: 1px solid #d4d6d9;
          display: flex;
          justify-content: center;
          align-items: center;
          // color: #faad14;
          font-size: 20px;
        }

        .WindPowericon.marked {
          color: #faad14;
          border-color: #faad14;
        }
      }
      .vertical-radio {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .vertical-checkbox {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .fill-blank-input {
        width: 100%;
        max-width: 400px;
      }
      .fill-blank-inputs {
        width: 100%;
      }
      .fill-blank-question {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 24px;
        color: #333;
      }
      .fill-blank-inputs-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .fill-blank-item {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .fill-blank-label {
        min-width: 60px;
        font-size: 16px;
        color: #333;
      }
      .fill-blank-item .el-input {
        flex: 1;
        max-width: 300px;
      }
      .essay-question-input {
        width: 100%;
      }
      .essay-question-title {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 16px;
        line-height: 1.6;
      }
      .essay-question-description {
        // font-size: 16px;
        // color: #666;
        // margin-bottom: 24px;
        // line-height: 1.5;
        // padding: 16px;
        padding-bottom: 16px;
        // background-color: #f8f9fa;
        // border-radius: 8px;
        // border-left: 4px solid #215ACD;
      }
      .essay-textarea {
        .el-textarea__inner {
          font-size: 16px;
          line-height: 1.6;
          resize: vertical;
        }
      }
    }
  }
  .rigth {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .rigth_top {
      background-color: #ffffff;
      width: 100%;
      height: 370px;
      //   margin-bottom: 12px;
      .rigth_top_title {
        font-size: 18px;
        font-weight: 500;
        color: #31373d;
        padding: 31px 0 31px 24px;
      }
      .rigth_top_countdown {
        height: 210px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        box-sizing: border-box;
        padding-top: 27px;
        padding-bottom: 32px;
        .rigth_top_countdown_title {
          font-size: 18px;
          font-weight: 500;
          color: #31373d;
        }
        .rigth_top_countdown_time {
          font-size: 28px;
          font-weight: 600;
          color: #eb5e12;
        }
        .rigth_top_countdown_Submit {
          width: 160px;
          height: 40px;
          margin-right: 10px;
        }
        .rigth_top_countdown_Close {
          width: 120px;
          height: 40px;
        }
      }
      .rigth_top_previous_next {
        border-top: 1px solid #e6e8eb;
        // box-sizing: border-box;
        padding: 24px 20px;
        display: flex;
        justify-content: space-between;
        gap: 32px;
        .rigth_top_previousbtn,
        .rigth_top_nextbtn {
          flex: 1;
        }
      }
    }
    .rigth_main {
      flex: 1;
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      height: 400px;
      //   border: 1px solid red;
      overflow-y: auto;
      .rigth_main_content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        .rigth_main_content_title {
          //   height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 500;
        }
        .rigth_main_content_item {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          .rigth_main_content_items {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #31373d;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #d4d6d9;
          }
          .selectedactive {
            background-color: #e2eaf6;
          }
          .answered {
            background-color: #215acd;
            color: white;
          }
          .selectedactive.answered {
            background-color: #215acd;
            color: white;
          }
          .marked {
            color: #fff;
            background-color: #faad14;
          }
          .answered.marked {
            background-color: #215acd;
            color: white;
            border-color: #faad14;
          }
          .selectedactive.answered.marked {
            background-color: #215acd;
            color: white;
            border-color: #faad14;
          }
        }
      }
    }
  }
}
</style>
