<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// @ts-ignore
import { useVbenModal } from '@vben/common-ui';
// @ts-ignore
import { useTabs } from '@vben/hooks';

import { Edit } from '@element-plus/icons-vue';
import {
  ElAnchor,
  ElAnchorLink,
  ElCollapse,
  ElCollapseItem,
  ElMessage,
  ElTable,
} from 'element-plus';
import { isNaN } from 'lodash-es';

import {
  PaperCategoryTree,
  // @ts-ignore
} from '#/api/exam/paper/category';
// @ts-ignore
import { addPaper, paperDetail, updatePaper } from '#/api/exam/paper/paper';
// @ts-ignore
import { questionCategoryTree } from '#/api/exam/question/category';
// @ts-ignore
import { questionList, randomQuestionList } from '#/api/exam/question/question';
// @ts-ignore
import QuestionPreview from '#/components/question';
// @ts-ignore
import { difficultyOptions, getLabel, questionTypes } from '#/utils/dicts';

const { closeCurrentTab } = useTabs();

const route = useRoute();
const router = useRouter();
const paperId = route.params.id as string;
const isCopy = route.query.copy === '1';

// 试卷表单数据
const examForm = ref({
  paperName: '',
  categoryId: '',
});

// 预览试题模态框
const [PreviewModal, previewModalApi] = useVbenModal({
  title: '预览',
  width: 800,
  height: 600,
  zIndex: 100_000,
  showCancelBtn: false,
  onConfirm: () => {
    previewModalApi.close();
  },
});

// 预览试题
const previewQuestion = (row: any) => {
  // 打开预览模态框，并传递试题数据
  previewQuestions.value = [row];
  previewModalApi.open();
};

// 试卷题目数据
const examQuestions: any = ref([]);

// 折叠面板状态，默认展开所有面板
const activeCollapse: any = ref<(boolean | number | string)[]>(
  // @ts-ignore
  examQuestions.value.map((_, index) => index),
);

// 计算总题数
const totalQuestions = computed(() => examQuestions.value.length);

// 计算小题总数
const totalSubQuestions = computed(() => {
  return examQuestions.value.reduce((total: any, question: any) => {
    return total + question.questions.length;
  }, 0);
});

// 计算总分
const totalScore = computed(() => {
  let score = 0;
  examQuestions.value.forEach((question: any) => {
    question.questions.forEach((item: any) => {
      score += item.score;
    });
  });
  return score;
});

// 获取单个题目总分
const getQuestionTotalScore = (index: any) => {
  const question = examQuestions.value[index];
  let score = 0;
  question.questions.forEach((item: any) => {
    score += item.score;
  });
  return score;
};

// 添加大题
const addBigQuestion = () => {
  examQuestions.value.push({
    title: `第${examQuestions.value.length + 1}题 新题目`,
    questions: [],
  });

  activeCollapse.value.push(examQuestions.value.length - 1);
};
// 容器引用
const containerRef = ref<HTMLElement | null>(null);
// 试题表格引用
const questionTable = ref<InstanceType<typeof ElTable> | null>(null);

const handleClick = (e: MouseEvent) => {
  e.preventDefault();
};

// 弹框相关
const dialogVisible = ref(false);
const currentQuestionIndex = ref(-1);
const currentQuestionType = ref(''); // 'fixed' or 'random'

// 搜索表单
const searchForm = ref({
  questionName: '',
  questionType: '',
  questionCategory: '',
  questionDifficulty: '',
});

// 模拟试题数据
const questionDetailList: any = ref([]);

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 存储选中的试题
const selectedQuestions = ref<any[]>([]);

// 处理选择变化
const handleSelectionChange = (val: any[]) => {
  selectedQuestions.value = val;
};

// 打开弹框
const openDialog = (index: any, type: string) => {
  currentQuestionIndex.value = index;
  currentQuestionType.value = type;
  // 清空之前的选择
  selectedQuestions.value = [];
  dialogVisible.value = true;
};

// 关闭弹框
const closeDialog = () => {
  dialogVisible.value = false;
};

// 查询
const handleSearch = async () => {
  // 实际项目中这里会调用API获取数据
  const { questionName, questionType, questionCategory, questionDifficulty } =
    searchForm.value;
  const res: any = await questionList({
    questionContent: questionName,
    questionType,
    categoryId: questionCategory,
    difficultyLevel: questionDifficulty,
  });
  questionDetailList.value = res.rows || [];
  total.value = res.total || 0;
};

// 重置
const handleReset = () => {
  searchForm.value = {
    questionName: '',
    questionType: '',
    questionCategory: '',
    questionDifficulty: '',
  };
};

// 分页方法
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  // 实际项目中这里会重新调用API获取数据
};

const handleCurrentChange = (current: number) => {
  currentPage.value = current;
  // 实际项目中这里会重新调用API获取数据
};

// 保存选中的试题
const saveQuestions = () => {
  if (currentQuestionIndex.value === -1 || !currentQuestionType.value) {
    return;
  }

  // 使用通过handleSelectionChange方法存储的选中数据
  const selectedRows = selectedQuestions.value;

  if (selectedRows.length === 0) {
    return;
  }

  // 根据类型添加到对应的试题列表
  const question = examQuestions.value[currentQuestionIndex.value];
  // 为每个选中的试题创建一个新的对象，包含必要的字段
  selectedRows.forEach((row: any) => {
    // 判断question.questions中是否存在相同的试题
    const existingQuestion = question.questions.find(
      (item: any) => item.id === row.id,
    );
    if (existingQuestion) {
      // 如果存在，增加数量
      existingQuestion.count++;
      existingQuestion.score = row.score;
    } else {
      // 如果不存在，添加新的试题
      question.questions.push({
        ...row,
        drawType: 'fixed',
        type: row.type,
        count: 1, // 每个试题算1个
        score: 0, // 默认分数为0
      });
    }
  });

  // 关闭弹框
  closeDialog();
};

// 删除已选试题
const deleteQuestion = (row: any, index: any) => {
  const question = examQuestions.value[index];
  question.questions = question.questions.filter(
    (item: any) => item.id !== row.id,
  );
};

// 随机试题设置表单
const randomQuestionForm = ref({
  questionType: '',
  categoryId: '',
  difficultyLevel: '',
  number: 1,
});

// 预览相关
const previewQuestions = ref<any[]>([]);

// 保存随机试题设置
const saveRandomQuestions = async () => {
  if (currentQuestionIndex.value === -1) {
    return;
  }

  // 获取当前设置的随机试题参数
  const { questionType, categoryId, difficultyLevel, number } =
    randomQuestionForm.value;

  // 确保至少选择了一种题型
  if (!number) {
    ElMessage.error('请输入试题数量');
    return;
  }

  const res: any = await randomQuestionList({
    questionType,
    categoryId,
    difficultyLevel,
    number,
  });

  if (!res || !res.rows || res.rows.length === 0) {
    ElMessage.error('未随机到相关试题');
    return;
  }

  // 根据类型添加到对应的试题列表
  // 根据类型添加到对应的试题列表
  const question = examQuestions.value[currentQuestionIndex.value];
  // 为每个选中的试题创建一个新的对象，包含必要的字段
  res.rows.forEach((row: any) => {
    // 判断question.questions中是否存在相同的试题
    const existingQuestion = question.questions.find(
      (item: any) => item.id === row.id,
    );
    if (existingQuestion) {
      // 如果存在，增加数量
      existingQuestion.count++;
      existingQuestion.score = row.score;
    } else {
      // 如果不存在，添加新的试题
      question.questions.push({
        ...row,
        drawType: 'random',
        type: row.type,
        count: 1, // 每个试题算1个
        score: 0, // 默认分数为0
      });
    }
  });

  // 关闭弹框
  closeDialog();
};

const saveExam = async () => {
  // 验证表单数据
  if (!examForm.value.paperName || !examForm.value.categoryId) {
    ElMessage.error('请填写试卷名称和分类');
    return;
  }

  // 检查是否每个大题下都存在试题
  examQuestions.value.forEach((item: any) => {
    if (item.questions.length === 0) {
      ElMessage.error(`请为大题“${item.title}”添加试题`);
    }
  });

  // 如果有任何一个大题下没有试题，返回false
  if (examQuestions.value.some((item: any) => item.questions.length === 0)) {
    return false;
  }

  // 整理考试信息
  const params = {
    categoryId: examForm.value.categoryId,
    paperName: examForm.value.paperName,
    paperDescription: '',
    totalScore: totalScore.value,
    questionCount: examQuestions.value.reduce((acc: number, item: any) => {
      return acc + item.questions.length;
    }, 0),
    paperStatus: 'published',
    bigQuestionNames: JSON.stringify(
      examQuestions.value.map((item: any, index: number) => {
        return {
          name: item.title,
          score: getQuestionTotalScore(index),
          num: item.questions.length,
        };
      }),
    ),
    questions: '',
  };

  const questions: any = [];
  examQuestions.value.forEach((item: any, index: number) => {
    item.questions.forEach((question: any, sortOrder: number) => {
      questions.push({
        bigQuestionIndex: index,
        questionId: question.id,
        questionType: question.questionType,
        drawType: question.drawType,
        smallQuestionScore: question.score,
        sortOrder: sortOrder + 1,
      });
    });
  });

  params.questions = questions;
  // 调用API保存试卷
  try {
    await (isCopy || !paperId || isNaN(+paperId)
      ? addPaper(params)
      : updatePaper({
          ...params,
          id: +paperId,
        }));
    // ElMessage.success('试卷保存成功');
    // 关闭当前页面，跳转到试题列表页面
    closeCurrentTab();
    router.push({ name: 'PaperManage' });
  } catch {
    ElMessage.error('试卷保存失败');
  }
};

const editTitleIndex = ref(-1);

const editTitle = (index: any) => {
  editTitleIndex.value = index;
};

const initExamPaper = async () => {
  const res: any = await paperDetail(+paperId);
  if (res) {
    examForm.value = {
      categoryId: res.categoryId,
      paperName: res.paperName,
    };

    examQuestions.value = JSON.parse(res.bigQuestionNames || '[]').map(
      (item: any, index: number) => {
        activeCollapse.value.push(index);
        const questions = (res.questions || [])
          .filter((q: any) => q.bigQuestionIndex === index)
          .map((q: any) => ({
            ...q.info,
            score: q.smallQuestionScore,
            drawType: q.drawType,
          }));

        return {
          title: item.name,
          score: item.score,
          num: item.num,
          questions,
        };
      },
    );
  }
};

const questionCategoryTrees = ref<any[]>([]);

const paperCategoryTree = ref<any[]>([]);

onMounted(async () => {
  const res: any = await PaperCategoryTree();
  paperCategoryTree.value = res.rows || [];

  const questionRes: any = await questionCategoryTree();
  questionCategoryTrees.value = questionRes.rows || [];
  if (paperId && !isNaN(paperId)) {
    initExamPaper();
  }
});
</script>

<template>
  <div class="exam-edit-container">
    <!-- 顶部区域 -->
    <div class="top-section">
      <div class="left-section">
        <div class="form-item">
          <label class="label">试卷名称：</label>
          <ElInput
            v-model="examForm.paperName"
            placeholder="请输入试卷名称"
            :maxlength="30"
            show-word-limit
            class="input"
          />
        </div>
        <div class="form-item">
          <label class="label">试卷分类：</label>
          <ElTreeSelect
            v-model="examForm.categoryId"
            :data="paperCategoryTree"
            :props="{
              label: 'name',
              value: 'id',
              children: 'children',
            }"
            placeholder="请选择"
            class="select"
          />
        </div>
      </div>
      <div class="right-section">
        <div class="stats">
          <span>{{ totalQuestions }}大题</span>
          <span class="separator">|</span>
          <span>{{ totalSubQuestions }}小题</span>
          <span class="separator">|</span>
          <span>总分：{{ totalScore }}</span>
        </div>
        <ElButton
          type="primary"
          size="default"
          class="save-btn"
          @click="saveExam"
        >
          保存
        </ElButton>
      </div>
    </div>

    <!-- 主体区域 -->
    <div class="main-section">
      <!-- 左侧导航 -->
      <div class="left-nav">
        <div class="nav-title">大题导航</div>
        <ElAnchor
          :container="containerRef"
          direction="vertical"
          default-active="question-0"
          type="default"
          :offset="30"
          @click="handleClick"
        >
          <ElAnchorLink
            v-for="(question, index) in examQuestions"
            :key="index"
            :href="`#question-${index}`"
            :title="question.title"
          />
        </ElAnchor>
      </div>
      <!-- 右侧内容 -->
      <div class="right-content" ref="containerRef">
        <div
          v-for="(question, index) in examQuestions"
          :key="index"
          :id="`question-${index}`"
          class="question-block"
        >
          <!-- 移除原来的question-header -->
          <ElCollapse v-model="activeCollapse">
            <ElCollapseItem :name="index">
              <template #title>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 18px;
                    width: 100%;
                  "
                >
                  <span v-if="editTitleIndex !== index">
                    {{ question.title }}
                    <span>
                      <ElIcon @click.stop="editTitle(index)"> <Edit /> </ElIcon>
                    </span>
                  </span>

                  <span v-else>
                    <ElInput
                      v-model="question.title"
                      placeholder="请输入题目"
                      :maxlength="30"
                      @keydown.space.stop
                      @blur.stop="editTitleIndex = -1"
                      class="input"
                    />
                  </span>
                  <span>合计：{{ getQuestionTotalScore(index) }}分</span>
                </div>
              </template>
              <!-- 固定试题区块 -->
              <div class="question-type-section">
                <ElTable
                  :data="question.questions"
                  style="width: 100%"
                  :header-cell-style="{
                    backgroundColor: '#F7F9FA',
                    color: '#31373D',
                  }"
                >
                  <ElTableColumn prop="questionContent" label="试题内容">
                    <template #default="scope">
                      <div v-html="scope.row.questionContent"></div>
                    </template>
                  </ElTableColumn>
                  <ElTableColumn prop="questionType" label="题型" width="100">
                    <template #default="scope">
                      <!-- {{ scope.row.questionType }} -->
                      {{ getLabel(questionTypes, scope.row.questionType) }}
                    </template>
                  </ElTableColumn>
                  <ElTableColumn prop="categoryName" label="类别" width="100" />
                  <ElTableColumn
                    prop="difficultyLevel"
                    label="试题难度"
                    width="100"
                  >
                    <template #default="scope">
                      {{
                        getLabel(difficultyOptions, scope.row.difficultyLevel)
                      }}
                    </template>
                  </ElTableColumn>
                  <ElTableColumn prop="drawType" label="抽题类型" width="100">
                    <template #default="scope">
                      <span
                        v-if="scope.row.drawType === 'fixed'"
                        style="color: #007bff"
                        >固定
                      </span>
                      <span v-else style="color: #ff6b6b">随机</span>
                    </template>
                  </ElTableColumn>
                  <ElTableColumn prop="score" label="分值" width="150">
                    <template #default="scope">
                      <ElInputNumber
                        v-model="scope.row.score"
                        :min="0"
                        :max="100"
                        size="small"
                      />
                    </template>
                  </ElTableColumn>
                  <ElTableColumn label="操作" fixed="right" width="150">
                    <template #default="scope">
                      <ElButton
                        type="text"
                        size="small"
                        class="preview-btn"
                        @click="previewQuestion(scope.row)"
                      >
                        预览
                      </ElButton>
                      <ElButton
                        type="text"
                        size="small"
                        class="delete-btn"
                        @click="deleteQuestion(scope.row, index)"
                      >
                        删除
                      </ElButton>
                    </template>
                  </ElTableColumn>
                </ElTable>
                <ElButton
                  type="text"
                  icon="Plus"
                  class="add-question-btn"
                  @click="openDialog(index, 'fixed')"
                >
                  + 固定选题
                </ElButton>
                <ElButton
                  type="text"
                  icon="Plus"
                  class="add-question-btn"
                  @click="openDialog(index, 'random')"
                >
                  + 随机选题
                </ElButton>
              </div>
            </ElCollapseItem>
          </ElCollapse>
        </div>

        <ElButton
          type="dashed"
          icon="Plus"
          class="add-big-question-btn"
          @click="addBigQuestion"
        >
          + 添加大题
        </ElButton>
      </div>
    </div>

    <!-- 添加固定试题弹框 -->
    <ElDialog
      v-if="currentQuestionType === 'fixed'"
      title="添加固定试题"
      v-model="dialogVisible"
      width="1000px"
    >
      <!-- 搜索表单 -->
      <div class="search-form" style="margin-bottom: 20px">
        <ElForm :model="searchForm" label-width="80px">
          <ElRow :gutter="20">
            <ElCol :span="6">
              <ElFormItem label="题目名称">
                <ElInput
                  v-model="searchForm.questionName"
                  placeholder="请输入"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="试题题型">
                <ElSelect
                  v-model="searchForm.questionType"
                  placeholder="请选择"
                >
                  <ElOption
                    v-for="item in questionTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="试题分类">
                <ElTreeSelect
                  v-model="searchForm.questionCategory"
                  placeholder="请选择"
                  :data="questionCategoryTrees"
                  :props="{
                    label: 'name',
                    value: 'id',
                    children: 'children',
                  }"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="试题难度">
                <ElSelect
                  v-model="searchForm.questionDifficulty"
                  placeholder="请选择"
                >
                  <ElOption
                    v-for="item in difficultyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </ElFormItem>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol :span="24" style="text-align: right">
              <ElButton type="primary" @click="handleSearch">查询</ElButton>
              <ElButton @click="handleReset">重置</ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </div>

      <!-- 试题列表 -->
      <ElTable
        ref="questionTable"
        :data="questionDetailList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="questionContent" label="题目名称">
          <template #default="scope">
            <div v-html="scope.row.questionContent"></div>
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="试题题型">
          <template #default="scope">
            {{ getLabel(questionTypes, scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="试题分类" />
        <el-table-column prop="difficultyLevel" label="试题难度">
          <template #default="scope">
            {{ getLabel(difficultyOptions, scope.row.difficultyLevel) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="previewQuestion(scope.row)"
            >
              预览
            </el-button>
          </template>
        </el-table-column>
      </ElTable>

      <!-- 分页 -->
      <div class="pagination" style="margin-top: 20px; text-align: right">
        <ElPagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="closeDialog">取消</ElButton>
          <ElButton type="primary" @click="saveQuestions">保存</ElButton>
        </span>
      </template>
    </ElDialog>

    <!-- 添加随机试题弹框 -->
    <ElDialog
      v-if="currentQuestionType === 'random'"
      title="添加随机试题"
      v-model="dialogVisible"
      width="500px"
    >
      <ElForm :model="randomQuestionForm" label-width="100px">
        <ElFormItem label="试题类型">
          <ElSelect
            v-model="randomQuestionForm.questionType"
            placeholder="请选择试题类型"
            style="width: 100%"
          >
            <ElOption
              v-for="option in questionTypes"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </ElSelect>
        </ElFormItem>

        <ElFormItem label="试题分类">
          <ElTreeSelect
            v-model="randomQuestionForm.categoryId"
            placeholder="请选择试题分类"
            :data="questionCategoryTrees"
            :props="{
              label: 'name',
              value: 'id',
              children: 'children',
            }"
            style="width: 100%"
          />
        </ElFormItem>

        <ElFormItem label="试题难度">
          <ElSelect
            v-model="randomQuestionForm.difficultyLevel"
            placeholder="请选择试题难度"
            style="width: 100%"
          >
            <ElOption
              v-for="option in difficultyOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </ElSelect>
        </ElFormItem>

        <ElFormItem label="试题数量">
          <ElInputNumber
            v-model="randomQuestionForm.number"
            :min="1"
            :max="100"
            placeholder="请输入试题数量"
            style="width: 100%"
          />
        </ElFormItem>
      </ElForm>

      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <ElButton @click="closeDialog">取消</ElButton>
          <ElButton type="primary" @click="saveRandomQuestions">保存</ElButton>
        </span>
      </template>
    </ElDialog>

    <!-- 预览试题模态框 -->
    <PreviewModal>
      <QuestionPreview :questions="previewQuestions" />
    </PreviewModal>
  </div>
</template>

<style scoped lang="scss">
.exam-edit-container {
  padding: 1rem;
  background-color: #f5f7fa;
  height: calc(100vh - 90px);
}

/* 顶部区域 */
.top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  font-size: 14px;
  color: #000;
  min-width: 80px;
  font-weight: 400;
  text-align: right;
}

.input {
  width: 400px;
}

.select {
  width: 230px;
}

.right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.stats {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: #303133;
}

.separator {
  color: #dcdfe6;
  font-size: 16px;
}

.save-btn {
  width: 100px;
  margin-top: 18px;
}

/* 主体区域 */
.main-section {
  display: flex;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 左侧导航 */
.left-nav {
  width: 350px;
  padding: 20px;
  margin-right: 10px;
  background-color: white;
  height: calc(100vh - 245px);
}

.nav-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

/* ElAnchor and ElAnchorLink styles */
:deep(.el-anchor) {
  padding-left: 0;
}
:deep(.el-anchor__list) {
  padding-left: 0 !important;
}

:deep(.el-anchor__link) {
  padding-left: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #ffffff;
  border: 1px solid #e6e8eb;
  position: relative;
  width: 315px;
  height: 34px;
  color: #303133;
  box-sizing: border-box;
}

:deep(.el-anchor__link:hover) {
  background-color: #ecf5ff;
  color: #409eff;
}

:deep(.el-anchor__link.is-active) {
  background-color: #ecf5ff;
  color: #409eff;
  border-left: 3px solid #409eff;
}
:deep(.el-anchor__link-title) {
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  padding: 0;
  white-space: normal;
  line-height: 1.4;
}

:deep(.el-anchor__link.active .el-anchor__link-title) {
  color: #409eff;
}

:deep(.el-anchor-fix) {
  display: none;
}

/* 右侧内容 */
.right-content {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  height: calc(100vh - 245px);
  overflow-y: auto;
  /* 隐藏滚动条 */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  ::-webkit-scrollbar {
    display: none;
  }
}

/* 题目块 */
.question-block {
  margin-bottom: 20px;
  padding: 0px 20px;
  background-color: #ffffff;
  border-radius: 8px;
}

/* 题目类型区块 */
.question-type-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 6px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.add-question-btn {
  color: #409eff;
  margin-top: 10px;
}

/* 添加大题按钮 */
.add-big-question-btn {
  width: 80%;
  text-align: center;
  margin: 20px;
}

/* 操作按钮样式 */
.preview-btn {
  color: #409eff;
  margin-right: 10px;
}

.delete-btn {
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .input,
  .select {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .top-section {
    flex-direction: column;
  }

  .right-section {
    align-items: flex-start;
  }

  .main-section {
    flex-direction: column;
  }

  .left-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e6e8eb;
    padding-right: 0;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .right-content {
    padding-left: 0;
  }
}
</style>
