<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch && !hideActions" label-width="68px">
            <el-form-item label="题目ID" prop="id">
                <el-input v-model.number="queryParams.id" type="number" placeholder="请输入题目ID" clearable
                          @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="题干" prop="title">
                <el-input v-model="queryParams.title" placeholder="请输入题干关键词" clearable
                          @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="题型" prop="qtpye">
                <!-- <el-input v-model="queryParams.qtpye" placeholder="请输入题型" clearable @keyup.enter="handleQuery" /> -->
                <!-- <dict-tag :options="question_type" :value="queryParams.qtpye"/> -->
                <el-select v-model="queryParams.typeId" clearable @change="handleQuery" style="width: 172px">
                    <el-option v-for="q in question_type" :label="q.label" :value="q.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="包含子题" prop="isSubType">
                <el-select v-model="queryParams.isSubType" placeholder="请选择包含子题" clearable style="width: 172px">
                    <el-option v-for="item in bool_values" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="科目" prop="subjectId">
                <el-select v-model="queryParams.subjectId" clearable filterable @change="handleSubjectChange" style="width: 172px" placeholder="请选择科目">
                    <el-option v-for="s in subjectList" :label="getSubjectDisplayLabel(s)" :value="s.subjectId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="知识点" prop="knowledgeId">
                <el-tree-select node-key="id" v-model="queryParams.knowledgeId" :data="filteredKnowledgeTreeList" check-strictly
                                :render-after-expand="false" style="" :props="{ label: 'name', children: 'children' }"
                                placeholder="请选择知识点" class="w-[172px]!" @change="handleQuery"
                                clearable
                                filterable/>
            </el-form-item>
            <!-- <el-form-item label="难度" prop="diff">
                <el-input v-model="queryParams.diff" placeholder="请输入难度" clearable @keyup.enter="handleQuery"/>
            </el-form-item> -->
            <!-- <el-form-item label="相似度" prop="similarity">
              <el-input v-model="queryParams.similarity" placeholder="请输入试题在题库中的相似度" clearable @keyup.enter="handleQuery" />
            </el-form-item> -->
            <!-- <el-form-item label="试题年份" prop="year">
                <el-input v-model="queryParams.year" placeholder="请输入试题年份" clearable @keyup.enter="handleQuery"/>
            </el-form-item> -->
            <!-- <el-form-item label="试题类型" prop="paperTpye">
              <el-select v-model="queryParams.paperTpye" clearable @change="handleQuery" style="width: 172px">
                <el-option v-for="p in paper_type" :label="p.label" :value="p.value" />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="来源" prop="source">
                <el-input v-model="queryParams.source" placeholder="请输入来源" clearable @keyup.enter="handleQuery"/>
            </el-form-item> -->
            <!-- <el-form-item label="试题来源" prop="fromSite">
                <el-input v-model="queryParams.fromSite" placeholder="请输入试题来源" clearable
                          @keyup.enter="handleQuery"/>
            </el-form-item> -->
            
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" v-if="!hideActions">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['learn:questions:add']">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                           v-hasPermi="['learn:questions:edit']">修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="Switch" :disabled="!ids.length" @click="handleChangeType"
                           v-hasPermi="['learn:questions:changeType']">修改题型
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                           v-hasPermi="['learn:questions:remove']">删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                           v-hasPermi="['learn:questions:export']">导出
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="questionsList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" fixed="left"/>
            <el-table-column label="题目ID" align="center" prop="id" fixed="left" />
            <el-table-column label="题干" align="left" prop="title" min-width="350" header-align="center"
                             fixed="left">
                <template #default="scope">
                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.title)"></div>
                </template>
            </el-table-column>
            <el-table-column label="题型" align="center" prop="qtpye"/>
            <el-table-column label="学科" align="center" prop="subjectId">
                <template #default="scope">
                    <span v-if="scope.row.knowledgeTrees && scope.row.knowledgeTrees.length > 0">
                        {{ getSubjectIdsFromKnowledgeTrees(scope.row.knowledgeTrees) }}
                    </span>
                    <span v-else-if="scope.row.subjectId">
                        {{ scope.row.subjectId }}-{{ getSubjectName(scope.row.subjectId) }}
                    </span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="知识点" align="center" prop="knowledgeId" show-overflow-tooltip>
                <template #default="scope">
                    <el-tooltip v-if="scope.row.knowledgeTrees && scope.row.knowledgeTrees.length > 0"
                                :content="`${scope.row.knowledgeTrees[0].id}-${scope.row.knowledgeTrees[0].name}`"
                                placement="top">
                        <el-link type="primary"
                                 @click="handleShowKnowledgeTrees(scope.row)"
                                 :underline="false"
                                 class="knowledge-link">
                            {{ scope.row.knowledgeTrees[0].id }}-{{ scope.row.knowledgeTrees[0].name }}
                        </el-link>
                    </el-tooltip>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="选项" align="center" prop="optionA" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        <span v-if="scope.row.optionA" class="table-cell-content" v-html="formatContentWithImages(scope.row.optionA)"></span>
                        <span v-else>-</span>
                    </el-link>
                </template>
            </el-table-column>
            <!-- <el-table-column label="选项B" align="center" prop="optionB" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionB || '-' }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="选项C" align="center" prop="optionC" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionC || '-' }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="选项D" align="center" prop="optionD" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionD || '-' }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="选项E" align="center" prop="optionE" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionE || '-' }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="选项F" align="center" prop="optionF" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionF || '-' }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="选项G" align="center" prop="optionG" show-overflow-tooltip>
                <template #default="scope">
                    <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
                        {{ scope.row.optionG || '-' }}
                    </el-link>
                </template>
            </el-table-column> -->
            <el-table-column label="标准答案" align="center" prop="answer1" show-overflow-tooltip>
                <template #default="scope">
                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.answer1 || '-')"></div>
                </template>
            </el-table-column>
            <el-table-column label="答案2" align="center" prop="answer2" show-overflow-tooltip>
                <template #default="scope">
                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.answer2 || '-')"></div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="试卷Id" align="center" prop="paperId"/> -->
            <!-- <el-table-column label="难易度" align="center" prop="diff"/> -->
            <!-- <el-table-column label="相似度" align="center" prop="similarity"/> -->
            <el-table-column label="试题解析" align="center" prop="parse" min-width="250" show-overflow-tooltip>
                <template #default="scope">
                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.parse || '-')"></div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="knowId" align="center" prop="knowId" /> -->
            <!-- <el-table-column label="年级ID" align="center" prop="gradeId"/> -->
            <!-- <el-table-column label="knowledges" align="center" prop="knowledges" /> -->
            <!-- <el-table-column label="试题区域" align="center" prop="area"/> -->
            <el-table-column label="试题年份" align="center" prop="year"/>
            <!-- <el-table-column label="试题类型" align="center" prop="paperTpye"/> -->
            <el-table-column label="来源" align="center" prop="source"/>
            <!-- <el-table-column label="试题来源" align="center" prop="fromSite"/> -->
            <!-- <el-table-column label="图片水印" align="center" prop="isSub"/> -->
            <!-- <el-table-column label="常规题" align="center" prop="isNormal"/> -->
<!--            <el-table-column label="匹配知识点" align="center" prop="isKonw" min-width="120"/>-->
            <el-table-column label="tiid" align="center" prop="tiid" min-width="100"/>
            <!-- <el-table-column label="试题题干的md5值" align="center" prop="md5" /> -->
            <!-- <el-table-column label="是否唯一" align="center" prop="isunique"/> -->
            <!-- <el-table-column label="md52" align="center" prop="md52" /> -->
            <el-table-column label="分值" align="center" prop="score"/>
            <!-- <el-table-column label="选项" align="center" prop="options"/> -->
            <!-- <el-table-column label="选项" align="center" prop="options0"/> -->
            <!-- <el-table-column label="number" align="center" prop="number" /> -->
            <!-- <el-table-column label="paperTypeTitle" align="center" prop="paperTypeTitle" /> -->
            <!-- <el-table-column label="试题-材料题题干" align="center" prop="title0" min-width="130" show-overflow-tooltip/> -->
            <!-- <el-table-column label="试题-材料题题干" align="center" prop="title1" min-width="130" show-overflow-tooltip/> -->
            <!-- <el-table-column label="试题解析" align="left" prop="parse0" header-align="center" show-overflow-tooltip/> -->
            <!-- <el-table-column label="answer0" align="center" prop="answer0"/> -->
            <!-- <el-table-column label="是否更新" align="center" prop="isUpdate">
                <template #default="scope">
                    <dict-tag :options="bool_values" :value="scope.row.isUpdate" />
                </template>
            </el-table-column> -->
            <el-table-column label="包含子题" align="center" prop="isSubType">
                <template #default="scope">
                    <dict-tag :options="bool_values" :value="scope.row.isSubType" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="140"
                             fixed="right" v-if="!hideActions">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                               v-hasPermi="['learn:questions:edit']">修改
                    </el-button>
                    <el-button link type="primary" icon="" @click="handleTextUpdate(scope.row)"
                               v-hasPermi="['learn:questions:edit']">文本修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                               v-hasPermi="['learn:questions:remove']">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList"/>

        <!-- 添加或修改试题对话框 -->
        <!-- Use v-if destroy editor, or else editor will auto add <p></p> tags -->
        <el-dialog v-if="open" :title="title" v-model="open" width="1200px" append-to-body>
            <div class="form-content-wrapper">
                <el-form ref="questionsRef" :model="form" :rules="rules" label-width="140px">
                <!-- 只读显示区域：题目标题和选项（仅在修改时显示） -->
                <div class="readonly-section" v-if="form.id != null">
                    <el-form-item label="标题">
                        <div class="readonly-content" v-html="formatContentWithImages(form.title) || '-'"></div>
                    </el-form-item>
                    <el-row :gutter="20" v-if="form.optionA || form.optionB || form.optionC || form.optionD || form.optionE || form.optionF || form.optionG">
                        <el-col :span="12" v-if="form.optionA">
                            <el-form-item label="选项A">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionA)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionB">
                            <el-form-item label="选项B">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionB)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionC">
                            <el-form-item label="选项C">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionC)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionD">
                            <el-form-item label="选项D">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionD)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionE">
                            <el-form-item label="选项E">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionE)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionF">
                            <el-form-item label="选项F">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionF)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.optionG">
                            <el-form-item label="选项G">
                                <div class="readonly-content" v-html="formatContentWithImages(form.optionG)"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-if="form.answer1 || form.answer2">
                        <el-col :span="12" v-if="form.answer1">
                            <el-form-item label="答案1">
                                <div class="readonly-content" v-html="formatContentWithImages(form.answer1)"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="form.answer2">
                            <el-form-item label="答案2">
                                <div class="readonly-content" v-html="formatContentWithImages(form.answer2)"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>

                <!-- 横线分隔（仅在修改时显示） -->
                <el-divider v-if="form.id != null"></el-divider>


                <!-- <el-row :gutter="20"> -->
<!--                    <el-col :span="12">-->
<!--                        <el-form-item label="知识点" prop="knowledgeId">-->
<!--                            <el-tree-select node-key="id" v-model="form.knowledgeId" :data="knowledgeTreeList" check-strictly-->
<!--                                            :render-after-expand="false" style="width: 100%"-->
<!--                                            :props="{ label: 'name', children: 'children' }"-->
<!--                                            placeholder="请选择知识点"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    
                <!-- </el-row> -->
                <!-- 可修改内容区域，两列布局 -->
                <el-row :gutter="20">
<!--                    <el-col :span="12">-->
<!--                        <el-form-item label="科目" prop="subjectId">-->
<!--                            <el-select v-model="form.subjectId" placeholder="请选择科目" style="width: 100%">-->
<!--                                <el-option v-for="s in subjectList" :label="s.subjectName" :value="s.subjectId"/>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="8">
                        <el-form-item label="题型" prop="qtpye">
                            <el-input v-model="form.qtpye" disabled type="text" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="来源" prop="source">
                            <el-input v-model="form.source" disabled placeholder="请输入来源"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="源ID" prop="tiid">
                            <el-input v-model="form.tiid" placeholder="请输入试题的源ID"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="标题" prop="title">
                    <Editor v-if="!isTextMode" v-model="form.title" :min-height="120" />
                    <el-input v-else v-model="form.title" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入标题内容"/>
                </el-form-item>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="选项A" prop="optionA">
                            <Editor v-if="!isTextMode" v-model="form.optionA" :min-height="120" />
                            <el-input v-else v-model="form.optionA" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选项B" prop="optionB">
                            <Editor v-if="!isTextMode" v-model="form.optionB" :min-height="120" />
                            <el-input v-else v-model="form.optionB" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="选项C" prop="optionC">
                            <Editor v-if="!isTextMode" v-model="form.optionC" :min-height="120" />
                            <el-input v-else v-model="form.optionC" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选项D" prop="optionD">
                            <Editor v-if="!isTextMode" v-model="form.optionD" :min-height="120" />
                            <el-input v-else v-model="form.optionD" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="选项E" prop="optionE">
                            <Editor v-if="!isTextMode" v-model="form.optionE" :min-height="120" />
                            <el-input v-else v-model="form.optionE" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选项F" prop="optionF">
                            <Editor v-if="!isTextMode" v-model="form.optionF" :min-height="120" />
                            <el-input v-else v-model="form.optionF" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="选项G" prop="optionG">
                            <Editor v-if="!isTextMode" v-model="form.optionG" :min-height="120" />
                            <el-input v-else v-model="form.optionG" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="答案1" prop="answer1">
                            <Editor v-if="!isTextMode" v-model="form.answer1" :min-height="120" />
                            <el-input v-else v-model="form.answer1" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="答案2" prop="answer2">
                            <Editor v-if="!isTextMode" v-model="form.answer2" :min-height="120" />
                            <el-input v-else v-model="form.answer2" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="题型" prop="qtpye">
                    <el-select v-model="form.typeId" placeholder="请选择类型">
                        <el-option v-for="q in question_type" :label="q.label" :value="q.value"/>
                    </el-select>
                </el-form-item> -->


                <el-row :gutter="20">

                    <el-col :span="12">
                        <el-form-item label="试题解析" prop="parse">
                            <Editor v-if="!isTextMode" v-model="form.parse" :min-height="120" />
                            <el-input v-else v-model="form.parse" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="试题题干的md5值" prop="md5">
                  <el-input v-model="form.md5" placeholder="请输入试题题干的md5值" />
                </el-form-item> -->
                <!-- <el-form-item label="${comment}" prop="isunique">
                  <el-input v-model="form.isunique" placeholder="请输入${comment}" />
                </el-form-item> -->
                <!-- <el-form-item label="${comment}" prop="md52">
                  <el-input v-model="form.md52" placeholder="请输入${comment}" />
                </el-form-item> -->
                <!-- <el-form-item label="分值" prop="score">
                    <el-input v-model="form.score" placeholder="请输入分值"/>
                </el-form-item>
                <el-form-item label="选项" prop="options">
                    <el-input v-model="form.options" type="textarea" placeholder="请输入内容"/>
                </el-form-item> -->
                <!-- <el-form-item label="${comment}" prop="number">
                  <el-input v-model="form.number" placeholder="请输入${comment}" />
                </el-form-item> -->
                <!-- <el-form-item label="${comment}" prop="paperTypeTitle">
                  <el-input v-model="form.paperTypeTitle" placeholder="请输入${comment}" />
                </el-form-item> -->
                <!-- <el-form-item label="选项" prop="options0">
                    <el-input v-model="form.options0" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="试题-材料题题干" prop="title0">
                    <el-input v-model="form.title0" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="试题-材料题题干" prop="title1">
                    <el-input v-model="form.title1" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="试题解析" prop="parse0">
                    <el-input v-model="form.parse0" type="textarea" placeholder="请输入内容"/>
                </el-form-item> -->
                <!-- <el-form-item label="${comment}" prop="answer0">
                  <el-input v-model="form.answer0" type="textarea" placeholder="请输入内容" />
                </el-form-item> -->
                <!-- <el-form-item label="是否更新" prop="isUpdate">
                    <el-input v-model="form.isUpdate" placeholder="请输入是否更新"/>
                </el-form-item> -->
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 选项详情弹窗 -->
        <el-dialog v-model="showOptionsDialog" title="选项详情" width="600px" append-to-body>
            <div class="options-detail">
                <div class="option-item" v-if="currentRow.optionA">
                    <div class="option-label">选项A：</div>
                    <div class="option-content">{{ currentRow.optionA }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionB">
                    <div class="option-label">选项B：</div>
                    <div class="option-content">{{ currentRow.optionB }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionC">
                    <div class="option-label">选项C：</div>
                    <div class="option-content">{{ currentRow.optionC }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionD">
                    <div class="option-label">选项D：</div>
                    <div class="option-content">{{ currentRow.optionD }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionE">
                    <div class="option-label">选项E：</div>
                    <div class="option-content">{{ currentRow.optionE }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionF">
                    <div class="option-label">选项F：</div>
                    <div class="option-content">{{ currentRow.optionF }}</div>
                </div>
                <div class="option-item" v-if="currentRow.optionG">
                    <div class="option-label">选项G：</div>
                    <div class="option-content">{{ currentRow.optionG }}</div>
                </div>
                <div v-if="!currentRow.optionA && !currentRow.optionB && !currentRow.optionC && !currentRow.optionD && !currentRow.optionE && !currentRow.optionF && !currentRow.optionG" class="no-options">
                    暂无选项内容
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showOptionsDialog = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="showTypeDialog" title="修改题型" show-close width="500px" append-to-body>
            <div class="text-content">题号：{{typeForm.ids}}</div>
            <div class="mt-2 mb-2">共<el-text type="primary">{{typeForm.ids.length}}</el-text>项</div>
            <div>
                <el-select v-model="typeForm.type" placeholder="请选择题型或者输入自定义题型"
                           filterable allow-create default-first-option>
                    <el-option v-for="t in question_type" :label="t.label" :value="t.value" />
                </el-select>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleUpdateType">确 定</el-button>
                    <el-button @click="showTypeDialog=false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 知识点列表管理弹窗 -->
        <el-dialog v-model="showKnowledgeTreesDialog" title="知识点管理" width="80%" append-to-body class="knowledge-trees-dialog">
            <el-row :gutter="10" class="mb8" v-if="!hideActions">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="Plus" @click="handleAddKnowledgeQuestion">新增</el-button>
                </el-col>
            </el-row>
            <el-table v-loading="knowledgeTreesLoading" :data="currentKnowledgeTreesList">
                <el-table-column label="题目ID" align="center" prop="questionId" width="100" />
                <el-table-column label="知识点ID(pid)" align="center" prop="id" width="120">
                    <template #default="scope">
                        <span v-if="scope.row.pid !== null && scope.row.pid !== undefined">
                            {{ scope.row.id }}({{ scope.row.pid }})
                        </span>
                        <span v-else>
                            {{ scope.row.id }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="知识点" align="center" prop="name" min-width="200" />
                <el-table-column label="科目" align="center" prop="subjectId" min-width="150">
                    <template #default="scope">
                        <span v-if="scope.row.subjectId">{{ scope.row.subjectId }}-{{ getSubjectName(scope.row.subjectId) }}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100" v-if="!hideActions">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdateKnowledgeQuestion(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showKnowledgeTreesDialog = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 知识点关系编辑弹窗 -->
        <el-dialog :title="knowledgeQuestionTitle" v-model="showKnowledgeQuestionDialog" width="500px" append-to-body>
            <el-form ref="knowledgeQuestionRef" :model="knowledgeQuestionForm" :rules="knowledgeQuestionRules" label-width="80px">
                <el-form-item label="题目ID" prop="questionId">
                    <el-input v-model="knowledgeQuestionForm.questionId" placeholder="请输入题ID" disabled />
                </el-form-item>
                <el-form-item label="知识点" prop="knowledgeId">
                    <el-tree-select
                        node-key="id"
                        v-model="knowledgeQuestionForm.knowledgeId"
                        :data="groupedKnowledgeTreeList"
                        check-strictly
                        :render-after-expand="false"
                        style="width: 100%"
                        :props="{ label: 'name', children: 'children', disabled: 'disabled' }"
                        placeholder="请选择知识点"
                        filterable
                        clearable/>
                </el-form-item>
                
                <el-form-item label="顺序" prop="seq">
                    <el-input v-model="knowledgeQuestionForm.seq" placeholder="请输入顺序" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitKnowledgeQuestionForm">确 定</el-button>
                    <el-button @click="cancelKnowledgeQuestion">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Questions">
import {listQuestions, getQuestions, delQuestions, addQuestions, updateQuestions, changeQuestionType} from "@/api/learn/questions"
import {listKnowledgeTree} from "@/api/learn/knowledgeTree"
import {listAllSubject} from "@/api/dz/subject"
import {listKnowledgeQuestion, getKnowledgeQuestion, delKnowledgeQuestion, addKnowledgeQuestion, updateKnowledgeQuestion} from "@/api/learn/knowledgeQuestion"
import {ElMessage, ElLoading} from "element-plus";
import DictTag from '@/components/DictTag/index.vue'
import Editor from '@/components/Editor/index.vue'
import { computed, watch } from 'vue'
import { getImageProxyUrl, formatContentWithImages } from '@/utils/imageHelper'

// 定义 props
const props = defineProps({
    paperId: {
        type: [Number, String],
        default: null
    },
    hideActions: {
        type: Boolean,
        default: false
    }
})

const {proxy} = getCurrentInstance()
const {question_type} = proxy.useDict('question_type')
const {paper_type} = proxy.useDict('paper_type')
const {bool_values} = proxy.useDict('bool_values')
const {exam_type} = proxy.useDict('exam_type')
const questionsList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const typeForm = ref({
    ids: [],
    type: ''
})
const showTypeDialog = ref(false)
const showOptionsDialog = ref(false)
const currentRow = ref({})
const isTextMode = ref(false) // 是否为文本模式（false为富文本模式）

// 知识点管理相关
const showKnowledgeTreesDialog = ref(false)
const knowledgeTreesLoading = ref(false)
const currentKnowledgeTreesList = ref([])
const currentQuestionId = ref(null)
const showKnowledgeQuestionDialog = ref(false)
const knowledgeQuestionTitle = ref("")
const knowledgeQuestionForm = ref({
    id: null,
    knowledgeId: null,
    questionId: null,
    seq: null
})
const knowledgeQuestionRules = {
    knowledgeId: [
        { required: true, message: "知识点不能为空", trigger: "change" }
    ],
    questionId: [
        { required: true, message: "题ID不能为空", trigger: "blur" }
    ],
    seq: [
        { required: true, message: "顺序不能为空", trigger: "blur" }
    ]
}

const subjectList = ref([])
const knowledgeTreeList = ref([])

/** 根据subjectId过滤知识点树 */
const filteredKnowledgeTreeList = computed(() => {
    if (!queryParams.value.subjectId) {
        return knowledgeTreeList.value
    }
    return filterKnowledgeTreeBySubjectId(knowledgeTreeList.value, queryParams.value.subjectId)
})

/** 按科目分组的知识点树（用于知识点关系编辑弹窗），保持完整的树级结构，类似filteredKnowledgeTreeList */
const groupedKnowledgeTreeList = computed(() => {
    if (!knowledgeTreeList.value || knowledgeTreeList.value.length === 0) {
        return []
    }
    
    // 创建一个Map来存储按科目分组的知识点
    const subjectMap = new Map()
    
    // 递归复制节点，保持完整的树级结构
    const cloneNode = (node) => {
        const cloned = {
            ...node,
            children: node.children && node.children.length > 0 
                ? node.children.map(child => cloneNode(child))
                : undefined
        }
        return cloned
    }
    
    // 处理所有根节点，按科目分组
    knowledgeTreeList.value.forEach(rootNode => {
        // 只处理根节点（pid为null或0的节点）
        if (rootNode.pid && rootNode.pid !== 0) {
            return
        }
        
        const subjectId = rootNode.subjectId
        if (!subjectId) {
            return
        }
        
        // 获取科目名称
        const subjectName = getSubjectName(subjectId)
        const subjectKey = `${subjectId}-${subjectName}`
        
        // 如果该科目还不存在，创建一个科目节点
        if (!subjectMap.has(subjectKey)) {
            subjectMap.set(subjectKey, {
                id: `subject-${subjectId}`, // 使用特殊ID避免冲突
                name: `${subjectId}-${subjectName}`,
                subjectId: subjectId,
                children: [],
                disabled: true // 科目节点不可选择
            })
        }
        
        // 将根节点（包含完整的树级结构）添加到对应科目的children中
        const subjectNode = subjectMap.get(subjectKey)
        subjectNode.children.push(cloneNode(rootNode))
    })
    
    // 转换为数组并排序
    return Array.from(subjectMap.values()).sort((a, b) => {
        // 按科目ID排序
        return (a.subjectId || 0) - (b.subjectId || 0)
    })
})

/** 递归过滤知识点树 */
function filterKnowledgeTreeBySubjectId(tree, subjectId) {
    if (!tree || !Array.isArray(tree)) {
        return []
    }
    const result = []
    for (const node of tree) {
        // 如果当前节点的subjectId匹配，或者有子节点匹配，则保留该节点
        const filteredChildren = node.children ? filterKnowledgeTreeBySubjectId(node.children, subjectId) : []
        if (node.subjectId === subjectId || filteredChildren.length > 0) {
            result.push({
                ...node,
                children: filteredChildren.length > 0 ? filteredChildren : (node.children || [])
            })
        }
    }
    return result
}

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        title: null,
        optionA: null,
        optionB: null,
        optionC: null,
        optionD: null,
        optionE: null,
        optionF: null,
        optionG: null,
        answer1: null,
        answer2: null,
        qtpye: null,
        typeId: null,
        subjectId: null,
        paperId: null,
        knowledgeId: null,
        diff: null,
        similarity: null,
        parse: null,
        knowId: null,
        gradeId: null,
        knowledges: null,
        area: null,
        year: null,
        paperTpye: null,
        source: null,
        fromSite: null,
        isSub: null,
        isNormal: null,
        isKonw: null,
        tiid: null,
        md5: null,
        isunique: null,
        md52: null,
        score: null,
        options: null,
        number: null,
        paperTypeTitle: null,
        options0: null,
        title0: null,
        title1: null,
        parse0: null,
        answer0: null,
        isUpdate: null,
        isSubType: null
    },
    rules: {}
})
setTimeout(() => {
    console.log(question_type)
}, 1000)

const {queryParams, form, rules} = toRefs(data)

/** 查询试题列表 */
function getList() {
    loading.value = true
    // 处理查询参数，确保id是数字类型
    const params = { ...queryParams.value }
    if (params.id) {
        // 将id转换为数字类型
        const idNum = Number(params.id)
        if (!isNaN(idNum)) {
            params.id = idNum
        } else {
            params.id = null
        }
    }
    listQuestions(params).then(response => {
        questionsList.value = response.rows
        total.value = response.total
        loading.value = false
    })
}

function getKnowledgeTreeList() {
    listKnowledgeTree({}).then(res => {
        knowledgeTreeList.value = res.data
    })
}

function getSubjectList() {
    listAllSubject({}).then(res => {
        subjectList.value = res.data
    })
}

/** 根据学科ID获取学科名称 */
function getSubjectName(subjectId) {
    if (!subjectId || !subjectList.value || subjectList.value.length === 0) {
        return '-'
    }
    const subject = subjectList.value.find(s => s.subjectId === subjectId)
    return subject ? subject.subjectName : '-'
}

/** 从knowledgeTrees中获取所有subjectId并格式化显示 */
function getSubjectIdsFromKnowledgeTrees(knowledgeTrees) {
    if (!knowledgeTrees || knowledgeTrees.length === 0) {
        return '-'
    }
    
    // 获取所有不同的subjectId
    const subjectIds = [...new Set(knowledgeTrees
        .map(kt => kt.subjectId)
        .filter(id => id != null && id !== undefined)
    )]
    
    if (subjectIds.length === 0) {
        return '-'
    }
    
    // 格式化显示：subjectId-科目名称
    const subjectDisplays = subjectIds.map(subjectId => {
        return `${subjectId}-${getSubjectName(subjectId)}`
    })
    
    return subjectDisplays.join(', ')
}

/** 获取科目显示标签（包含subjectName、locations、examTypes） */
function getSubjectDisplayLabel(subject) {
    if (!subject) return ''
    
    const parts = []
    
    // 添加科目名称
    if (subject.subjectName) {
        parts.push(subject.subjectName)
    }
    if (subject.subjectId) {
        parts.push(subject.subjectId)
    }
    
    // 添加适合省份
    if (subject.locations) {
        parts.push(subject.locations)
    }
    
    // 添加适合类别（通过字典转换，支持多个值用逗号分隔）
    if (subject.examTypes) {
        const examTypeValues = subject.examTypes.split(',').map(v => v.trim()).filter(v => v)
        const examTypeLabels = examTypeValues.map(value => {
            const dictItem = exam_type.value?.find(item => item.value === value)
            return dictItem ? dictItem.label : value
        })
        if (examTypeLabels.length > 0) {
            parts.push(examTypeLabels.join(','))
        }
    }
    
    return parts.join('-')
}

// 取消按钮
function cancel() {
    open.value = false
    isTextMode.value = false // 重置模式
    reset()
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        title: null,
        optionA: null,
        optionB: null,
        optionC: null,
        optionD: null,
        optionE: null,
        optionF: null,
        optionG: null,
        answer1: null,
        answer2: null,
        qtpye: null,
        subjectId: null,
        paperId: null,
        knowledgeId: null,
        diff: null,
        similarity: null,
        parse: null,
        knowId: null,
        gradeId: null,
        knowledges: null,
        area: null,
        year: null,
        paperTpye: null,
        source: null,
        fromSite: null,
        isSub: null,
        isNormal: null,
        isKonw: null,
        tiid: null,
        md5: null,
        isunique: null,
        md52: null,
        createTime: null,
        score: null,
        options: null,
        number: null,
        paperTypeTitle: null,
        options0: null,
        title0: null,
        title1: null,
        parse0: null,
        answer0: null,
        isUpdate: null,
        isSubType: null
    }
    // 先重置表单验证状态
    if (proxy.$refs["questionsRef"]) {
        proxy.$refs["questionsRef"].resetFields()
        proxy.$refs["questionsRef"].clearValidate()
    }
}

/** 科目变化处理 */
function handleSubjectChange() {
    // 清空知识点选择，因为科目变化后知识点列表会变化
    queryParams.value.knowledgeId = null
    handleQuery()
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef")
    // 手动清除 typeId，因为 resetForm 可能无法清除 el-select 的值
    queryParams.value.typeId = null
    handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
    single.value = selection.length != 1
    multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
    reset()
    isTextMode.value = false // 新增使用富文本模式
    open.value = true
    title.value = "添加试题"
}

/** 文本修改按钮操作 */
function handleTextUpdate(row) {
    reset()
    isTextMode.value = true // 文本修改使用普通文本模式
    const _id = row.id || ids.value
    getQuestions(_id).then(response => {
        form.value = response.data
        open.value = true
        // 在标题中显示题目id
        const questionId = form.value.id || _id
        title.value = questionId ? `文本修改 - 题目ID：${questionId}` : "文本修改"
    })
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset()
    isTextMode.value = false // 修改使用富文本模式
    const _id = row.id || ids.value
    getQuestions(_id).then(response => {
        form.value = response.data
        open.value = true
        // 在标题中显示题目id
        const questionId = form.value.id || _id
        title.value = questionId ? `修改试题 - 题目ID：${questionId}` : "修改试题"
    })
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["questionsRef"].validate(valid => {
        if (valid) {
            // 提交所有可编辑字段（包括题干和选项）
            if (form.value.id != null) {
                updateQuestions(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功")
                    open.value = false
                    isTextMode.value = false // 重置模式
                    getList()
                })
            } else {
                addQuestions(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功")
                    open.value = false
                    isTextMode.value = false // 重置模式
                    getList()
                })
            }
        }
    })
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value
    proxy.$modal.confirm('是否确认删除试题编号为"' + _ids + '"的数据项？').then(function () {
        return delQuestions(_ids)
    }).then(() => {
        getList()
        proxy.$modal.msgSuccess("删除成功")
    }).catch(() => {
    })
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('learn/questions/export', {
        ...queryParams.value
    }, `questions_${new Date().getTime()}.xlsx`)
}

function handleChangeType() {
    typeForm.value.ids = ids.value
    typeForm.value.type = ''
    showTypeDialog.value = true
}
async function handleUpdateType() {
    const {ids, type} = typeForm.value
    if (!ids.length) return ElMessage.error('请选择试题')
    if (!type) return ElMessage.error('请选择题型')
    await changeQuestionType({ids, type})
    ElMessage.success('保存成功')
    showTypeDialog.value = false
    getList()
}

/** 显示选项详情 */
function handleShowOptions(row) {
    currentRow.value = row || {}
    showOptionsDialog.value = true
}

/** 显示知识点列表 */
function handleShowKnowledgeTrees(row) {
    currentQuestionId.value = row.id
    knowledgeTreesLoading.value = true
    // 如果 row.knowledgeTrees 存在且不为空，直接使用；否则通过 questionId 查询知识点关系
    if (row.knowledgeTrees && row.knowledgeTrees.length > 0) {
        currentKnowledgeTreesList.value = row.knowledgeTrees.map(kt => ({
            id: kt.id,
            name: kt.name,
            pid: kt.pid,
            subjectId: kt.subjectId,
            questionId: kt.questionId,
            knowledgeQuestionId: kt.knowledgeQuestionId,
            subjectName: getSubjectName(kt.subjectId)
        }))
        knowledgeTreesLoading.value = false
        showKnowledgeTreesDialog.value = true
    } else {
        // 通过 questionId 查询知识点关系
        listKnowledgeQuestion({ questionId: row.id }).then(response => {
            if (response.rows && response.rows.length > 0) {
                // 获取所有知识点ID
                const knowledgeIds = response.rows.map(r => r.knowledgeId)
                // 从 knowledgeTreeList 中查找对应的知识点
                const knowledgeMap = new Map()
                const findKnowledgeInTree = (tree) => {
                    if (Array.isArray(tree)) {
                        tree.forEach(node => {
                            if (knowledgeIds.includes(node.id)) {
                                knowledgeMap.set(node.id, node)
                            }
                            if (node.children) {
                                findKnowledgeInTree(node.children)
                            }
                        })
                    }
                }
                findKnowledgeInTree(knowledgeTreeList.value)
                // 构建列表，保持顺序
                currentKnowledgeTreesList.value = response.rows.map(r => {
                    const kt = knowledgeMap.get(r.knowledgeId)
                    return kt ? {
                        id: kt.id,
                        name: kt.name,
                        pid: kt.pid,
                        subjectId: kt.subjectId,
                        questionId: kt.questionId,
                        knowledgeQuestionId: r.id,
                        subjectName: getSubjectName(kt.subjectId)
                    } : null
                }).filter(item => item !== null)
            } else {
                currentKnowledgeTreesList.value = []
            }
            knowledgeTreesLoading.value = false
            showKnowledgeTreesDialog.value = true
        }).catch(() => {
            knowledgeTreesLoading.value = false
            currentKnowledgeTreesList.value = []
            showKnowledgeTreesDialog.value = true
        })
    }
}

/** 新增知识点关系 */
function handleAddKnowledgeQuestion() {
    resetKnowledgeQuestionForm()
    knowledgeQuestionForm.value.questionId = currentQuestionId.value
    knowledgeQuestionTitle.value = "添加知识点关系"
    showKnowledgeQuestionDialog.value = true
}

/** 修改知识点关系 */
function handleUpdateKnowledgeQuestion(row) {
    // 根据知识点ID和题目ID查找关系
    const loadingInstance = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
    })
    listKnowledgeQuestion({
        questionId: currentQuestionId.value,
        knowledgeId: row.id
    }).then(response => {
        loadingInstance.close()
        if (response.rows && response.rows.length > 0) {
            const relation = response.rows[0]
            knowledgeQuestionForm.value = {
                id: relation.id,
                knowledgeId: relation.knowledgeId,
                questionId: relation.questionId,
                seq: relation.seq
            }
            knowledgeQuestionTitle.value = "修改知识点关系"
            showKnowledgeQuestionDialog.value = true
                } else {
            ElMessage.warning("未找到对应的知识点关系")
        }
    }).catch(() => {
        loadingInstance.close()
    })
}

/** 重置知识点关系表单 */
function resetKnowledgeQuestionForm() {
    knowledgeQuestionForm.value = {
        id: null,
        knowledgeId: null,
        questionId: null,
        seq: null
    }
    if (proxy.$refs["knowledgeQuestionRef"]) {
        proxy.$refs["knowledgeQuestionRef"].resetFields()
        proxy.$refs["knowledgeQuestionRef"].clearValidate()
    }
}

/** 取消知识点关系编辑 */
function cancelKnowledgeQuestion() {
    showKnowledgeQuestionDialog.value = false
    resetKnowledgeQuestionForm()
}

/** 刷新知识点列表 */
function refreshKnowledgeTreesList() {
    if (!currentQuestionId.value) return
    knowledgeTreesLoading.value = true
    listKnowledgeQuestion({ questionId: currentQuestionId.value }).then(response => {
        if (response.rows && response.rows.length > 0) {
            // 获取所有知识点ID
            const knowledgeIds = response.rows.map(r => r.knowledgeId)
            // 从 knowledgeTreeList 中查找对应的知识点
            const knowledgeMap = new Map()
            const findKnowledgeInTree = (tree) => {
                if (Array.isArray(tree)) {
                    tree.forEach(node => {
                        if (knowledgeIds.includes(node.id)) {
                            knowledgeMap.set(node.id, node)
                        }
                        if (node.children) {
                            findKnowledgeInTree(node.children)
                        }
                    })
                }
            }
            findKnowledgeInTree(knowledgeTreeList.value)
            // 构建列表，保持顺序
            currentKnowledgeTreesList.value = response.rows.map(r => {
                const kt = knowledgeMap.get(r.knowledgeId)
                return kt ? {
                    id: kt.id,
                    name: kt.name,
                    pid: kt.pid,
                    subjectId: kt.subjectId,
                    questionId: kt.questionId,
                    knowledgeQuestionId: r.id,
                    subjectName: getSubjectName(kt.subjectId)
                } : null
            }).filter(item => item !== null)
        } else {
            currentKnowledgeTreesList.value = []
        }
        knowledgeTreesLoading.value = false
    }).catch(() => {
        knowledgeTreesLoading.value = false
        currentKnowledgeTreesList.value = []
    })
}

/** 提交知识点关系表单 */
function submitKnowledgeQuestionForm() {
    proxy.$refs["knowledgeQuestionRef"].validate(valid => {
        if (valid) {
            if (knowledgeQuestionForm.value.id != null) {
                updateKnowledgeQuestion(knowledgeQuestionForm.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功")
                    showKnowledgeQuestionDialog.value = false
                    // 刷新知识点列表（直接刷新，不重新打开弹窗）
                    refreshKnowledgeTreesList()
                    // 刷新题目列表
                    getList()
                })
            } else {
                addKnowledgeQuestion(knowledgeQuestionForm.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功")
                    showKnowledgeQuestionDialog.value = false
                    // 刷新知识点列表（直接刷新，不重新打开弹窗）
                    refreshKnowledgeTreesList()
                    // 刷新题目列表
                    getList()
                })
            }
        }
    })
}

// 监听 paperId 变化，自动设置查询参数并查询
watch(() => props.paperId, (newPaperId) => {
    if (newPaperId) {
        queryParams.value.paperId = newPaperId
        queryParams.value.pageNum = 1
        getList()
    }
}, { immediate: true })

getKnowledgeTreeList()
getSubjectList()
// 如果传入了 paperId，则设置查询参数
if (props.paperId) {
    queryParams.value.paperId = props.paperId
}
getList()
</script>

<style scoped>
.options-detail {
    padding: 10px 0;
}

.option-item {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}

.option-label {
    font-weight: bold;
    min-width: 60px;
    color: #606266;
}

.option-content {
    flex: 1;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.6;
}

.no-options {
    text-align: center;
    color: #909399;
    padding: 20px 0;
}

.readonly-section {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.readonly-content {
    color: #606266;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.6;
    min-height: 20px;
}

.readonly-content :deep(img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 4px;
    object-fit: contain;
}

.readonly-content :deep(img[src=""]) {
    display: none;
}

.readonly-content :deep(img:not([src])) {
    display: none;
}

.form-content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* 表格单元格内容样式 */
.table-cell-content {
    word-break: break-word;
    line-height: 1.6;
}

.table-cell-content :deep(img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px 0;
    border-radius: 4px;
    object-fit: contain;
}

.table-cell-content :deep(img[src=""]) {
    display: none;
}

.table-cell-content :deep(img:not([src])) {
    display: none;
}

.knowledge-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 知识点管理弹窗样式 */
.knowledge-trees-dialog :deep(.el-dialog) {
    height: 75vh;
    display: flex;
    flex-direction: column;
}

.knowledge-trees-dialog :deep(.el-dialog__body) {
    overflow-x: hidden;
    flex: 1;
    overflow-y: auto;
}
</style>
