<template>
    <div id="xxxlgl">
        <el-tabs type="border-card">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 理论学习</span>
                <div class="search">
                    <el-select v-model="valueSelectFile_type">
                        <el-option label="置顶" value="1"></el-option>
                        <el-option label="上传时间" value="2"></el-option>
                    </el-select>
                    <el-select v-model="valueSelect" placeholder="请选择" clearable>
                        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-option-group>
                    </el-select>
                    <el-input v-model="input"></el-input>
                    <div class="button-transform" @click="transferModel()" v-show="multipleSelection.length > 0">转移模块</div>
                    <div class="button-delete" @click="deleteAll()" v-show="multipleSelection.length > 0">批量删除</div>
                    <div class="button-upload" @click="dialogVisibleModule = true">修改模块名称</div>
                    <div class="button-upload" @click="uploadData()">批量上传</div>
                    <div class="button-search" @click="search()">站内搜索</div>
                </div>
                <div class="searchResult">
                    <el-table ref="multipleTable" :data="literatureList" tooltip-effect="dark" style="width: 100%;"
                        height="calc(100% - 60px)" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="类别" align="center">
                            <template slot-scope="scope">
                                <el-tag
                                    :style="{ backgroundColor: returnColor(scope.row.folder), borderColor: returnColor(scope.row.folder) }"
                                    effect="dark">{{ returnName(scope.row.folder) }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="文件名" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span><span style="font-size:12px;color:red;">{{ scope.row.stick != null ? '[置顶]' : ''
                                }}</span>{{ scope.row.originName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="日期" align="center">
                        </el-table-column>
                        <el-table-column prop="image" label="是否有图片" show-overflow-tooltip align="center"
                            :formatter="fileData">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="500">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewLiterature(scope.row)">预览</el-button>
                                <!-- <el-button size="mini" type="success" @click="downFile(scope.row)">下载</el-button> -->
                                <el-button size="mini" type="success" @click="upLoadImg(scope.row)">上传图片</el-button>
                                <el-button size="mini" type="danger" @click="deleteLiterature(scope.row)">删除</el-button>
                                <el-button size="mini" type="danger" @click="deleteLiteratureImg(scope.row)"
                                    :disabled="scope.row.image == null || scope.row.image == '' ? true : false">删除图片</el-button>
                                <el-button size="mini" type="success" @click="top(scope.row)">{{ scope.row.stick == null ?
                                    '置顶' : '取消置顶' }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination-div">
                        <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage" :total="total" @current-change="handleCurrentChange"
                            @size-change="handleSizeChange" :page-size="everySize" :page-sizes="[10, 20, 50, 100]">
                        </el-pagination>
                    </div>
                </div>

                <!-- 批量上传文件 -->
                <el-dialog title="批量上传文件" :visible.sync="dialogVisible" width="25%" :before-close="handleClose" center>
                    <el-form ref="form" label-width="120px">
                        <el-form-item label="文件板块">
                            <el-select v-model="value" placeholder="请选择" clearable>
                                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                                    <el-option v-for="item in group.options" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选取文件">
                            <el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove"
                                :file-list="fileList" :auto-upload="false" multiple
                                accept=".docx,.doc,.pdf,.DOCX,.DOC,.PDF,.PPT,.ppt,.pptx,.PPTX,.mlf,.MLF,.xls,.xlsx,.XLS,.XLSX">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="上传图片" v-if="fileList.length == 1">
                            <el-upload class="upload-demo" accept=".jpg,.jpeg,.png,.JPG,.JPEG,PNG" action=""
                                :on-change="handleChangeImgSingle" :file-list="imgList" :auto-upload="false" :limit="1"
                                :on-exceed="handleExceed">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能选择一张图片！</div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="mini" type="primary" @click="defineUpload">确 定</el-button>
                    </span>
                </el-dialog>

                <!-- 修改文献所在板块 -->
                <el-dialog title="修改文献所在板块" :visible.sync="dialogVisibleFolder" width="35%" :before-close="handleClose"
                    center>
                    <el-form ref="form" label-width="120px">
                        <el-form-item label="转移到:">
                            <el-radio-group v-model="radio">
                                <el-radio v-for="(item, index) in transferRadios" :label="item.id" border :key="index">{{
                                    item.name }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item align="center">
                            <el-button size="mini" @click="dialogVisibleFolder = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="defineUploadFolder">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <!-- 给法律法规增加图片 -->
                <el-dialog title="新增图片" :visible.sync="dialogVisibleImg" width="25%" :before-close="handleClose" center>
                    <el-form ref="form" label-width="120px">
                        <el-form-item label="上传图片">
                            <el-upload class="upload-demo" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" action=""
                                :on-change="handleChangeImg" :file-list="fileListImg" :auto-upload="false" :limit="1"
                                :on-exceed="handleExceed">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能选择一张图片</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" @click="dialogVisibleImg = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="defineUploadImg">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                <!-- 修改模块名称 -->
                <el-dialog class="changeModuleName" title="修改模块名称" :visible.sync="dialogVisibleModule" width="40%"
                    :before-close="handleClose" center>
                    <el-form ref="form">
                        <el-form-item v-for="(item, index) in moduleName" :key="index">
                            <h3>{{ item.label }}</h3>
                            <el-input v-for="(item1, index1) in item.options" v-model="item1.name" :key="index1"></el-input>
                        </el-form-item>
                        <el-form-item align="center">
                            <el-button size="mini" @click="dialogVisibleModule = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="defineUpdateModuleName">确 定</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 想定作业</span>
                <div id="xdzygl">
                    <div class="left-xdzy">
                        <el-input class="public-input" placeholder="输入关键字进行过滤" suffix-icon="el-icon-search"
                            v-model="filterText"></el-input>
                        <el-tree :data="tree_data" node-key="id" :expand-on-click-node="false"
                            :default-expanded-keys="[0, 1]" :filter-node-method="filterNode" highlight-current
                            :props="defaultProps" ref="tree" @node-click="handleNodeClick" :indent=1>
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span class="first-span" :title="node.label">{{ node.label }}</span>
                                <span class="addOrMove">
                                    <el-button class="add" type="text" size="mini" @click="appendTree(data)">
                                        <i class="el-icon-circle-plus"></i>
                                    </el-button>
                                    <el-button class="edit" type="text" size="mini" @click="editTree(data)">
                                        <i class="el-icon-edit"></i>
                                    </el-button>
                                    <el-button class="delete" type="text" size="mini" @click="removeTree(data)">
                                        <i class="el-icon-error"></i>
                                    </el-button>
                                </span>
                            </span>
                        </el-tree>
                    </div>
                    <div class="right-xdzy">
                        <div class="search-xdzy">
                            <div class="button-delete" @click="deleteQuestion()">删除</div>
                            <div class="button-add" @click="addNewQuestion()">新增题目</div>
                            <div class="button-search" @click="searchXdzy()">搜索</div>
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="scTime" type="daterange"
                                range-separator="至" start-placeholder="上传起始时间" end-placeholder="上传结束时间"
                                :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                            <el-input v-model="wd_name" suffix-icon="el-icon-search" placeholder="请输入关键字"></el-input>
                        </div>
                        <div class="searchResult-xdzy">
                            <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChangeXdzy"
                                style="width: 100%;" height="calc(100% - 60px)">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column type="index" label="序号" width="80">
                                </el-table-column>
                                <el-table-column prop="name" label="题目名称">
                                </el-table-column>
                                <el-table-column prop="content" label="题目内容">
                                    <template slot-scope="scope">
                                        <span class="span-div" @click="xq_div(scope.row)">{{ scope.row.content }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="创建时间">
                                </el-table-column>
                                <el-table-column prop="cz" label="操作" width="300">
                                    <template slot-scope="scope">
                                        <el-button type="primary" size="mini" @click="dt_div(scope.row)">答题</el-button>
                                        <el-button type="success" size="mini"
                                            @click="editQuestionEvent(scope.row)">编辑</el-button>
                                        <el-button type="primary" size="mini"
                                            @click="history_div(scope.row)">历史记录</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pagination-div">
                                <el-pagination class="myPagination" background
                                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChangeXdzy"
                                    :page-size="pageSizeXdzy" :current-page="current_pageXdzy" :total="totalXdzy"
                                    @current-change="handleCurrentChangeXdzy" :page-sizes="[10, 20, 50, 100]">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                    <el-dialog title="新增树结构" :visible.sync="dialogVisibleTree" :before-close="handleClose">
                        <el-form label-width="80px" ref="dynamicValidateForm" :model="pickTreeNode">
                            <el-form-item label="名称：" prop="label" :rules="[
                                { required: true, message: '请输入名称', trigger: 'blur' }
                            ]">
                                <el-input v-model="pickTreeNode.label" placeholder="请输入新增的节点名称"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisibleTree = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="addTreeNode">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog title="编辑树结构" :visible.sync="dialogVisibleTreeEdit" :before-close="handleClose">
                        <el-form label-width="80px" ref="dynamicValidateForm1" :model="pickTreeNodeEdit">
                            <el-form-item label="名称：" prop="label" :rules="[
                                { required: true, message: '请输入名称', trigger: 'blur' }
                            ]">
                                <el-input v-model="pickTreeNodeEdit.label" placeholder="请编辑模块名称"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisibleTreeEdit = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="defineditTree">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog title="题目内容详情" :visible.sync="centerDialogVisible_xq" width="40%" center>
                        <el-input v-model="tm_nr" type="textarea" :rows="10" show-word-limit disabled></el-input>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible_xq = false">关 闭</el-button>
                        </span>
                    </el-dialog>
                    <el-dialog title="答题简述" :visible.sync="centerDialogVisible_dt" width="40%" center>
                        <el-form ref="form" label-width="80px">
                            <el-form-item label="题目名称">
                                <el-input v-model="questionName" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="题目内容">
                                <el-input v-model="tm_nr" type="textarea" :rows="10" show-word-limit disabled></el-input>
                            </el-form-item>
                            <el-form-item label="情况分析">
                                <el-select v-model="value_qkfx.label" placeholder="请选择" multiple
                                    @change="selectChangeQkfxAnswer" style="width:100%;">
                                    <el-option :value="qkfxTmp" style="height: auto">
                                        <el-tree :data="options_qkfx" show-checkbox node-key="id" ref="treeQkfxAnswer"
                                            highlight-current :props="defaultProps"
                                            @check-change="handleCheckChangeQkfxAnswer">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="处置措施">
                                <el-select v-model="value_czcs.label" placeholder="请选择" multiple
                                    @change="selectChangeCzcsAnswer" style="width:100%;">
                                    <el-option :value="czcsTmp" style="height: auto">
                                        <el-tree :data="options_czcs" show-checkbox node-key="id" ref="treeCzcsAnswer"
                                            highlight-current :props="defaultProps"
                                            @check-change="handleCheckChangeCzcsAnswer">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="handleAnswer()">生 成</el-button>
                            <el-button type="primary" @click="exportDoc()">导 出</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog title="历史答题记录" :visible.sync="dialogVisible_lsjl" width="60%" id="_plscs">
                        <!-- <el-input placeholder="请输入内容" style="width:200px;margin-right:20px"></el-input>
                        <el-button type="primary">查询</el-button> -->
                        <el-table style="width: 100%" class="table-div" :data="tableData_history">
                            <el-table-column type="index" label="序号" width="80"></el-table-column>
                            <el-table-column prop="qkfx" label="情况分析"></el-table-column>
                            <el-table-column prop="czcs" label="处置措施"></el-table-column>
                            <el-table-column prop="create" label="答题者" width="250"></el-table-column>
                            <el-table-column prop="time" label="答题时间" width="250"></el-table-column>
                            <el-table-column prop="qkfxScore" label="情况分析得分"></el-table-column>
                            <el-table-column prop="czcsScore" label="处置措施得分"></el-table-column>
                        </el-table>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisible_lsjl = false">关闭</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog title="新增题目" :visible.sync="dialogVisibleNewQuestion" width="50%" id="_plscs">
                        <el-form label-width="80px" :model="newQuestion" ref="numberValidateForm2">
                            <el-form-item label="作业树" prop="mineStatus" :rules="[
                                { required: true, message: '请选择节点', trigger: 'change' }
                            ]">
                                <el-select v-model="newQuestion.mineStatus" placeholder="请选择" style="width:100%;">
                                    <el-option style="height: auto" value="1">
                                        <el-tree :data="tree_data" default-expand-all node-key="id" ref="tree"
                                            highlight-current :props="defaultProps"
                                            @node-click="handleNodeClickQuestion"></el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="题目名称" prop="name" :rules="[
                                { required: true, message: '请输入题目名称', trigger: 'blur' }
                            ]">
                                <el-input v-model="newQuestion.name"></el-input>
                            </el-form-item>
                            <el-form-item label="题目内容" prop="content" :rules="[
                                { required: true, message: '请输入题目内容', trigger: 'blur' }
                            ]">
                                <el-input v-model="newQuestion.content" type="textarea" :rows="5"
                                    show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="情况分析" prop="analysis" :rules="[
                                { type: 'array', required: true, message: '请至少选择一个情况分析', trigger: 'change' }
                            ]">
                                <el-select v-model="newQuestion.analysis" placeholder="请选择" multiple
                                    @change="selectChangeQkfx" style="width:95%;">
                                    <el-option :value="newQkfxValue" style="height: auto">
                                        <el-tree :data="options_qkfx" show-checkbox node-key="id" ref="treeQkfx"
                                            highlight-current :props="defaultProps" @check-change="handleCheckChangeQkfx">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                                <i class="el-icon-circle-plus-outline" @click="innerVisible = true"></i>
                            </el-form-item>
                            <el-form-item label="处置措施" prop="measure" :rules="[
                                { type: 'array', required: true, message: '请至少选择一个处置措施', trigger: 'change' }
                            ]">
                                <el-select v-model="newQuestion.measure" placeholder="请选择" multiple
                                    @change="selectChangeCzcs" style="width:95%;">
                                    <el-option :value="newCzcsValue" style="height: auto">
                                        <el-tree :data="options_czcs" show-checkbox node-key="id" ref="treeCzcs"
                                            highlight-current :props="defaultProps" @check-change="handleCheckChangeCzcs">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                                <i class="el-icon-circle-plus-outline" @click="innerVisible = true"></i>
                            </el-form-item>
                        </el-form>
                        <el-dialog width="50%" :visible.sync="innerVisible" append-to-body>
                            <template>
                                <el-tabs class="addAnswer" type="border-card" v-model="activeName" @tab-click="handleClick"
                                    style="height:500px;">
                                    <el-tab-pane label="情况分析" name="qkfx">
                                        <div class="left-qkfx">
                                            <el-tree :data="options_qkfx_all" default-expand-all node-key="id"
                                                ref="addTreeQkfx" highlight-current :props="defaultProps">
                                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                                    <span class="first-span" :title="node.label">{{ node.label }}</span>
                                                    <span class="addOrMove" v-if="node.id != 0">
                                                        <el-button class="add" type="text" size="mini"
                                                            @click="addQkfx(data)">
                                                            <i class="el-icon-circle-plus"></i>
                                                        </el-button>
                                                        <el-button class="edit" type="text" size="mini"
                                                            @click="editQkfx(data)">
                                                            <i class="el-icon-edit"></i>
                                                        </el-button>
                                                        <el-button class="delete" type="text" size="mini"
                                                            @click="removeQkfx(data)">
                                                            <i class="el-icon-error"></i>
                                                        </el-button>
                                                    </span>
                                                </span>
                                            </el-tree>
                                        </div>
                                        <div class="right-qkfx">
                                            <el-form label-width="80px" v-if="qkfxFlag == 1" :model="newQkfxObjNode"
                                                ref="dynamicValidateForm3">
                                                <el-form-item label="名称：" prop="label" :rules="[
                                                    { required: true, message: '请输入名称', trigger: 'blur' },
                                                ]">
                                                    <el-input v-model="newQkfxObjNode.label" placeholder="请输入新增的节点名称"
                                                        style="width:80%;"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="defineAddQkfx">确定</el-button>
                                                </el-form-item>
                                            </el-form>
                                            <el-form label-width="80px" v-if="qkfxFlag == 2" :model="editQkfxObjNode"
                                                ref="dynamicValidateForm4">
                                                <el-form-item label="名称：" prop="label" :rules="[
                                                    { required: true, message: '请输入名称', trigger: 'blur' },
                                                ]">
                                                    <el-input v-model="editQkfxObjNode.label" style="width:80%;"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="defineEditQkfx">确定</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="处置措施" name="czcs">
                                        <div class="left-czcs">
                                            <el-tree :data="options_czcs_all" default-expand-all node-key="id"
                                                ref="addTreeCzjc" highlight-current :props="defaultProps">
                                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                                    <span class="first-span" :title="node.label">{{ node.label }}</span>
                                                    <span class="addOrMove" v-if="node.id != 0">
                                                        <el-button class="add" type="text" size="mini"
                                                            @click="addCzcs(data)">
                                                            <i class="el-icon-circle-plus"></i>
                                                        </el-button>
                                                        <el-button class="edit" type="text" size="mini"
                                                            @click="editCzcs(data)">
                                                            <i class="el-icon-edit"></i>
                                                        </el-button>
                                                        <el-button class="delete" type="text" size="mini"
                                                            @click="removeCzcs(data)">
                                                            <i class="el-icon-error"></i>
                                                        </el-button>
                                                    </span>
                                                </span>
                                            </el-tree>
                                        </div>
                                        <div class="right-czcs">
                                            <el-form label-width="80px" v-if="czcsFlag == 1" :model="newCzcsObjNode"
                                                ref="dynamicValidateForm5">
                                                <el-form-item label="名称：" prop="label" :rules="[
                                                    { required: true, message: '请输入名称', trigger: 'blur' },
                                                ]">
                                                    <el-input v-model="newCzcsObjNode.label"
                                                        placeholder="请输入新增的节点名称"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="defineAddCzcs">确定</el-button>
                                                </el-form-item>
                                            </el-form>
                                            <el-form label-width="80px" v-if="czcsFlag == 2" :model="editCzcsObjNode"
                                                ref="dynamicValidateForm6">
                                                <el-form-item label="名称：" prop="label" :rules="[
                                                    { required: true, message: '请输入名称', trigger: 'blur' },
                                                ]">
                                                    <el-input v-model="editCzcsObjNode.label"
                                                        placeholder="请输入新增的节点名称"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="defineEditCzcs">确定</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-dialog>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisibleNewQuestion = false">关闭</el-button>
                            <el-button size="mini" type="success" @click="defineAddNewQuestion">新增</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog title="编辑题目" :visible.sync="dialogVisibleEditQuestion" width="50%" id="_plscs">
                        <el-form label-width="80px" :model="editQuestion" ref="numberValidateForm21">
                            <el-form-item label="题目名称" prop="name" :rules="[
                                { required: true, message: '请输入题目名称', trigger: 'blur' }
                            ]">
                                <el-input v-model="editQuestion.name"></el-input>
                            </el-form-item>
                            <el-form-item label="题目内容" prop="content" :rules="[
                                { required: true, message: '请输入题目内容', trigger: 'blur' }
                            ]">
                                <el-input v-model="editQuestion.content" type="textarea" :rows="5"
                                    show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="情况分析" prop="analysis" :rules="[
                                { type: 'array', required: true, message: '请至少选择一个情况分析', trigger: 'change' }
                            ]">
                                <el-select v-model="editQuestion.analysis" placeholder="请选择" multiple
                                    @change="selectChangeQkfxEdit" style="width:100%;">
                                    <el-option :value="editQkfxValue" style="height: auto">
                                        <el-tree :data="options_qkfx" :default-checked-keys="checkedQkfx" show-checkbox
                                            node-key="id" ref="treeQkfxEdit" highlight-current :props="defaultProps"
                                            @check-change="handleCheckChangeQkfxEdit">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="处置措施" prop="measure" :rules="[
                                { type: 'array', required: true, message: '请至少选择一个处置措施', trigger: 'change' }
                            ]">
                                <el-select v-model="editQuestion.measure" placeholder="请选择" multiple
                                    @change="selectChangeCzcsEdit" style="width:100%;">
                                    <el-option :value="editCzcsValue" style="height: auto">
                                        <el-tree :data="options_czcs" :default-checked-keys="checkedCzcs" show-checkbox
                                            node-key="id" ref="treeCzcsEdit" highlight-current :props="defaultProps"
                                            @check-change="handleCheckChangeCzcsEdit">
                                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                                <span :title="node.label">{{ node.label }}</span>
                                            </span>
                                        </el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisibleEditQuestion = false">关闭</el-button>
                            <el-button size="mini" type="success" @click="defineditQuestion">修改</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 科目代码列表</span>
                <div style="width:100%;height:100%;">
                    <component :is="currentRole_tk_data" :clientDetails="clientDetails_tk_data" ref="mychild_tk_data" />
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 题库列表</span>
                <div style="width:100%;height:100%;">
                    <component :is="currentRole_tm_data" :clientDetails="clientDetails_tm_data" ref="mychild_tm_data" />
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-reading"></i> 试卷列表</span>
                <div style="width:100%;height:100%;">
                    <component :is="currentRole_sj_data" :clientDetails="clientDetails_sj_data" ref="mychild_sj_data" />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { get, post, fileUpload, startLoading, endLoading, download, delete_util } from '../../util/http_util';
import {
    queryQuestionTree, queryQuestion,
    answerQuestion,
    queryQuestionOptions,
    queryAnswerQuestionRecord,
    addNewQuestion,
    UpdateQuestion,
    addQuestionTreeNode,
    updateQuestionTreeNode,
    removeQuestionTreeNode,
    removeQuestion,
    queryQuestionOptionsTree,
    addQuestionOptionsTreeNode,
    removeQuestionOptionsTreeNode,
    updateQuestionOptionsTreeNode
} from "../../api/resource"
import navs_tk from "../xxxl/tklb.vue";
import navs_tm from "../xxxl/tmlb.vue";
import navs_sj from "./sjlb.vue";
import export_doc_util from '../../util/export_doc_util';
import { uuid } from "../../util/data_util";
import {
    queryLiterature, uploadLiterature, removeLiterature, addPictureToLiterature, bulkStickLiterature, removeLiteratureByBatch, bulkChangeLiteratureFolder,
    updateLiteratureFolder, queryLiteratureFolder, previewPdf
} from "../../api/xxxl/llxx"
export default {
    name: 'xxxlgl',
    inject: ['reload'],
    components: { navs_tk, navs_tm, navs_sj },
    data() {
        return {
            //#region ***************************理论学习***************************
            input: '',
            options: [],
            value: '',
            valueSelect: '',
            imgList: [],
            fileList: [],
            fileListImg: [],
            currentPage: 1,
            total: 0,
            dialogVisible: false,
            dialogVisibleFolder: false,
            dialogVisibleImg: false,
            literatureList: [],
            checkedList: [],
            multipleSelection: [],
            radio: '',
            transferRadios: [],
            colorList: ['#409eff', '#F56C6C', '#67C23A', '#E6A23C', '#909399', '#303133'],
            everySize: 10,
            selectFile: {},
            moduleList: [],
            moduleName: [],
            dialogVisibleModule: false,
            //#endregion
            //#region ***************************想定作业***************************
            treeId: undefined,
            dialogVisibleTree: false,
            dialogVisibleTreeEdit: false,
            pickTreeNode: {
                label: ''
            },
            pickTreeNodeEdit: {
                label: ''
            },
            scTime: '',
            wd_name: '',
            tableData: [],
            centerDialogVisible_xq: false,
            centerDialogVisible_dt: false,
            dialogVisible_lsjl: false,
            pageSizeXdzy: 10,
            current_pageXdzy: 1,
            totalXdzy: 0,
            filterText: '',
            tree_data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            currentRole: "navs",
            options_qkfx: [],
            options_czcs: [],
            paramData: {},
            questionName: '',
            value_qkfx: { label: [], id: [] },
            value_czcs: { label: [], id: [] },
            tm_nr: "",
            answeringQuesiton: null,
            tableData_history: [],
            dialogVisibleNewQuestion: false,
            dialogVisibleEditQuestion: false,
            newQuestion: {
                treeId: '',
                name: '',
                content: '',
                analysis: [],
                measure: [],
                mineStatus: ''
            },
            editQuestion: {},
            questionIds: [],
            mineStatus: '',
            newQkfxValue: [],
            editQkfxValue: [],
            newCzcsValue: [],
            editCzcsValue: [],
            innerVisible: false,
            activeName: 'qkfx',
            qkfxFlag: 0,
            czcsFlag: 0,
            newQkfxObjNode: {
                label: ''
            },
            editQkfxObjNode: {
                label: ''
            },
            newCzcsObjNode: {
                label: ''
            },
            editCzcsObjNode: {
                label: ''
            },
            options_qkfx_all: [],
            options_czcs_all: [],
            qkfxTmp: [],
            czcsTmp: [],
            checkedQkfx: [],
            checkedCzcs: [],
            //#endregion
            //#region *****************************题库列表******************************
            currentRole_tk_data: "navs_tk",
            clientDetails_tk_data: {},
            currentRole_tm_data: "navs_tm",
            clientDetails_tm_data: {},
            currentRole_sj_data: "navs_sj",
            clientDetails_sj_data: {},
            //#endregion
            valueSelectFile_type: '1',
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    methods: {
        //#region ***************************理论学习***************************
        search() {
            this.queryLiterature(1, this.everySize, this.input, this.valueSelect);
        },
        uploadData() {
            this.dialogVisible = true;
            this.fileList = [];
            this.imgList = [];
        },
        //查询上传的文件
        queryLiterature(pageNum, pageSize, title, type) {
            let titleUrl = title == '' ? null : title;
            let typeUrl = type == '' ? null : type;;
            let type_stick = this.valueSelectFile_type == "1";
            queryLiterature('学习训练', pageNum, pageSize, titleUrl, typeUrl, type_stick).then(res => {
                this.literatureList = res.list;
                this.total = res.totals;
                this.currentPage = pageNum;
            })
                .catch((err) => {
                    this.$message.warning(err.message);
                });
        },
        defineUpload() {
            if (this.value != "" && this.fileList.length > 0) {
                for (let i = 0; i < this.fileList.length; i++) {
                    let fd = new FormData();
                    fd.append("file", this.fileList[i].raw);
                    fd.append("folder", this.value);
                    fd.append("module", '学习训练');
                    this.imgList.length == 1 && fd.append('image', this.imgList[0].raw);
                    uploadLiterature(fd).then(res => {
                        if (res == 1) {
                            this.$message.success('上传成功！');
                            this.valueSelectFile_type = '2';
                            this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message({
                        //         type: 'info',
                        //         message: err.message
                        //     });
                        // } else {
                        //     this.$message({
                        //         type: 'info',
                        //         message: '上传失败'
                        //     });
                        // }
                    });
                }
                this.dialogVisible = false;
            } else {
                this.$message.warning('未选择上传模块或未选择文件！');
            }
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.queryLiterature(pageNum, this.everySize, this.input, this.valueSelect);
        },
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.queryLiterature(1, val, this.input, this.valueSelect);
        },
        handleClose(done) {
            done();
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-20);
        },
        //以pdf形式预览
        viewLiterature(item) {
            previewPdf('LiteraturePDF', item.name);
        },
        //下载文件
        downFile(item) {
            if (item.path) {
                window.open(item.path);
            } else {
                alert('暂未找到文件！');
            }
        },
        //删除文件
        deleteLiterature(item) {
            this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeLiterature(item.folder, item.name).then(res => {
                    if (res == 1) {
                        this.$message.success('删除成功！');
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        this.$message.error('删除失败！');
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                    // if (err instanceof Object) {
                    //     this.$message({
                    //         type: 'info',
                    //         message: err.message
                    //     });
                    // } else {
                    //     this.$message({
                    //         type: 'info',
                    //         message: '删除失败'
                    //     });
                    // }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //删除文件图片
        deleteLiteratureImg(item) {
            this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                startLoading();
                let fd = new FormData();
                fd.append('name', item.name);
                fd.append('folder', item.folder);
                addPictureToLiterature(fd).then(res => {
                    if (res == 1) {
                        this.$message.success('图片删除成功！');
                        this.dialogVisibleImg = false;
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        this.$message.error('图片删除失败！');
                    }
                    endLoading();
                }).catch(err => {
                    tthis.$message.warning(err.message);
                    endLoading();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //返回中文名
        returnName(type) {
            return this.moduleList.filter(item => item.id == type)[0] && this.moduleList.filter(item => item.id == type)[0].name;
        },
        handleSelectionChange(val) {
            let list = [];
            for (let i = 0; i < val.length; i++) {
                let obj = {};
                obj.bucket = val[i].folder;
                obj.name = val[i].name;
                list.push(obj);
            }
            this.multipleSelection = list;
        },
        //批量删除
        deleteAll() {
            this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeLiteratureByBatch(this.multipleSelection).then(res => {
                    if (res == this.multipleSelection.length) {
                        this.$message.success('删除成功！');
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                    // if (err instanceof Object) {
                    //     this.$message({
                    //         type: 'info',
                    //         message: err.message
                    //     });
                    // } else {
                    //     this.$message({
                    //         type: 'info',
                    //         message: '删除失败'
                    //     });
                    // }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        transferModel() {
            if (this.multipleSelection.length > 0) {
                this.dialogVisibleFolder = true;
            } else {
                this.$message.warning('未选中任何文献！');
            }

        },
        //修改文献所在板块
        defineUploadFolder() {
            if (this.radio != '') {
                let list = [];
                this.multipleSelection.forEach(res => {
                    let obj = {};
                    obj.name = res.name;
                    obj.newFolder = this.radio;
                    obj.oldFolder = res.bucket;
                    list.push(obj);
                })
                bulkChangeLiteratureFolder(list).then(res => {
                    if (res == list.length) {
                        this.$message.success('转移成功！');
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        this.$message.error('转移失败！');
                    }
                    this.dialogVisibleFolder = false;
                }).catch(err => {
                    this.$message.warning(err.message);
                    // if (err instanceof Object) {
                    //     this.$message({
                    //         type: 'info',
                    //         message: err.message
                    //     });
                    // } else {
                    //     this.$message({
                    //         type: 'info',
                    //         message: '修改失败！'
                    //     });
                    // }
                });
            } else {
                this.$message.warning('未选择要转移的板块！');
            }
        },
        //返回颜色
        returnColor(val) {
            if (val == "16" || val == "17" || val == "18") {
                return this.colorList[0];
            } else if (val == "19" || val == "20" || val == "21") {
                return this.colorList[1];
            } else if (val == "22" || val == "23" || val == "24") {
                return this.colorList[2];
            } else {
                return this.colorList[3];
            }
        },
        //批量上传文献时  只选择单个文件时 上传图片
        handleChangeImgSingle(file, imgList) {
            this.imgList = imgList.splice(-1);
        },
        //给文献增加图片
        handleChangeImg(file, fileListImg) {
            this.fileListImg = fileListImg.slice(-1);
        },
        //上传图片
        upLoadImg(item) {
            this.fileListImg = [];
            this.dialogVisibleImg = true;
            this.selectFile = item;
        },
        defineUploadImg() {
            if (this.fileListImg.length > 0) {
                startLoading();
                let fd = new FormData();
                fd.append('name', this.selectFile.name);
                fd.append('folder', this.selectFile.folder);
                fd.append('file', this.fileListImg[0].raw);
                addPictureToLiterature(fd).then(res => {
                    if (res == 1) {
                        this.$message.success('新增图片成功！');
                        this.dialogVisibleImg = false;
                        this.search();
                    } else {
                        this.$message.error('新增图片失败！');
                    }
                    endLoading();
                }).catch(err => {
                    this.$message.warning(err.message);
                    endLoading();
                });
            } else {
                this.$message.warning('未选择图片！');
            }
        },
        fileData(row) {
            if (row.image != null && row.image != '') {
                return '有';
            } else {
                return '无';
            }
        },
        handleExceed(files, fileListImg) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${fileListImg.length} 个文件`);
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        //置顶
        top(row) {
            let obj = {};
            obj.id = row.id;
            obj.stick = row.stick == null ? 1 : 0;
            let message = obj.stick == 1 ? '置顶' : '取消置顶';
            bulkStickLiterature([obj]).then(res => {
                if (res == 1) {
                    this.search();
                    this.$message.success(message + '成功！');
                } else {
                    this.$message.error(message + '失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        //确定修改模块名称
        defineUpdateModuleName() {
            let tmpList = [];
            this.moduleName.forEach(el => {
                el.options.forEach(item => {
                    let obj = {};
                    obj.id = item.id;
                    obj.name = item.name;
                    tmpList.push(obj);
                })
            });;
            updateLiteratureFolder(tmpList).then(res => {
                if (res == tmpList.length) {
                    this.$message.success('模块名称修改成功！');
                    this.dialogVisibleModule = false;
                    this.reload();
                } else {
                    this.$message.error('模块名称修改失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
                console.log(err);
            });
        },
        //#endregion
        //#region ***************************想定作业***************************
        //查询tree数据
        query_tree() {
            queryQuestionTree().then(res => {
                let top = {
                    children: res,
                    code: null,
                    id: 0,
                    level: 0,
                    label: '作业树',
                    parentCode: null,
                };
                this.tree_data = [top];
            }).catch(err => {

            });
        },
        //新增数节点
        appendTree(data) {
            let _this = this;
            _this.pickTreeNode = JSON.parse(JSON.stringify(data));
            _this.pickTreeNode.label = '';
            _this.dialogVisibleTree = true;
            setTimeout(function () {
                _this.$refs.dynamicValidateForm.resetFields();
            }, 200)
        },
        addTreeNode() {
            let param = {};
            param['code'] = uuid(32, 32);
            param['parentCode'] = this.pickTreeNode.code;
            param['label'] = this.pickTreeNode.label;
            this.$refs['dynamicValidateForm'].validate((valid) => {
                if (valid) {
                    addQuestionTreeNode(param).then(res => {
                        if (res == 1) {
                            this.$message.success('新增节点成功！');
                            this.reload();
                            this.dialogVisibleTree = false;
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message.error(err.message);
                        // } else {
                        //     this.$message.error('新增失败');
                        // }
                    });
                }
            });
        },
        //修改数节点
        editTree(data) {
            let _this = this;
            _this.pickTreeNodeEdit = JSON.parse(JSON.stringify(data));
            _this.dialogVisibleTreeEdit = true;
            setTimeout(function () {
                _this.$refs.dynamicValidateForm1.resetFields();
            }, 200)
        },
        defineditTree() {
            let param = JSON.parse(JSON.stringify(this.pickTreeNodeEdit));
            this.$refs['dynamicValidateForm1'].validate((valid) => {
                if (valid) {
                    updateQuestionTreeNode(param).then(res => {
                        if (res == 1) {
                            this.$message.success('节点编辑成功！');
                            this.reload();
                            this.dialogVisibleTreeEdit = false;
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message.error(err.message);
                        // } else {
                        //     this.$message.error('编辑失败');
                        // }
                    });
                }
            });
        },
        //删除树节点
        removeTree(data) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    removeQuestionTreeNode(data.id).then(res => {
                        if (res == 1) {
                            this.$message.success('删除成功！');
                            this.reload();
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message.error(err.message);
                        // } else {
                        //     this.$message.error('删除失败');
                        // }
                    });;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        searchXdzy() {
            let startTime = "", endTime = "";
            if (this.scTime != "" && this.scTime != null) {
                startTime = this.scTime[0];
                endTime = this.scTime[1];
            }
            this.paramData = {
                beginTime: startTime == "" ? null : startTime,
                endTime: endTime == "" ? null : endTime,
                name: this.wd_name == "" ? null : this.wd_name,
            };
            queryQuestion(this.current_pageXdzy, this.pageSizeXdzy, this.wd_name, this.treeId).then(res => {
                this.tableData = res.list;
                this.totalXdzy = res.totals;
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        handleSizeChangeXdzy(val) {
            this.pageSizeXdzy = val;
            this.current_pageXdzy = 1;
            this.searchXdzy();
        },
        handleCurrentChangeXdzy(pageNum) {
            this.current_pageXdzy = pageNum;
            this.searchXdzy();
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //节点点击事件
        handleNodeClick(node, data) {
            this.currentRole = "navs";
            this.treeId = node.id;
            this.searchXdzy();
        },
        //题目详情弹框
        xq_div(row) {
            this.tm_nr = row.content;
            this.centerDialogVisible_xq = true;
        },
        //历史记录弹框
        history_div(row) {
            this.dialogVisible_lsjl = true;
            queryAnswerQuestionRecord(row.id, 1, 10).then(res => {
                this.tableData_history = res.list.map(e => {
                    return {
                        qkfx: e.fullAnalysis,
                        czcs: e.fullMeasure,
                        create: e.answerer,
                        time: e.createTime,
                        qkfxScore: e.score1 * 100,
                        czcsScore: e.score2 * 100
                    }
                });
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        //答题弹框
        dt_div(row) {
            this.questionName = row.name;
            this.value_qkfx = { label: [], id: [] },
                this.value_czcs = { label: [], id: [] },
                this.tm_nr = row.content;
            this.answeringQuesiton = row;
            this.centerDialogVisible_dt = true;
            this.$nextTick(() => {
                this.$refs.treeQkfxAnswer.setCheckedNodes([]);
                this.$refs.treeCzcsAnswer.setCheckedNodes([]);
            })
        },
        //提交答题
        handleAnswer() {
            let body = {
                questionId: this.answeringQuesiton.id,
                analysis: this.value_qkfx.id.join(),
                measure: this.value_czcs.id.join(),
                answerer: this.userInfo.account
            }
            answerQuestion(body).then(res => {
                res && this.$message.success("完成答题");
                this.searchXdzy();
                this.centerDialogVisible_dt = false;
            }).catch(err => {
                this.$message.warning(err.message);
            });
            this.centerDialogVisible_dt = false;
        },
        exportDoc() {
            let exportData = {};
            exportData.name = this.questionName;
            exportData.tm = this.tm_nr;
            exportData.qkfx = this.value_qkfx.label;
            exportData.czcs = this.value_czcs.label;
            export_doc_util(
                "static/word/题目.docx",
                exportData,
                '题目',
                1
            );
            this.$message.success('导出成功！');
            this.centerDialogVisible_dt = false;
        },
        addNewQuestion() {
            let _this = this;
            this.dialogVisibleNewQuestion = true;
            this.$nextTick(() => {
                this.$refs.treeQkfx.setCheckedNodes([]);
                this.$refs.treeCzcs.setCheckedNodes([]);
            });
            this.newQuestion.treeId = '';
            this.newQuestion.name = '';
            this.newQuestion.content = '';
            this.newQuestion.analysis = [];
            this.newQuestion.analysisId = [];
            this.newQuestion.measure = [];
            this.newQuestion.measureId = [];
            this.newQuestion.mineStatus = '';
            setTimeout(function () {
                _this.$refs.numberValidateForm2.resetFields();
            }, 200)
        },
        handleNodeClickQuestion(val) {
            this.newQuestion.mineStatus = val.label;
            this.newQuestion.treeId = val.id;
            this.$refs.numberValidateForm2.validateField('mineStatus')
        },
        //select框值改变时候触发的事件
        selectChangeQkfx(e) {
            var arrNew = [];
            var dataLength = this.newQkfxValue.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.newQkfxValue[i].label) {
                        arrNew.push(this.newQkfxValue[i])
                    }
                }
            }
            this.$refs.treeQkfx.setCheckedNodes(arrNew);//设置勾选的值
        },
        selectChangeCzcs(e) {
            var arrNew = [];
            var dataLength = this.newCzcsValue.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.newCzcsValue[i].label) {
                        arrNew.push(this.newCzcsValue[i])
                    }
                }
            }
            this.$refs.treeCzcs.setCheckedNodes(arrNew);//设置勾选的值
        },
        selectChangeQkfxEdit(e) {
            var arrNew = [];
            var dataLength = this.editQkfxValue.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.editQkfxValue[i].label) {
                        arrNew.push(this.editQkfxValue[i])
                    }
                }
            }
            this.$refs.treeQkfxEdit.setCheckedNodes(arrNew);//设置勾选的值
        },
        selectChangeCzcsEdit(e) {
            var arrNew = [];
            var dataLength = this.editCzcsValue.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.editCzcsValue[i].label) {
                        arrNew.push(this.editCzcsValue[i])
                    }
                }
            }
            this.$refs.treeCzcsEdit.setCheckedNodes(arrNew);//设置勾选的值
        },
        selectChangeQkfxAnswer(e) {
            var arrNew = [];
            var dataLength = this.qkfxTmp.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.qkfxTmp[i].label) {
                        arrNew.push(this.qkfxTmp[i])
                    }
                }
            }
            this.$refs.treeQkfxAnswer.setCheckedNodes(arrNew);//设置勾选的值
        },
        selectChangeCzcsAnswer(e) {
            var arrNew = [];
            var dataLength = this.czcsTmp.length;
            var eleng = e.length;
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.czcsTmp[i].label) {
                        arrNew.push(this.czcsTmp[i])
                    }
                }
            }
            this.$refs.treeCzcsAnswer.setCheckedNodes(arrNew);//设置勾选的值
        },
        handleCheckChangeQkfx() {
            let res = this.$refs.treeQkfx.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.newQkfxValue = arr;
            this.newQuestion.analysis = arrLabel;
            this.newQuestion.analysisId = arrId;
        },
        handleCheckChangeCzcs() {
            let res = this.$refs.treeCzcs.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.newCzcsValue = arr;
            this.newQuestion.measure = arrLabel;
            this.newQuestion.measureId = arrId;
        },
        handleCheckChangeQkfxEdit() {
            let res = this.$refs.treeQkfxEdit.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.editQkfxValue = arr;
            this.editQuestion.analysis = arrLabel;
            this.editQuestion.analysisId = arrId;
        },
        handleCheckChangeCzcsEdit() {
            let res = this.$refs.treeCzcsEdit.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.editCzcsValue = arr;
            this.editQuestion.measure = arrLabel;
            this.editQuestion.measureId = arrId;
        },
        handleCheckChangeQkfxAnswer() {
            let res = this.$refs.treeQkfxAnswer.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.qkfxTmp = arr;
            this.value_qkfx.label = arrLabel;
            this.value_qkfx.id = arrId;
        },
        handleCheckChangeCzcsAnswer() {
            let res = this.$refs.treeCzcsAnswer.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
            let arrLabel = [], arr = [], arrId = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arrId.push(item.id);
                arr.push(item);
            });
            this.czcsTmp = arr;
            this.value_czcs.label = arrLabel;
            this.value_czcs.id = arrId;
        },
        //新增题目
        defineAddNewQuestion() {

            this.$refs['numberValidateForm2'].validate((valid) => {
                if (valid) {
                    if (this.newQuestion.content && this.newQuestion.analysis.length > 0 && this.newQuestion.measure.length > 0 && this.newQuestion.treeId != '') {
                        let param = JSON.parse(JSON.stringify(this.newQuestion));
                        param.analysis = param.analysisId.join(',');
                        param.measure = param.measureId.join(',');
                        addNewQuestion(param).then(res => {
                            if (res == 1) {
                                this.$message.success('新增成功！');
                                this.dialogVisibleNewQuestion = false;
                                this.reload();
                            }
                        }).catch(err => {
                            console.log(err);
                            this.$message.error(err.message);
                        });
                    } else {
                        this.$message.warning('作业树、题目、情况分析、处置措施都不能为空！');
                        this.dialogVisibleNewQuestion = true;
                    }
                }
            });

        },
        //编辑题目
        editQuestionEvent(val) {
            let _this = this;
            _this.editQuestion = JSON.parse(JSON.stringify(val));
            _this.$nextTick(() => {
                // this.checkedQkfx = val.analysis.split(',');
                // this.checkedCzcs = val.measure.split(',');
                _this.$refs.treeQkfxEdit.setCheckedKeys(val.analysis.split(','));
                _this.$refs.treeCzcsEdit.setCheckedKeys(val.measure.split(','));
            });
            _this.dialogVisibleEditQuestion = true;
            setTimeout(function () {
                _this.$refs.numberValidateForm21.resetFields();
            }, 200)
        },
        defineditQuestion() {
            this.$refs['numberValidateForm21'].validate((valid) => {
                if (valid) {
                    let param = JSON.parse(JSON.stringify(this.editQuestion));
                    param.analysis = this.editQuestion.analysisId.length > 0 && this.editQuestion.analysisId.join(',');
                    param.measure = this.editQuestion.measureId.length > 0 && this.editQuestion.measureId.join(',');
                    UpdateQuestion(param).then(res => {
                        if (res == 1) {
                            this.$message.success('编辑成功！');
                            this.dialogVisibleEditQuestion = false;
                            this.reload();
                        }
                    }).catch(err => {
                        console.log(err);
                        this.$message.error(err.message);
                    });
                }
            });
        },
        handleSelectionChangeXdzy(val) {
            this.questionIds = [];
            val.forEach(item => {
                this.questionIds.push(item.id);
            });
        },
        //删除题目
        deleteQuestion() {
            if (this.questionIds.length > 0) {
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        removeQuestion(this.questionIds).then(res => {
                            if (res == this.questionIds.length) {
                                this.$message.success('删除成功！');
                                this.reload();
                            }
                        }).catch(err => {
                            this.$message.warning(err.message);
                        });
                    })
                    .catch((err) => {
                        this.$message.error(err.message);
                    });
            } else {
                this.$message.warning('请选择要删除的数据！');
            }
        },
        handleClick(val) { },
        addQkfx(row) {
            this.newQkfxObjNode.label = '';
            this.newQkfxObjNode['id'] = row.id;
            this.qkfxFlag = 1;
        },
        defineAddQkfx() {
            this.$refs['dynamicValidateForm3'].validate((valid) => {
                if (valid) {
                    if (this.newQkfxObjNode.id == 0) {
                        addQuestionOptionsTreeNode(this.newQkfxObjNode.label, '情况分析').then(res => {
                            if (res == 1) {
                                this.$message.success('新增成功！');
                                this.reload();
                            } else {
                                this.$message.error('新增失败！');
                            }
                        }).catch(err => {
                            this.$message.warning(err.message);
                        });
                    } else {
                        addQuestionOptionsTreeNode(this.newQkfxObjNode.label, '情况分析', this.newQkfxObjNode.id).then(res => {
                            if (res == 1) {
                                this.$message.success('新增成功！');
                                this.reload();
                            } else {
                                this.$message.error('新增失败！');
                            }
                        }).catch(err => {
                            this.$message.warning(err.message);
                        });
                    }
                }
            });

        },
        editQkfx(row) {
            this.qkfxFlag = 2;
            this.editQkfxObjNode = JSON.parse(JSON.stringify(row));
        },
        defineEditQkfx() {
            this.$refs['dynamicValidateForm4'].validate((valid) => {
                if (valid) {
                    updateQuestionOptionsTreeNode(this.editQkfxObjNode.label, this.editQkfxObjNode.id).then(res => {
                        if (res == 1) {
                            this.$message.success('编辑成功！');
                            this.reload();
                        } else {
                            this.$message.error('编辑失败');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
            });
        },
        removeQkfx(row) {
            this.qkfxFlag = 0;
            this.$confirm('此操作将永久删除节点以及其子节点数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    removeQuestionOptionsTreeNode(row.id).then(res => {
                        if (res == 1) {
                            this.$message.success('删除成功！');
                            this.reload();
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message.error(err.message);
                        // } else {
                        //     this.$message.error('删除失败');
                        // }
                    });;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        addCzcs(row) {
            this.czcsFlag = 1;
            this.newCzcsObjNode.label = '';
            this.newCzcsObjNode['id'] = row.id;
        },
        defineAddCzcs() {
            this.$refs['dynamicValidateForm5'].validate((valid) => {
                if (valid) {
                    if (this.newCzcsObjNode.id == 0) {
                        addQuestionOptionsTreeNode(this.newCzcsObjNode.label, '处置措施').then(res => {
                            if (res == 1) {
                                this.$message.success('新增成功！');
                                this.reload();
                            } else {
                                this.$message.error('新增失败！');
                            }
                        }).catch(err => {
                            this.$message.warning(err.message);
                        });
                    } else {
                        addQuestionOptionsTreeNode(this.newCzcsObjNode.label, '处置措施', this.newCzcsObjNode.id).then(res => {
                            if (res == 1) {
                                this.$message.success('新增成功！');
                                this.reload();
                            } else {
                                this.$message.error('新增失败！');
                            }
                        }).catch(err => {
                            this.$message.warning(err.message);
                        });
                    }
                }
            });

        },
        editCzcs(row) {
            this.czcsFlag = 2;
            this.editCzcsObjNode = JSON.parse(JSON.stringify(row));
        },
        defineEditCzcs() {
            this.$refs['dynamicValidateForm6'].validate((valid) => {
                if (valid) {
                    updateQuestionOptionsTreeNode(this.editCzcsObjNode.label, this.editCzcsObjNode.id).then(res => {
                        if (res == 1) {
                            this.$message.success('编辑成功！');
                            this.reload();
                        } else {
                            this.$message.error('编辑失败');
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                    });
                }
            });
        },
        removeCzcs(row) {
            this.czcsFlag = 0;
            this.$confirm('此操作将永久删除节点以及其子节点数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    removeQuestionOptionsTreeNode(row.id).then(res => {
                        if (res == 1) {
                            this.$message.success('删除成功！');
                            this.reload();
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message.error(err.message);
                        // } else {
                        //     this.$message.error('删除失败');
                        // }
                    });;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //#endregion
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    activated() {
        //#region +++++++++++++++++++++++++++++++理论学习+++++++++++++++++++++++++++++++

        //查询板块名称
        queryLiteratureFolder('学习训练').then(res => {
            this.moduleList = res;
            this.transferRadios = res;
            let arrListModule = [
                {
                    label: '舆论战心理战法律战业务理论',
                    // label: 'XXXXXXXXXX业务理论',
                    options: []
                },
                {
                    label: '国际政治社会环境',
                    options: []
                },
                {
                    label: '舆论战心理战法律战支撑信息',
                    // label: 'XXXXXXXXX支撑信息',
                    options: []
                }
            ];
            arrListModule[0].options = res.filter(item => item.remark == '舆论战心理战法律战业务理论');
            arrListModule[1].options = res.filter(item => item.remark == '国际政治社会环境');
            arrListModule[2].options = res.filter(item => item.remark == '舆论战心理战法律战支撑信息');
            this.options = arrListModule;
            this.moduleName = JSON.parse(JSON.stringify(arrListModule));
        }).then((res) => {
            this.queryLiterature(1, this.everySize, null, null);
            //查询想定作业模块树结构
            this.query_tree();
            this.searchXdzy();
            queryQuestionOptionsTree('情况分析').then(res => {
                this.options_qkfx = res;
                let top = {
                    children: res,
                    code: null,
                    id: 0,
                    level: 0,
                    label: '情况分析',
                    parentCode: null,
                };
                this.options_qkfx_all = [top];
            }).catch(err => {
                this.$message.warning(err.message);
            });
            queryQuestionOptionsTree('处置措施').then(res => {
                this.options_czcs = res;
                let top = {
                    children: res,
                    code: null,
                    id: 0,
                    level: 0,
                    label: '处置措施',
                    parentCode: null,
                };
                this.options_czcs_all = [top];
            }).catch(err => {
                this.$message.warning(err.message);
            });
        })
            .catch((err) => {
                this.$message.warning(err.message);
            })
        //#endregion
        //#region +++++++++++++++++++++++++++++++想定作业+++++++++++++++++++++++++++++++

        // queryQuestionOptions().then(res => {
        //     let a = "情况分析", b = "处置措施";
        //     this.options_qkfx = [{
        //         label: a,
        //         options: res.reduce((before, cur) => {
        //             cur.type == a && before.push({ label: cur.label, value: cur.id });
        //             return before;
        //         }, [])
        //     }];

        //     this.options_czcs = [{
        //         label: b,
        //         options: res.reduce((before, cur) => {
        //             cur.type == b && before.push({ label: cur.label, value: cur.id });
        //             return before;
        //         }, [])
        //     }];
        // }).catch(err => {
        //     this.$message.warning(err.message);
        // });
        //#endregion
    }
}
</script>

<style lang="scss">
#xxxlgl {
    width: 99%;
    height: 98%;
    padding: 30px;
    box-sizing: border-box;
    overflow-y: auto;

    .search {
        width: 100%;
        height: 50px;
        text-align: right;

        .el-input {
            width: 200px;
            margin-right: 15px;

            input {
                height: 30px;
                color: white;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-input__icon {
                line-height: 30px;
            }
        }

        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-upload {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-delete {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-transform {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .searchResult {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;

        .el-table tr {
            background-color: transparent !important;
            color: #ffffffc7;
        }

        .el-table thead tr {
            height: 40px;
            background: url(../../assets/img/setting/tr1.png) no-repeat;
            background-size: 100% 100%;
        }

        .el-table th {
            background-color: transparent;
        }

        tbody tr {
            border-bottom: 1px solid #252631;
        }

        .el-table td {
            border-bottom: 1px solid #252631;
            border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #82848a78;
        }

        .el-table th {
            border: unset;
            // background-color: #263b5d !important;
        }

        .el-table--fit {
            background: none !important;
            border: unset;
        }

        .el-icon-delete-solid {
            color: red;
            cursor: pointer;
            font-size: 18px;
        }

        .el-icon-edit {
            color: #1172d8;
            cursor: pointer;
            font-size: 20px;
        }

        .el-icon-view {
            color: #00ffff;
            font-size: 20px;
            cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
            background-color: unset;
        }

        .pagination-div {
            width: 100%;
            height: 50px;

            .el-pagination {
                margin-top: 9px;
                text-align: right;

                .el-pagination__total {
                    color: white;
                }

                .el-pagination__jump {
                    color: white;
                }
            }

            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }

    #xdzygl {
        width: 100%;
        height: 100%;

        .left-xdzy {
            width: 15%;
            height: 100%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
            background: url('../../assets/img/yqjc/01.png') no-repeat;
            background-size: 100% 100%;

            input {
                color: white;
                background-color: transparent;
            }

            .el-input {
                position: relative;
                font-size: 14px;
                display: inline-block;
                width: 100%;
            }

            .el-button+.el-button {
                margin-left: 0px !important;
            }

            .el-tree {
                color: white;
                background: transparent;
                height: calc(100% - 50px);
                margin-top: 10px;

                .el-tree-node__content {
                    height: 40px;
                }

                .el-tree-node {
                    position: relative;
                    padding-left: 0px; // 缩进量
                }

                .el-tree-node__children {
                    padding-left: 15px; // 缩进量
                }

                // 竖线
                .el-tree-node::before {
                    content: '';
                    height: 100%;
                    width: 1px;
                    position: absolute;
                    left: -3px;
                    top: -17px;
                    border-width: 1px;
                    border-left: 1px solid #1895a2;
                }

                // 当前层最后一个节点的竖线高度固定
                .el-tree-node:last-child::before {
                    height: 38px; // 可以自己调节到合适数值
                }

                // 横线
                .el-tree-node::after {
                    content: '';
                    width: 13px;
                    height: 20px;
                    position: absolute;
                    left: -3px;
                    top: 20px;
                    border-width: 1px;
                    border-top: 1px solid #1895a2;
                }

                // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
                &>.el-tree-node::after {
                    border-top: none;
                }

                &>.el-tree-node::before {
                    border-left: none;
                }

                // 展开关闭的icon
                .el-tree-node__expand-icon {
                    font-size: 16px;

                    // 叶子节点（无子节点）
                    &.is-leaf {
                        color: transparent;
                        // display: none; // 也可以去掉
                    }
                }
            }

            .el-tree>.el-tree-node>.el-tree-node__content {
                height: 40px;
                background-image: url(../../assets/img/yqjc/24.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .el-icon-error {
                    display: none !important;
                }

                .el-icon-edit-outline {
                    display: none !important;
                }
            }

            .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content {
                height: 40px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
                font-size: 16px !important;
            }

            .custom-tree-node {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                padding-right: 8px;
                width: 82%;

                .first-span {
                    width: 100%;
                    float: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .addOrMove {
                    display: none;

                    .add {
                        i {
                            font-size: 16px;
                            color: #00a6f5;
                        }
                    }

                    .delete {
                        i {
                            font-size: 16px;
                            color: #ff5454;
                        }
                    }

                    .edit {
                        i {
                            font-size: 16px;
                            color: green;
                        }
                    }
                }
            }

            .el-tree>.el-tree-node>.el-tree-node__content>.custom-tree-node>.addOrMove>button:nth-child(2),
            .el-tree>.el-tree-node>.el-tree-node__content>.custom-tree-node>.addOrMove>button:nth-child(3) {
                display: none;
            }

            .el-tree-node__content:hover .addOrMove {
                display: block;
            }

            #xdzygl>.left-div>.el-tree>.el-tree-node>.el-tree-node__children {
                background-color: #1d2d46ad !important;
                width: calc(100% - 15px);
                // height: calc(100% - 44px);
                overflow: auto;
                // position: relative;
                // .el-tree-node{
                //   width: 300px;
                // }
            }

            .el-tree-node:focus>.el-tree-node__content {
                background-color: #00648a96 !important;
                // border-radius: 5px;
            }

            .el-tree-node__content:hover,
            .el-tree-node__content:focus {
                background-color: #00638a50 !important;
                // border-radius: 5px;
            }

            .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                background-color: #00648a96 !important;
                // border-radius: 5px;
            }

            .el-icon-circle-plus {
                font-size: 16px;
                color: #00a6f5;
            }

            .el-icon-edit-outline {
                font-size: 16px;
                color: #2ae209;
            }

            .el-icon-error {
                font-size: 16px;
                color: #ff5454;
            }

            .el-icon-upload {
                font-size: 16px;
                color: #2bce0e;
            }
        }

        .right-xdzy {
            width: calc(85% - 10px);
            height: 100%;
            float: left;
            margin-left: 10px;
            padding: 5px;
            box-sizing: border-box;
            background: url('../../assets/img/yqjc/02.png') no-repeat;
            background-size: 100% 100%;

            .search-xdzy {
                width: 100%;
                height: 50px;
                text-align: right;

                .el-input {
                    width: 200px;
                    float: right;
                    margin-top: 10px;
                    margin-right: 15px;

                    input {
                        height: 30px;
                        color: white;
                        background: none !important;
                        border: 1px solid #146a80 !important;
                        box-shadow: 0 0 10px #1b6097;
                    }

                    .el-input__icon {
                        line-height: 30px;
                    }
                }

                .el-date-editor {
                    height: 30px;
                    float: right;
                    margin-top: 10px;
                    margin-right: 15px;
                    color: white;
                    border: 1px solid #146a80 !important;
                    background-color: transparent;
                    box-shadow: 0 0 10px #1b6097;

                    .el-range-input {
                        color: white;
                        background-color: transparent;
                    }

                    .is-active {
                        border-color: #146a80 !important;
                    }

                    .el-input__icon {
                        line-height: 22px;
                    }

                    .el-range-separator {
                        line-height: 22px;
                        color: white;
                    }
                }

                .button-search {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    float: right;
                    margin-top: 10px;
                    margin-right: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .button-add {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    float: right;
                    margin-top: 10px;
                    margin-right: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

                .button-delete {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 13px;
                    float: right;
                    margin-top: 10px;
                    margin-right: 50px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }

            .searchResult-xdzy {
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: auto;

                .el-table tr {
                    background-color: transparent !important;
                    color: #ffffffc7;
                }

                .el-table thead tr {
                    height: 40px;
                    background: url(../../assets/img/setting/tr1.png) no-repeat;
                    background-size: 100% 100%;
                }

                .el-table th {
                    background-color: transparent;
                }

                tbody tr {
                    border-bottom: 1px solid #252631;
                }

                .el-table td {
                    border-bottom: 1px solid #252631;
                    border-right: unset;
                }

                .el-table--enable-row-hover .el-table__body tr:hover>td {
                    background-color: #82848a78;
                }

                .el-table th {
                    border: unset;
                    // background-color: #263b5d !important;
                }

                .el-table--fit {
                    background: none !important;
                    border: unset;
                }

                .el-icon-delete-solid {
                    color: red;
                    cursor: pointer;
                    font-size: 18px;
                }

                .el-icon-edit {
                    color: #1172d8;
                    cursor: pointer;
                    font-size: 20px;
                }

                .el-icon-view {
                    color: #00ffff;
                    font-size: 20px;
                    cursor: pointer;
                }

                .el-table--group::after,
                .el-table--border::after,
                .el-table::before {
                    background-color: unset;
                }

                .pagination-div {
                    width: 100%;
                    height: 50px;

                    .el-pagination {
                        margin-top: 9px;
                        text-align: right;

                        .el-pagination__total {
                            color: white;
                        }

                        .el-pagination__jump {
                            color: white;
                        }
                    }

                    .myPagination.is-background .el-pager li:not(.disabled).active {
                        color: #fff;
                        border: 1px solid #146a80;
                        box-shadow: 0 0 10px #1b6097;
                        background-color: #1d2d46;
                    }
                }
            }
        }

        .el-dialog {
            .el-input__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-textarea__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .table-div {
                width: 100%;
                height: 500px;
                margin-top: 20px;
                margin-left: 0px;
                background: #e6e6e6;

                th {
                    border: unset;
                    background-color: #4f6992 !important;
                    color: white;
                }

                .el-table__body-wrapper {
                    height: 452px;
                    overflow-y: auto;
                }

                .cell {
                    text-align: center;
                }

                .el-table tr {
                    background-color: #1d2d46 !important;
                    color: #ffffffc7;
                }

                .el-table td {
                    border-bottom: 1px solid #127a89;
                    border-right: unset;
                }

                .el-table--enable-row-hover .el-table__body tr:hover>td {
                    background-color: #82848a78;
                }

                .el-table th {
                    border: unset;
                    background-color: #263b5d !important;
                }

                .el-table--fit {
                    background: none !important;
                    border: unset;
                }

                .el-icon-delete-solid {
                    color: red;
                    cursor: pointer;
                    font-size: 18px;
                }

                .el-icon-edit {
                    color: #1172d8;
                    cursor: pointer;
                    font-size: 20px;
                }

                .el-icon-delete {
                    color: red;
                    font-size: 20px;
                    cursor: pointer;
                }

                .el-table--group::after,
                .el-table--border::after,
                .el-table::before {
                    background-color: unset;
                }
            }

            .answer {
                width: 100%;
                height: 300px;

                .left-answer {
                    width: 40%;
                    height: 100%;
                    float: left;
                }

                .center-answer {
                    width: 20%;
                    height: 100%;
                    line-height: 300px;
                    float: left;
                    text-align: center;
                }

                .right-answer {
                    width: 40%;
                    height: 100%;
                    float: left;
                }
            }

            .el-icon-circle-plus-outline {
                margin-left: 2%;
                color: green;
                font-weight: bold;
                cursor: pointer;
            }
        }
    }

    .el-dialog {
        color: white;
        background: #1d2d46 !important;

        .el-dialog__header {
            .el-dialog__title {
                color: white;
            }
        }

        .el-dialog__body {
            .el-form {
                .el-form-item {
                    .el-form-item__label {
                        color: white;
                    }

                    .el-form-item__content {
                        color: white;

                        .el-upload__tip {
                            color: white;
                        }

                        .el-upload-list__item {
                            &:hover {
                                background: #628ed4;
                            }

                            .el-upload-list__item-name {
                                color: white;
                            }

                            .el-upload-list__item-name [class^='el-icon'] {
                                color: white;
                            }
                        }
                    }

                    .el-radio-group {
                        .el-radio {
                            margin-top: 10px;
                            color: white;
                        }

                        .el-radio.is-bordered+.el-radio.is-bordered {
                            margin-left: 0px;
                        }
                    }
                }
            }

            .el-input__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-icon-document {
                height: auto;
            }
        }
    }

    .changeModuleName {
        .el-input {
            width: calc(100% / 3 - 10px);
            margin-top: 5px;
            margin-left: 10px;
        }
    }
}

.addAnswer {
    background: none;

    .el-tree {
        color: white;
        background: transparent;
        height: calc(100% - 50px);
        margin-top: 10px;

        .el-tree-node__content {
            height: 40px;
        }

        .el-tree-node {
            position: relative;
            padding-left: 0px; // 缩进量
        }

        .el-tree-node__children {
            padding-left: 15px; // 缩进量
        }

        // 竖线
        .el-tree-node::before {
            content: '';
            height: 100%;
            width: 1px;
            position: absolute;
            left: -3px;
            top: -17px;
            border-width: 1px;
            border-left: 1px solid #1895a2;
        }

        // 当前层最后一个节点的竖线高度固定
        .el-tree-node:last-child::before {
            height: 38px; // 可以自己调节到合适数值
        }

        // 横线
        .el-tree-node::after {
            content: '';
            width: 13px;
            height: 20px;
            position: absolute;
            left: -3px;
            top: 20px;
            border-width: 1px;
            border-top: 1px solid #1895a2;
        }

        // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
        &>.el-tree-node::after {
            border-top: none;
        }

        &>.el-tree-node::before {
            border-left: none;
        }

        // 展开关闭的icon
        .el-tree-node__expand-icon {
            font-size: 16px;

            // 叶子节点（无子节点）
            &.is-leaf {
                color: transparent;
                // display: none; // 也可以去掉
            }
        }
    }

    .el-tree>.el-tree-node>.el-tree-node__content {
        height: 40px;
        background-image: url(../../assets/img/yqjc/24.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content {
        height: 40px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
        font-size: 16px !important;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        width: 82%;

        .first-span {
            width: 100%;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .addOrMove {
            display: none;

            .add {
                i {
                    font-size: 16px;
                    color: #00a6f5;
                }
            }

            .delete {
                i {
                    font-size: 16px;
                    color: #ff5454;
                }
            }

            .edit {
                i {
                    font-size: 16px;
                    color: green;
                }
            }
        }
    }

    .el-tree-node__content:hover .addOrMove {
        display: block;
    }

    .el-tree>.el-tree-node>.el-tree-node__content>.custom-tree-node>.addOrMove>button:nth-child(2),
    .el-tree>.el-tree-node>.el-tree-node__content>.custom-tree-node>.addOrMove>button:nth-child(3) {
        display: none;
    }

    #xdzygl>.left-div>.el-tree>.el-tree-node>.el-tree-node__children {
        background-color: #1d2d46ad !important;
        width: calc(100% - 15px);
        overflow: auto;
    }

    .el-tree-node:focus>.el-tree-node__content {
        background-color: #00648a96 !important;
        // border-radius: 5px;
    }

    .el-tree-node__content:hover,
    .el-tree-node__content:focus {
        background-color: #00638a50 !important;
        // border-radius: 5px;
    }

    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #00648a96 !important;
        // border-radius: 5px;
    }

    .el-icon-circle-plus {
        font-size: 16px;
        color: #00a6f5;
    }

    .el-icon-edit-outline {
        font-size: 16px;
        color: #2ae209;
    }

    .el-icon-error {
        font-size: 16px;
        color: #ff5454;
    }

    .el-icon-upload {
        font-size: 16px;
        color: #2bce0e;
    }

    .left-qkfx {
        width: 30%;
        height: 100%;
        float: left;
        padding: 20px;
        box-sizing: border-box;
        background: url('../../assets/img/yqjc/01.png') no-repeat;
        background-size: 100% 100%;
    }

    .right-qkfx {
        width: calc(70% - 20px);
        height: 100%;
        float: left;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        background: url('../../assets/img/yqjc/02.png') no-repeat;
        background-size: 100% 100%;
    }

    .left-czcs {
        width: 30%;
        height: 100%;
        float: left;
        padding: 20px;
        box-sizing: border-box;
        background: url('../../assets/img/yqjc/01.png') no-repeat;
        background-size: 100% 100%;
    }

    .right-czcs {
        width: calc(70% - 20px);
        height: 100%;
        float: left;
        margin-left: 20px;
        padding: 20px;
        box-sizing: border-box;
        background: url('../../assets/img/yqjc/02.png') no-repeat;
        background-size: 100% 100%;
    }
}

.el-tabs--border-card {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid #3a5f94c9;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff00;

    .el-tabs__header {
        background-color: unset;
        border-bottom: 2px solid #3a5f94c9;

        .el-tabs__item {
            color: #dedede;
        }

        .el-tabs__item.is-active {
            color: #ffe000;
            background-color: #3a5f94c9;
            border-right-color: #3a5f94c9;
            border-left-color: #3a5f94c9;
        }

        .el-tabs__item:not(.is-disabled):hover {
            color: #ffe000;
        }
    }

    .el-tabs__content {
        height: calc(100% - 60px);
    }
}
</style>