OL-LearnPlatform-Frontend/src/views/teacher/course/ExamPages/AddExam.vue

<template>
    <div class="exam-container">
        <n-space vertical>
            <div class="header-section">
                <div class="header-content">
                    <n-button 
                        quaternary 
                        circle 
                        size="large" 
                        @click="goBack"
                        class="back-button"
                    >
                        <template #icon>
                            <n-icon>
                                <ArrowBackOutline />
                            </n-icon>
                        </template>
                    </n-button>
                    <h1>添加试卷</h1>
                </div>
            </div>
            <n-card size="small">
                <div class="group required">
                    组卷方式：
                    <n-tag :checked="examType" checkable @click="changeType(1)"
                        style="margin-right: 20px; border: 1px solid #F1F3F4;">固定试卷组</n-tag>
                    <n-tag :checked="!examType" checkable @click="changeType(2)"
                        style="margin-right: 20px; border: 1px solid #F1F3F4;">随机抽题组卷</n-tag>
                </div>
                <div class="group required">
                    <n-row>试卷名称：</n-row>
                    <n-input v-model:value="examForm.title" type="textarea" placeholder="请输入试卷名称" />
                </div>

                <n-row class="flex justify-between">
                    <n-button type="primary" ghost @click="addBigQuestion">
                        <template #icon>
                            <n-icon>
                                <AddCircle />
                            </n-icon>
                        </template>
                        添加大题
                    </n-button>

                    <n-button strong secondary>
                        <template #icon>
                            <n-icon>
                                <SettingsOutline />
                            </n-icon>
                        </template>
                        试卷设置
                    </n-button>
                </n-row>
            </n-card>
            <template v-for="(item, index) in examForm.questions" :key="index">
                <n-card size="small">
                    <div class="group">
                        <n-row>第{{ index + 1 }}题：</n-row>
                        <div class="questionRow">
                            <n-input class="input-title" v-model:value="item.title" placeholder="请输入题目名称" />
                            <n-button strong quaternary @click="deleteBigQuestion(index)">
                                <template #icon>
                                    <n-icon>
                                        <TrashOutline />
                                    </n-icon>
                                </template>
                                删除
                            </n-button>
                            <n-button strong quaternary :disabled="index === 0"
                                @click="moveBigQuestion(index, index - 1)">
                                <template #icon>
                                    <n-icon>
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
                                            <path
                                                d="M334 624h46.9c10.2 0 19.9-4.9 25.9-13.2L512 465.4l105.2 145.4c6 8.3 15.6 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.5-12.7l-178-246a7.95 7.95 0 0 0-12.9 0l-178 246A7.96 7.96 0 0 0 334 624z"
                                                fill="currentColor"></path>
                                            <path
                                                d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </n-icon>
                                </template>
                                上移
                            </n-button>
                            <n-button strong quaternary :disabled="index === examForm.questions.length - 1"
                                @click="moveBigQuestion(index, index + 1)">
                                <template #icon>
                                    <n-icon class="iconRotate">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
                                            <path
                                                d="M334 624h46.9c10.2 0 19.9-4.9 25.9-13.2L512 465.4l105.2 145.4c6 8.3 15.6 13.2 25.9 13.2H690c6.5 0 10.3-7.4 6.5-12.7l-178-246a7.95 7.95 0 0 0-12.9 0l-178 246A7.96 7.96 0 0 0 334 624z"
                                                fill="currentColor"></path>
                                            <path
                                                d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </n-icon>
                                </template>
                                下移
                            </n-button>

                            <div class="total flex justify-between">
                                共{{ item.subQuestions.length }}题，合计{{ item.totalScore }}分
                                <n-icon class="iconRotate">
                                    <ChevronUpSharp />
                                </n-icon>
                            </div>
                        </div>
                    </div>
                    <div class="group" v-if="item.subQuestions.length === 0">
                        <div class="empty_tip">请为当前大题添加题目</div>
                    </div>

                    <!-- 小题列表显示 -->
                    <div v-else>
                        <div v-for="(subQuestion, subIndex) in item.subQuestions" :key="subQuestion.id"
                            class="sub-question-item">
                            <!-- 小题标题栏 -->
                            <div class="sub-question-header">
                                <span class="sub-question-number">*{{ index + 1 }}.{{ subIndex + 1 }} {{
                                    getQuestionTypeName(subQuestion.type) }}</span>
                            </div>

                            <!-- 题目内容输入 -->
                            <div class="sub-question-content">
                                <n-input v-model:value="subQuestion.title" type="textarea" placeholder="请输入题目内容"
                                    style="flex: 1;" />
                                <n-button size="small" quaternary @click="deleteSubQuestion(index, subIndex)">
                                    <template #icon>
                                        <n-icon>
                                            <TrashOutline />
                                        </n-icon>
                                    </template>
                                </n-button>
                            </div>

                            <!-- 根据题型显示不同的编辑界面 -->
                            <!-- 单选题 -->
                            <div v-if="subQuestion.type === 'single_choice'" class="question-options">
                                <div v-for="(option, optionIndex) in subQuestion.options" :key="option.id"
                                    class="option-item">
                                    <n-radio :checked="subQuestion.correctAnswer === option.id"
                                        @update:checked="updateSingleChoice(index, subIndex, option.id)"
                                        :name="`question_${subQuestion.id}`">
                                        {{ String.fromCharCode(65 + optionIndex) }}
                                    </n-radio>
                                    <n-input v-model:value="option.content" placeholder="请输入选项内容"
                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
                                    <n-button size="small" quaternary
                                        @click="deleteOption(index, subIndex, optionIndex)">
                                        <template #icon>
                                            <n-icon>
                                                <TrashOutline />
                                            </n-icon>
                                        </template>
                                    </n-button>
                                </div>
                                <n-button size="small" quaternary @click="addOption(index, subIndex)"
                                    class="add-option-btn">
                                    + 添加选项
                                </n-button>
                            </div>

                            <!-- 多选题 -->
                            <div v-if="subQuestion.type === 'multiple_choice'" class="question-options">
                                <div v-for="(option, optionIndex) in subQuestion.options" :key="option.id"
                                    class="option-item">
                                    <n-checkbox
                                        :checked="Array.isArray(subQuestion.correctAnswer) && subQuestion.correctAnswer.includes(option.id)"
                                        @update:checked="updateMultipleChoice(index, subIndex, option.id, $event)">
                                        {{ String.fromCharCode(65 + optionIndex) }}
                                    </n-checkbox>
                                    <n-input v-model:value="option.content" placeholder="请输入选项内容"
                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
                                    <n-button size="small" quaternary
                                        @click="deleteOption(index, subIndex, optionIndex)">
                                        <template #icon>
                                            <n-icon>
                                                <TrashOutline />
                                            </n-icon>
                                        </template>
                                    </n-button>
                                </div>
                                <n-button size="small" quaternary @click="addOption(index, subIndex)"
                                    class="add-option-btn">
                                    + 添加选项
                                </n-button>
                            </div>

                            <!-- 判断题 -->
                            <div v-if="subQuestion.type === 'true_false'" class="question-options">
                                <n-space>
                                    <n-radio :checked="subQuestion.trueFalseAnswer === true"
                                        @update:checked="updateTrueFalse(index, subIndex, true)"
                                        :name="`question_${subQuestion.id}`">
                                        正确
                                    </n-radio>
                                    <n-radio :checked="subQuestion.trueFalseAnswer === false"
                                        @update:checked="updateTrueFalse(index, subIndex, false)"
                                        :name="`question_${subQuestion.id}`">
                                        错误
                                    </n-radio>
                                </n-space>
                            </div>

                            <!-- 填空题 -->
                            <div v-if="subQuestion.type === 'fill_blank'" class="question-options">
                                <div v-for="(blank, blankIndex) in subQuestion.fillBlanks" :key="blank.id"
                                    class="fill-blank-item">
                                    <span>第{{ blankIndex + 1 }}个填空答案：</span>
                                    <n-input v-model:value="blank.content" placeholder="请输入正确答案"
                                        style="flex: 1; margin-left: 8px; margin-right: 8px;" />
                                    <n-button size="small" quaternary
                                        @click="deleteFillBlank(index, subIndex, blankIndex)">
                                        <template #icon>
                                            <n-icon>
                                                <TrashOutline />
                                            </n-icon>
                                        </template>
                                    </n-button>
                                </div>
                                <n-button size="small" dashed @click="addFillBlank(index, subIndex)"
                                    class="add-option-btn">
                                    + 添加填空
                                </n-button>
                            </div>

                            <!-- 简答题 -->
                            <div v-if="subQuestion.type === 'short_answer'" class="question-options">
                                <div class="answer-section">
                                    <span>参考答案：</span>
                                    <n-input v-model:value="subQuestion.textAnswer" type="textarea"
                                        placeholder="请输入参考答案" :autosize="{ minRows: 3, maxRows: 8 }" />
                                </div>
                            </div>

                            <!-- 复合题子题目 -->
                            <div v-if="subQuestion.type === 'composite' && subQuestion.subQuestions"
                                class="composite-sub-questions">
                                <n-divider />
                                <div v-for="(compositeSubQ, compSubIndex) in subQuestion.subQuestions"
                                    :key="compositeSubQ.id" class="composite-sub-item">
                                    <div class="composite-sub-header">
                                        <div class="sub-question-number">
                                            <span>{{ compSubIndex + 1 }}. </span>
                                            <n-select v-model:value="compositeSubQ.type" :options="[
                                                { label: '单选题', value: 'single_choice' },
                                                { label: '多选题', value: 'multiple_choice' },
                                                { label: '判断题', value: 'true_false' }
                                            ]" size="small" style="width: 100px; margin-right: 8px;"
                                                @update:value="changeCompositeSubQuestionType(index, subIndex, compSubIndex, $event)" />
                                        </div>
                                        <n-button size="small" quaternary
                                            @click="deleteCompositeSubQuestion(index, subIndex, compSubIndex)">
                                            <template #icon>
                                                <n-icon>
                                                    <TrashOutline />
                                                </n-icon>
                                            </template>
                                        </n-button>
                                    </div>

                                    <!-- 子题目内容 -->
                                    <div class="composite-sub-content">
                                        <n-input v-model:value="compositeSubQ.title" type="textarea"
                                            placeholder="请输入子题目内容" :autosize="{ minRows: 2, maxRows: 4 }"
                                            style="margin-bottom: 12px;" />

                                        <!-- 单选题选项 -->
                                        <div v-if="compositeSubQ.type === 'single_choice'" class="composite-options">
                                            <div v-for="(option, optionIndex) in compositeSubQ.options" :key="option.id"
                                                class="option-item">
                                                <n-radio :name="`composite_question_${compositeSubQ.id}`"
                                                    :checked="compositeSubQ.correctAnswer === option.id"
                                                    @update:checked="updateCompositeChoice(index, subIndex, compSubIndex, option.id)">
                                                    {{ String.fromCharCode(65 + optionIndex) }}
                                                </n-radio>
                                                <n-input v-model:value="option.content" placeholder="请输入选项内容"
                                                    style="flex: 1; margin-left: 8px; margin-right: 8px;" />
                                                <n-button size="small" quaternary
                                                    @click="deleteCompositeOption(index, subIndex, compSubIndex, optionIndex)">
                                                    <template #icon>
                                                        <n-icon>
                                                            <TrashOutline />
                                                        </n-icon>
                                                    </template>
                                                </n-button>
                                            </div>
                                            <n-button size="small" dashed
                                                @click="addCompositeOption(index, subIndex, compSubIndex)"
                                                class="add-option-btn">
                                                + 添加选项
                                            </n-button>
                                        </div>

                                        <!-- 多选题选项 -->
                                        <div v-if="compositeSubQ.type === 'multiple_choice'" class="composite-options">
                                            <div v-for="(option, optionIndex) in compositeSubQ.options" :key="option.id"
                                                class="option-item">
                                                <n-checkbox
                                                    :checked="Array.isArray(compositeSubQ.correctAnswer) && compositeSubQ.correctAnswer.includes(option.id)"
                                                    @update:checked="updateCompositeMultiChoice(index, subIndex, compSubIndex, option.id, $event)">
                                                    {{ String.fromCharCode(65 + optionIndex) }}
                                                </n-checkbox>
                                                <n-input v-model:value="option.content" placeholder="请输入选项内容"
                                                    style="flex: 1; margin-left: 8px; margin-right: 8px;" />
                                                <n-button size="small" quaternary
                                                    @click="deleteCompositeOption(index, subIndex, compSubIndex, optionIndex)">
                                                    <template #icon>
                                                        <n-icon>
                                                            <TrashOutline />
                                                        </n-icon>
                                                    </template>
                                                </n-button>
                                            </div>
                                            <n-button size="small" dashed
                                                @click="addCompositeOption(index, subIndex, compSubIndex)"
                                                class="add-option-btn">
                                                + 添加选项
                                            </n-button>
                                        </div>

                                        <!-- 判断题 -->
                                        <div v-if="compositeSubQ.type === 'true_false'" class="composite-options">
                                            <n-space>
                                                <n-radio :checked="compositeSubQ.trueFalseAnswer === true"
                                                    @update:checked="updateCompositeTrueFalse(index, subIndex, compSubIndex, true)"
                                                    :name="`composite_question_${compositeSubQ.id}`">
                                                    正确
                                                </n-radio>
                                                <n-radio :checked="compositeSubQ.trueFalseAnswer === false"
                                                    @update:checked="updateCompositeTrueFalse(index, subIndex, compSubIndex, false)"
                                                    :name="`composite_question_${compositeSubQ.id}`">
                                                    错误
                                                </n-radio>
                                            </n-space>
                                        </div>
                                    </div>
                                </div>
                                <n-button size="small" dashed @click="addCompositeSubQuestion(index, subIndex)"
                                    class="add-option-btn">
                                    + 添加子题目
                                </n-button>
                            </div>

                            <!-- 答案解析 -->
                            <div class="explanation-section">
                                <span>答案解析：</span>
                                <n-input v-model:value="subQuestion.explanation" type="textarea"
                                    placeholder="请输入答案解析（选填）" :autosize="{ minRows: 2, maxRows: 4 }" />
                            </div>

                            <!-- 底部操作按钮 -->
                            <div class="sub-question-footer">
                                <div class="sub-footer-item">
                                    分数：
                                    <n-input-number v-model:value="subQuestion.score" size="small" :min="0"
                                        style="width: 80px" />
                                </div>
                                <div class="sub-footer-item">
                                    难度：<n-select v-model:value="subQuestion.difficulty" size="small" style="width: 80px"
                                        :options="difficultyOptions" />
                                </div>
                                <div class="sub-footer-item">
                                    题目必填：<n-select v-model:value="subQuestion.required" size="small" style="width: 80px"
                                        :options="[{ label: '是', value: true }, { label: '否', value: false }]" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <n-row class="flex">
                        <n-popselect v-model:value="questionTypeValue" :options="questionTypeOptions">
                            <n-button type="primary" @click="addQuestion(index)">
                                <template #icon>
                                    <n-icon>
                                        <AddCircle />
                                    </n-icon>
                                </template>
                                {{questionTypeOptions.find(opt => opt.value === questionTypeValue)?.label || '添加题目'}}
                            </n-button>
                        </n-popselect>
                        <div class="mr-10"></div>
                        <n-button type="primary" ghost @click="openQuestionBankModal(index)">
                            <template #icon>
                                <n-icon>
                                    <BookSharp />
                                </n-icon>
                            </template>
                            题库选择题目
                        </n-button>
                    </n-row>
                </n-card>
            </template>

            <!-- 操作按钮 -->
            <n-card size="small">
                <div class="footer-btn">
                    <!-- 左侧按钮 -->
                    <div class="footer-left">
                        <n-space>
                            <n-button type="primary" ghost size="large" @click="openBatchScoreModal">
                                批量设置分数
                            </n-button>
                            <n-button type="primary" :ghost="!examForm.useAIGrading" size="large"
                                @click="toggleAIGrading">
                                <!-- <template #icon>
                                    <n-icon>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0z"/>
                                        </svg>
                                    </n-icon>
                                </template> -->
                                {{ examForm.useAIGrading ? '已启用AI阅卷' : '使用AI阅卷功能' }}
                            </n-button>
                            <n-button type="primary" ghost size="large" @click="openExamSettingsModal">
                                <template #icon>
                                    <n-icon>
                                        <SettingsOutline />
                                    </n-icon>
                                </template>
                                试卷设置
                            </n-button>
                            <n-button type="primary" ghost size="large">
                                预览试卷
                            </n-button>
                        </n-space>
                    </div>

                    <!-- 中间统计信息 -->
                    <div class="footer-center">
                        <span>题目数量：{{ examForm.questions.length }} 道</span>
                        <span>总分：{{examForm.questions.reduce((total, q) => total + q.totalScore, 0)}} 分</span>
                    </div>

                    <!-- 右侧按钮 -->
                    <div class="footer-right">
                        <n-space>
                            <n-button strong type="primary" secondary size="large">
                                取消
                            </n-button>
                            <n-button strong type="primary" secondary size="large" @click="previewSubQuestion">
                                预览
                            </n-button>
                            <n-button strong type="primary" size="large" @click="saveExam">
                                保存试卷
                            </n-button>
                        </n-space>
                    </div>
                </div>
            </n-card>
        </n-space>

        <!-- 批量设置分数模态框 -->
        <BatchSetScoreModal v-model:visible="showBatchScoreModal" :questions="examForm.questions"
            @confirm="handleBatchScoreConfirm" @cancel="handleBatchScoreCancel" />

        <!-- 试卷设置模态框 -->
        <ExamSettingsModal v-model:visible="showExamSettingsModal" :exam-data="examSettingsData"
            @confirm="handleExamSettingsConfirm" @cancel="handleExamSettingsCancel" />

        <!-- 题库选择模态框 -->
        <QuestionBankModal v-model:visible="showQuestionBankModal" @confirm="handleQuestionBankConfirm"
            @cancel="handleQuestionBankCancel" />
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { createDiscreteApi } from 'naive-ui';
import { useRouter } from 'vue-router';
import { AddCircle, SettingsOutline, TrashOutline, ChevronUpSharp, BookSharp, ArrowBackOutline } from '@vicons/ionicons5'
import BatchSetScoreModal from '@/components/admin/ExamComponents/BatchSetScoreModal.vue';
import ExamSettingsModal from '@/components/admin/ExamComponents/ExamSettingsModal.vue';
import QuestionBankModal from '@/components/admin/ExamComponents/QuestionBankModal.vue';

// 创建独立的 dialog API
const { dialog } = createDiscreteApi(['dialog'])

// 路由
const router = useRouter()

// 返回上一个页面
const goBack = () => {
    router.back()
}

// 题型枚举
enum QuestionType {
    SINGLE_CHOICE = 'single_choice',    // 单选题
    MULTIPLE_CHOICE = 'multiple_choice', // 多选题
    TRUE_FALSE = 'true_false',          // 判断题
    FILL_BLANK = 'fill_blank',          // 填空题
    SHORT_ANSWER = 'short_answer',      // 简答题
    COMPOSITE = 'composite'             // 复合题
}

// 选择题选项接口
interface ChoiceOption {
    id: string;
    content: string;
    isCorrect: boolean;
}

// 填空题答案接口
interface FillBlankAnswer {
    id: string;
    content: string;
    position: number; // 填空位置
}

// 小题接口
interface SubQuestion {
    id: string;
    type: QuestionType;
    title: string;              // 题目内容
    score: number;              // 分值
    difficulty: 'easy' | 'medium' | 'hard'; // 难度
    required: boolean;          // 题目必填

    // 选择题相关字段
    options?: ChoiceOption[];   // 选择题选项
    correctAnswer?: string | string[]; // 正确答案（单选为string，多选为string[]）

    // 填空题相关字段
    fillBlanks?: FillBlankAnswer[]; // 填空答案

    // 判断题相关字段
    trueFalseAnswer?: boolean;  // 判断题答案

    // 简答题/复合题相关字段
    textAnswer?: string;        // 文本答案
    answerKeywords?: string[];  // 答案关键词

    // 复合题子题目
    subQuestions?: SubQuestion[]; // 复合题的子题目

    // 通用字段
    explanation?: string;       // 答案解析
    tags?: string[];           // 标签
    createTime: string;
}

// 大题接口
interface BigQuestion {
    id: string;
    title: string;             // 大题标题
    description?: string;      // 大题描述
    sort: number;             // 排序
    totalScore: number;       // 总分值
    subQuestions: SubQuestion[]; // 小题列表
    createTime: string;
}

const questionTypeValue = ref<string>('single_choice')
const questionTypeOptions = ref([
    {
        label: '单选题',
        value: 'single_choice'
    },
    {
        label: '多选题',
        value: 'multiple_choice'
    },
    {
        label: '判断题',
        value: 'true_false'
    },
    {
        label: '填空题',
        value: 'fill_blank'
    },
    {
        label: '简答题',
        value: 'short_answer'
    },
    {
        label: '复合题',
        value: 'composite'
    }
])

// 难度选项配置
const difficultyOptions = ref([
    { label: '简单', value: 'easy' },
    { label: '中等', value: 'medium' },
    { label: '困难', value: 'hard' }
])

const examForm = reactive({
    title: '',
    type: 1, // 1: 固定试卷组, 2: 随机抽题组卷
    description: '',
    totalScore: 0,           // 试卷总分
    duration: 60,            // 考试时长（分钟）
    passScore: 60,           // 及格分数
    instructions: '',        // 考试说明
    useAIGrading: false,     // 是否启用AI阅卷功能
    questions: [
        {
            id: '1',
            title: '',
            description: '',
            sort: 1,
            totalScore: 0,
            subQuestions: [],
            createTime: new Date().toISOString()
        }
    ] as BigQuestion[],
    createTime: new Date().toISOString(),
    updateTime: new Date().toISOString()
});

const examType = computed(() => {
    return examForm.type === 1
})

const changeType = (e: number) => {
    examForm.type = e;
}

const addQuestion = (index: number) => {
    const questionType = questionTypeValue.value as QuestionType;
    const newSubQuestion: SubQuestion = {
        id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        type: questionType,
        title: '',
        score: 5, // 默认分值
        difficulty: 'medium',
        required: true, // 默认必填
        createTime: new Date().toISOString()
    };

    // 根据题型初始化不同的字段
    switch (questionType) {
        case QuestionType.SINGLE_CHOICE:
            newSubQuestion.options = [
                { id: '1', content: '选项A', isCorrect: false },
                { id: '2', content: '选项B', isCorrect: false },
                { id: '3', content: '选项C', isCorrect: false },
                { id: '4', content: '选项D', isCorrect: false }
            ];
            newSubQuestion.correctAnswer = '';
            break;

        case QuestionType.MULTIPLE_CHOICE:
            newSubQuestion.options = [
                { id: '1', content: '选项A', isCorrect: false },
                { id: '2', content: '选项B', isCorrect: false },
                { id: '3', content: '选项C', isCorrect: false },
                { id: '4', content: '选项D', isCorrect: false }
            ];
            newSubQuestion.correctAnswer = [];
            break;

        case QuestionType.TRUE_FALSE:
            newSubQuestion.trueFalseAnswer = undefined; // 初始状态不选择任何选项
            break;

        case QuestionType.FILL_BLANK:
            newSubQuestion.fillBlanks = [
                { id: '1', content: '', position: 1 }
            ];
            break;

        case QuestionType.SHORT_ANSWER:
            newSubQuestion.textAnswer = '';
            break;

        case QuestionType.COMPOSITE:
            newSubQuestion.subQuestions = [];
            break;
    }

    // 添加到对应大题的小题列表
    examForm.questions[index].subQuestions.push(newSubQuestion);

    // 更新大题总分
    updateBigQuestionScore(index);
}

// 更新大题总分的辅助函数
const updateBigQuestionScore = (bigQuestionIndex: number) => {
    const bigQuestion = examForm.questions[bigQuestionIndex];
    bigQuestion.totalScore = bigQuestion.subQuestions.reduce((total, subQ) => total + subQ.score, 0);

    // 更新试卷总分
    examForm.totalScore = examForm.questions.reduce((total, bigQ) => total + bigQ.totalScore, 0);
}

// 添加新的大题
const addBigQuestion = () => {
    const newBigQuestion: BigQuestion = {
        id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        title: `第${examForm.questions.length + 1}大题`,
        description: '',
        sort: examForm.questions.length + 1,
        totalScore: 0,
        subQuestions: [],
        createTime: new Date().toISOString()
    };

    examForm.questions.push(newBigQuestion);
}

// 获取题型名称
const getQuestionTypeName = (type: QuestionType): string => {
    const typeMap = {
        [QuestionType.SINGLE_CHOICE]: '单选题',
        [QuestionType.MULTIPLE_CHOICE]: '多选题',
        [QuestionType.TRUE_FALSE]: '判断题',
        [QuestionType.FILL_BLANK]: '填空题',
        [QuestionType.SHORT_ANSWER]: '简答题',
        [QuestionType.COMPOSITE]: '复合题'
    };
    return typeMap[type] || '未知题型';
}

// 删除小题
const deleteSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
    examForm.questions[bigQuestionIndex].subQuestions.splice(subQuestionIndex, 1);
    updateBigQuestionScore(bigQuestionIndex);
}

// 更新单选题答案
const updateSingleChoice = (bigQuestionIndex: number, subQuestionIndex: number, optionId: string) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    subQuestion.correctAnswer = optionId;

    // 更新选项的正确状态
    if (subQuestion.options) {
        subQuestion.options.forEach(option => {
            option.isCorrect = option.id === optionId;
        });
    }
}

// 更新多选题答案
const updateMultipleChoice = (bigQuestionIndex: number, subQuestionIndex: number, optionId: string, checked: boolean) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    let answers = (subQuestion.correctAnswer as string[]) || [];

    if (checked) {
        if (!answers.includes(optionId)) {
            answers.push(optionId);
        }
    } else {
        answers = answers.filter(id => id !== optionId);
    }

    subQuestion.correctAnswer = answers;

    // 更新选项的正确状态
    if (subQuestion.options) {
        subQuestion.options.forEach(option => {
            option.isCorrect = answers.includes(option.id);
        });
    }
}

// 更新判断题答案
const updateTrueFalse = (bigQuestionIndex: number, subQuestionIndex: number, value: boolean) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    subQuestion.trueFalseAnswer = value;
}

// 添加选项
const addOption = (bigQuestionIndex: number, subQuestionIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (subQuestion.options) {
        const newOptionId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        const optionLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        const nextLabel = optionLabels[subQuestion.options.length] || String.fromCharCode(65 + subQuestion.options.length);

        subQuestion.options.push({
            id: newOptionId,
            content: `选项${nextLabel}`,
            isCorrect: false
        });
    }
}

// 删除选项
const deleteOption = (bigQuestionIndex: number, subQuestionIndex: number, optionIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (subQuestion.options && subQuestion.options.length > 2) { // 至少保留2个选项
        const deletedOption = subQuestion.options[optionIndex];
        subQuestion.options.splice(optionIndex, 1);

        // 如果删除的是正确答案，需要更新correctAnswer
        if (subQuestion.type === QuestionType.SINGLE_CHOICE && subQuestion.correctAnswer === deletedOption.id) {
            subQuestion.correctAnswer = '';
        } else if (subQuestion.type === QuestionType.MULTIPLE_CHOICE && Array.isArray(subQuestion.correctAnswer)) {
            subQuestion.correctAnswer = subQuestion.correctAnswer.filter(id => id !== deletedOption.id);
        }
    }
}

// 添加填空
const addFillBlank = (bigQuestionIndex: number, subQuestionIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (subQuestion.fillBlanks) {
        const newBlankId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        subQuestion.fillBlanks.push({
            id: newBlankId,
            content: '',
            position: subQuestion.fillBlanks.length + 1
        });
    }
}

// 删除填空
const deleteFillBlank = (bigQuestionIndex: number, subQuestionIndex: number, blankIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (subQuestion.fillBlanks && subQuestion.fillBlanks.length > 1) { // 至少保留1个填空
        subQuestion.fillBlanks.splice(blankIndex, 1);

        // 重新排序position
        subQuestion.fillBlanks.forEach((blank, index) => {
            blank.position = index + 1;
        });
    }
}

// 删除大题
const deleteBigQuestion = (bigQuestionIndex: number) => {
    if (examForm.questions.length <= 1) {
        dialog.warning({
            title: '操作限制',
            content: '至少需要保留一个大题',
            positiveText: '确定'
        });
        return;
    }

    const bigQuestion = examForm.questions[bigQuestionIndex];
    const content = bigQuestion.subQuestions.length > 0
        ? `确定要删除第${bigQuestionIndex + 1}题吗？该大题包含${bigQuestion.subQuestions.length}道小题，删除后无法恢复！`
        : `确定要删除第${bigQuestionIndex + 1}题吗？`;

    dialog.warning({
        title: '删除确认',
        content: content,
        positiveText: '确定删除',
        negativeText: '取消',
        onPositiveClick: () => {
            examForm.questions.splice(bigQuestionIndex, 1);

            // 重新排序
            examForm.questions.forEach((question, index) => {
                question.sort = index + 1;
                question.title = `第${index + 1}大题`;
            });

            // 更新总分
            examForm.totalScore = examForm.questions.reduce((total, bigQ) => total + bigQ.totalScore, 0);
        }
    });
}

// 移动大题位置
const moveBigQuestion = (fromIndex: number, toIndex: number) => {
    if (toIndex >= 0 && toIndex < examForm.questions.length) {
        const question = examForm.questions.splice(fromIndex, 1)[0];
        examForm.questions.splice(toIndex, 0, question);

        // 重新排序
        examForm.questions.forEach((question, index) => {
            question.sort = index + 1;
            question.title = `第${index + 1}大题`;
        });
    }
}

// AI阅卷功能切换
const toggleAIGrading = () => {
    examForm.useAIGrading = !examForm.useAIGrading;

    // 显示状态变更提示
    // const statusText = examForm.useAIGrading ? '已启用' : '已关闭';
    // dialog.success({
    //     title: 'AI阅卷功能',
    //     content: `AI阅卷功能${statusText}`,
    //     positiveText: '确定'
    // });
};

// 批量设置分数相关状态和方法
const showBatchScoreModal = ref(false);

// 打开批量设置分数模态框
const openBatchScoreModal = () => {
    // 检查是否有题目
    let hasQuestions = false;
    for (const bigQuestion of examForm.questions) {
        if (bigQuestion.subQuestions.length > 0) {
            hasQuestions = true;
            break;
        }
    }

    if (!hasQuestions) {
        dialog.warning({
            title: '提示',
            content: '请先添加题目后再进行批量设置分数',
            positiveText: '确定'
        });
        return;
    }

    showBatchScoreModal.value = true;
};

// 处理批量设置分数确认
const handleBatchScoreConfirm = (updatedQuestions: BigQuestion[]) => {
    // 更新试卷数据
    examForm.questions = updatedQuestions;

    // 重新计算试卷总分
    examForm.totalScore = examForm.questions.reduce((total, bigQ) => total + bigQ.totalScore, 0);
};

// 处理批量设置分数取消
const handleBatchScoreCancel = () => {
    // 取消操作，不需要特殊处理
};

// 试卷设置相关状态和方法
const showExamSettingsModal = ref(false);

// 题库选择相关状态和方法
const showQuestionBankModal = ref(false);
const currentBigQuestionIndex = ref(0);

// 试卷设置数据
const examSettingsData = computed(() => ({
    title: examForm.title,
    startTime: null,
    endTime: null,
    category: (examForm.type === 1 ? 'exam' : 'practice') as 'exam' | 'practice',
    timeLimit: 'limited' as 'unlimited' | 'limited' | 'no_limit',
    timeLimitValue: 0,
    examTimes: 'unlimited' as 'unlimited' | 'limited' | 'each_day',
    examTimesValue: 1,
    dailyLimit: 1,
    chapter: '',
    passScore: examForm.passScore,
    participants: 'all' as 'all' | 'by_school',
    selectedClasses: [],
    instructions: examForm.instructions,

    // 考试模式专用
    enforceOrder: false,
    enforceInstructions: false,
    readingTime: 10,
    submitSettings: {
        allowEarlySubmit: true,
    },
    gradingDelay: 60,
    scoreDisplay: 'show_all' as 'show_all' | 'show_score' | 'hide_all',
    detailedSettings: {
        showQuestions: false,
        showAnalysis: false,
        showSubmissionTime: false,
    },
    timerEnabled: false,
    timerDuration: examForm.duration,
    answerType: 'auto_save' as 'auto_save' | 'manual_save' | 'multiple_submit',
    detailScoreMode: 'question' as 'question' | 'automatic' | 'show_current' | 'show_all',
    showRanking: false,
    courseProgress: 0,

    // 练习模式专用
    correctnessMode: 'no_limit' as 'no_limit' | 'limit_wrong',
    wrongLimit: 10,
    practiceSettings: {
        showCorrectAnswer: false,
        showWrongAnswer: false,
        showAnalysis: false,
        keepPreviousAnswers: false,
        useLastScore: false,
    },
    paperMode: 'show_all' as 'show_all' | 'show_current' | 'hide_all',
}));

// 打开试卷设置模态框
const openExamSettingsModal = () => {
    showExamSettingsModal.value = true;
};

// 处理试卷设置确认
const handleExamSettingsConfirm = (settings: any) => {
    // 更新试卷数据
    examForm.title = settings.title;
    examForm.type = settings.category === 'exam' ? 1 : 2;
    examForm.passScore = settings.passScore;
    examForm.instructions = settings.instructions;
    examForm.duration = settings.timerDuration || examForm.duration;

    // TODO 可以根据需要更新更多字段
    console.log('试卷设置数据:', settings);
};

// 处理试卷设置取消
const handleExamSettingsCancel = () => {
    // 取消操作，不需要特殊处理
};

// 题库选择相关方法
const openQuestionBankModal = (bigQuestionIndex: number) => {
    currentBigQuestionIndex.value = bigQuestionIndex;
    showQuestionBankModal.value = true;
};

// 处理题库选择确认
const handleQuestionBankConfirm = (selectedQuestions: any[]) => {
    const bigQuestionIndex = currentBigQuestionIndex.value;

    // 将选择的题目转换为当前系统的题目格式并添加到对应大题
    selectedQuestions.forEach(question => {
        const questionType = getQuestionTypeFromString(question.type);
        const newSubQuestion: SubQuestion = {
            id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
            type: questionType as QuestionType,
            title: question.title,
            score: question.score,
            difficulty: question.difficulty,
            required: true,
            createTime: new Date().toISOString()
        };

        // 根据题型初始化不同的字段
        if (questionType === 'single_choice') {
            newSubQuestion.options = [
                { id: '1', content: '选项A', isCorrect: false },
                { id: '2', content: '选项B', isCorrect: false },
                { id: '3', content: '选项C', isCorrect: false },
                { id: '4', content: '选项D', isCorrect: false }
            ];
            newSubQuestion.correctAnswer = '';
        } else if (questionType === 'multiple_choice') {
            newSubQuestion.options = [
                { id: '1', content: '选项A', isCorrect: false },
                { id: '2', content: '选项B', isCorrect: false },
                { id: '3', content: '选项C', isCorrect: false },
                { id: '4', content: '选项D', isCorrect: false }
            ];
            newSubQuestion.correctAnswer = [];
        } else if (questionType === 'true_false') {
            newSubQuestion.trueFalseAnswer = undefined;
        } else if (questionType === 'fill_blank') {
            newSubQuestion.fillBlanks = [
                { id: '1', content: '', position: 1 }
            ];
        } else if (questionType === 'short_answer') {
            newSubQuestion.textAnswer = '';
        }

        examForm.questions[bigQuestionIndex].subQuestions.push(newSubQuestion);
    });

    // 重新计算总分
    updateBigQuestionScore(bigQuestionIndex);

    dialog.success({
        title: '成功',
        content: `成功导入${selectedQuestions.length}道题目`,
        positiveText: '确定'
    });
    showQuestionBankModal.value = false;
};

// 处理题库选择取消
const handleQuestionBankCancel = () => {
    showQuestionBankModal.value = false;
};

// 辅助函数：将字符串题型转换为系统题型
const getQuestionTypeFromString = (typeString: string) => {
    const typeMap: { [key: string]: string } = {
        '单选题': 'single_choice',
        '多选题': 'multiple_choice',
        '判断题': 'true_false',
        '填空题': 'fill_blank',
        '简答题': 'short_answer'
    };
    return typeMap[typeString] || 'single_choice';
};

// 保存试卷
const saveExam = () => {
    // 验证数据
    if (!examForm.title.trim()) {
        dialog.warning({
            title: '输入提示',
            content: '请输入试卷标题',
            positiveText: '确定'
        });
        return;
    }

    if (examForm.questions.length === 0) {
        dialog.warning({
            title: '输入提示',
            content: '请至少添加一个大题',
            positiveText: '确定'
        });
        return;
    }

    let hasQuestions = false;
    for (const bigQuestion of examForm.questions) {
        if (bigQuestion.subQuestions.length > 0) {
            hasQuestions = true;
            break;
        }
    }

    if (!hasQuestions) {
        dialog.warning({
            title: '输入提示',
            content: '请至少添加一道题目',
            positiveText: '确定'
        });
        return;
    }

    // 这里实现保存逻辑
    console.log('保存试卷数据:', examForm);
    dialog.success({
        title: '保存成功',
        content: '试卷保存成功！',
        positiveText: '确定'
    });
}

// 复合题相关方法
const addCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (!subQuestion.subQuestions) {
        subQuestion.subQuestions = [];
    }

    const newSubSubQuestion: SubQuestion = {
        id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        type: QuestionType.SINGLE_CHOICE,
        title: '',
        score: 2,
        difficulty: 'medium',
        required: true,
        options: [
            { id: '1', content: '选项A', isCorrect: false },
            { id: '2', content: '选项B', isCorrect: false },
            { id: '3', content: '选项C', isCorrect: false },
            { id: '4', content: '选项D', isCorrect: false }
        ],
        correctAnswer: '',
        createTime: new Date().toISOString()
    };

    subQuestion.subQuestions.push(newSubSubQuestion);
    updateBigQuestionScore(bigQuestionIndex);
}

const deleteCompositeSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    if (subQuestion.subQuestions) {
        subQuestion.subQuestions.splice(compSubIndex, 1);
        updateBigQuestionScore(bigQuestionIndex);
    }
}

// 复合题选项管理
const updateCompositeChoice = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionId: string) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ) {
        compositeSubQ.correctAnswer = optionId;
        // 更新选项的正确状态
        if (compositeSubQ.options) {
            compositeSubQ.options.forEach(option => {
                option.isCorrect = option.id === optionId;
            });
        }
    }
}

const updateCompositeMultiChoice = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionId: string, checked: boolean) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ) {
        let answers = (compositeSubQ.correctAnswer as string[]) || [];

        if (checked) {
            if (!answers.includes(optionId)) {
                answers.push(optionId);
            }
        } else {
            answers = answers.filter(id => id !== optionId);
        }

        compositeSubQ.correctAnswer = answers;

        // 更新选项的正确状态
        if (compositeSubQ.options) {
            compositeSubQ.options.forEach(option => {
                option.isCorrect = answers.includes(option.id);
            });
        }
    }
}

// 更新复合题判断题答案
const updateCompositeTrueFalse = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, value: boolean) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ) {
        compositeSubQ.trueFalseAnswer = value;
    }
}

const addCompositeOption = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ && compositeSubQ.options) {
        const newOptionId = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
        const optionLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        const nextLabel = optionLabels[compositeSubQ.options.length] || String.fromCharCode(65 + compositeSubQ.options.length);

        compositeSubQ.options.push({
            id: newOptionId,
            content: `选项${nextLabel}`,
            isCorrect: false
        });
    }
}

const deleteCompositeOption = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, optionIndex: number) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ && compositeSubQ.options && compositeSubQ.options.length > 2) { // 至少保留2个选项
        const deletedOption = compositeSubQ.options[optionIndex];
        compositeSubQ.options.splice(optionIndex, 1);

        // 如果删除的是正确答案，需要更新correctAnswer
        if (compositeSubQ.type === QuestionType.SINGLE_CHOICE && compositeSubQ.correctAnswer === deletedOption.id) {
            compositeSubQ.correctAnswer = '';
        } else if (compositeSubQ.type === QuestionType.MULTIPLE_CHOICE && Array.isArray(compositeSubQ.correctAnswer)) {
            compositeSubQ.correctAnswer = compositeSubQ.correctAnswer.filter(id => id !== deletedOption.id);
        }
    }
}

// 修改复合题子题目类型
const changeCompositeSubQuestionType = (bigQuestionIndex: number, subQuestionIndex: number, compSubIndex: number, newType: string) => {
    const compositeSubQ = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex].subQuestions?.[compSubIndex];
    if (compositeSubQ) {
        compositeSubQ.type = newType as QuestionType;

        // 根据新题型重新初始化相关字段
        switch (newType as QuestionType) {
            case QuestionType.SINGLE_CHOICE:
                compositeSubQ.options = [
                    { id: '1', content: '选项A', isCorrect: false },
                    { id: '2', content: '选项B', isCorrect: false },
                    { id: '3', content: '选项C', isCorrect: false },
                    { id: '4', content: '选项D', isCorrect: false }
                ];
                compositeSubQ.correctAnswer = '';
                delete compositeSubQ.trueFalseAnswer;
                break;

            case QuestionType.MULTIPLE_CHOICE:
                compositeSubQ.options = [
                    { id: '1', content: '选项A', isCorrect: false },
                    { id: '2', content: '选项B', isCorrect: false },
                    { id: '3', content: '选项C', isCorrect: false },
                    { id: '4', content: '选项D', isCorrect: false }
                ];
                compositeSubQ.correctAnswer = [];
                delete compositeSubQ.trueFalseAnswer;
                break;

            case QuestionType.TRUE_FALSE:
                compositeSubQ.trueFalseAnswer = undefined; // 初始状态不选择任何选项
                delete compositeSubQ.options;
                delete compositeSubQ.correctAnswer;
                break;
        }
    }
}

// 保存题目
// const saveSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
//     const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];

//     // 验证题目数据
//     if (!subQuestion.title.trim()) {
//         dialog.warning({
//             title: '输入提示',
//             content: '请输入题目内容',
//             positiveText: '确定'
//         });
//         return;
//     }

//     // 根据题型验证必要字段
//     switch (subQuestion.type) {
//         case QuestionType.SINGLE_CHOICE:
//         case QuestionType.MULTIPLE_CHOICE:
//             if (!subQuestion.options || subQuestion.options.length < 2) {
//                 dialog.warning({
//                     title: '输入提示',
//                     content: '选择题至少需要2个选项',
//                     positiveText: '确定'
//                 });
//                 return;
//             }
//             if (!subQuestion.correctAnswer ||
//                 (Array.isArray(subQuestion.correctAnswer) && subQuestion.correctAnswer.length === 0)) {
//                 dialog.warning({
//                     title: '输入提示',
//                     content: '请设置正确答案',
//                     positiveText: '确定'
//                 });
//                 return;
//             }
//             break;

//         case QuestionType.FILL_BLANK:
//             if (!subQuestion.fillBlanks || subQuestion.fillBlanks.length === 0) {
//                 dialog.warning({
//                     title: '输入提示',
//                     content: '填空题至少需要1个填空',
//                     positiveText: '确定'
//                 });
//                 return;
//             }
//             if (subQuestion.fillBlanks.some(blank => !blank.content.trim())) {
//                 dialog.warning({
//                     title: '输入提示',
//                     content: '请填写所有填空的正确答案',
//                     positiveText: '确定'
//                 });
//                 return;
//             }
//             break;
//     }

//     updateBigQuestionScore(bigQuestionIndex);
//     dialog.success({
//         title: '保存成功',
//         content: '题目保存成功！',
//         positiveText: '确定'
//     });
// }

// 预览题目
const previewSubQuestion = (bigQuestionIndex: number, subQuestionIndex: number) => {
    const subQuestion = examForm.questions[bigQuestionIndex].subQuestions[subQuestionIndex];
    console.log('预览题目:', subQuestion);
    // 这里可以实现题目预览功能，比如打开一个模态框显示题目
}
</script>

<style scoped>

.exam-container{
    background-color: #fff;
    padding: 10px;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-content h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.back-button {
    color: #666;
    transition: all 0.3s ease;
}

.back-button:hover {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
}

.group {
    border: 1px solid #F1F3F4;
    padding: 12px;
    margin-bottom: 15px 0;
}

.required::before {
    content: '*';
    color: red;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
    align-items: center;
}

.mr-10 {
    margin-right: 10px;
}

.iconRotate {
    transform: rotate(180deg);
}

.input-title {
    flex: 1;
    margin-right: 10px;
}

.questionRow {
    display: flex;
    align-items: center;
}

.empty_tip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 新增样式 */
.question-item {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #fafafa;
}

.question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e8e8;
}

.question-type {
    background-color: #0288d1;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.question-content {
    margin-bottom: 12px;
}

.sub-question-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-options {
    margin-bottom: 12px;
}

.option-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.choice-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background-color: white;
    border-radius: 4px;
}

.fill-blank-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background-color: white;
    border-radius: 4px;
}

.add-option-btn {
    margin-top: 8px;
    color: #0288d1;
}

.question-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.total {
    color: #666;
    font-size: 14px;
}

.sub-question-footer {
    margin: 10px 0;
    display: flex;
    justify-content: end;
    align-items: center;
}

.sub-footer-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
}

/* 复合题样式 */
.composite-sub-questions {
    margin-top: 16px;
}

.composite-sub-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    background-color: #f9f9f9;
}

.composite-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.composite-sub-content {
    margin-top: 8px;
}

.composite-options {
    margin-top: 8px;
}

.sub-question-number {
    display: flex;
    gap: 6;
}

.footer-btn {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    min-height: 60px;
}

.footer-left {
    flex: 0 0 auto;
    z-index: 1;
}

.footer-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    gap: 4px;
    font-size: 14px;
    color: #666;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 2;
}

.footer-center span {
    font-weight: 500;
    margin: 0 6px;
}

.footer-right {
    flex: 0 0 auto;
    z-index: 1;
}


/* 响应式布局 */
@media (max-width: 1200px) {
    .footer-btn {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .footer-center {
        position: static;
        transform: none;
        order: 2;
        margin: 8px 0;
    }

    .footer-left {
        order: 1;
    }

    .footer-right {
        order: 3;
    }
}
</style>