<template>
  <div>
    <div class="loading-container"></div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px"
             style="margin-top: 20px;">
      <el-form-item label="知识点名称" prop="relationship">
        <el-input v-model="queryParams.docTitle" placeholder="请输入知识点名称" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>

    </el-form>
    <div style="display: flex;">
      <el-button type="primary" plain style="float: left;margin-left: 2vw" icon="el-icon-plus" size="mini"
                 @click="openAddTxt(0)">新增
      </el-button>
      <el-button type="success" plain style="float: left" icon="el-icon-refresh" size="mini" @click="reset">重置
      </el-button>
      <el-button type="info" plain style="float: left" icon="el-icon-upload2" size="mini" @click="handleImport">导入
      </el-button>
      <el-button type="info" plain style="float: left" icon="el-icon-upload2" size="mini"
                 @click="handleImportRelation">导入文献
      </el-button>

      <el-button type="primary" style="float: left" plain icon="el-icon-download" size="mini" @click="exportAllContent">
        导出
      </el-button>


      <el-button type="warning" plain style="float: left" size="mini" @click="exportList">
        导出表格
      </el-button>
      <el-button type="danger" plain style="float: left" size="mini" @click="deletAllInfo">
        一键清除
      </el-button>

      <!--    <el-button  type="danger"  plain style="float: left" size="mini" @click="opendeletOly=true">-->
      <!--     删除指定实体-->
      <!--    </el-button>-->
<!--      <div style="color: red; float: left;margin-left: 5vw;font-size: 12px;display: flex;align-items: center;">是否可以下载-->
<!--        <el-switch v-model="value" style="margin-left: 1vw;" active-color="#13ce66" inactive-color="#ff4949"-->
<!--                   @change="updateInfo">-->
<!--        </el-switch>-->
<!--      </div>-->

    </div>

    <el-dialog title="删除指定实体" :visible.sync="opendeletOly" width="800px" append-to-body>
      <el-input placeholder="请输入内容" v-model="deleteWord" clearable>
      </el-input>

      <el-button type="danger" plain style="float: left" size="mini" @click="deleteOnly">删除</el-button>
    </el-dialog>


    <el-dialog title="历史文件" :visible.sync="openList" width="800px" append-to-body>
      <el-table :data="fileAllList" style="width: 100%;margin-top: 2vw;" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="fileName" label="文件名称"></el-table-column>
        <el-table-column prop="docLevel" label="操作">
          <template slot-scope="scope">
            <el-button style="font-size: 0.8vw;" type="text"
                       @click="downLoadFile(scope.row.fileUrl, scope.row.fileName)">下载
            </el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-dialog>


    <el-table :data="fileList" row-key="id" :expand-on-click-node="false"
              :tree-props="{ children: 'level2', hasChildren: true }" style="width: 100%;margin-top: 2vw;"
              :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
              v-loading="loading"
              element-loading-text="重置数据中">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="docTitle" label="标题"></el-table-column>
      <el-table-column prop="docLevel" label="关系层级"></el-table-column>
      <el-table-column prop="parentName" label="上级知识点"></el-table-column>
      <el-table-column prop="imgsNum" label="图片数量">
        <template slot-scope="scope">
          <div v-if="scope.row.imgsNum != null && scope.row.imgsNum != undefined">{{ scope.row.imgsNum }}</div>
          <div v-else>0</div>
        </template>

      </el-table-column>
      <el-table-column prop="videoSNum" label="视频数量">
        <template slot-scope="scope">
          <div v-if="scope.row.videoSNum != null && scope.row.videoSNum != undefined">{{ scope.row.videoSNum }}</div>
          <div v-else>0</div>
        </template>
      </el-table-column>
      <el-table-column prop="docLevel" label="操作">
        <template slot-scope="scope">
          <el-button style="font-size: 0.8vw;" type="text" @click="openAddTxt(scope.row)">添加</el-button>
          <el-button style="font-size: 0.8vw;" type="text" @click="editDoc(scope.row)">编辑</el-button>
          <el-button style="font-size: 0.8vw;" type="text" @click="deleteTxt(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 模板选择对话框 -->
    <el-dialog :title="templateDialog.title" :visible.sync="templateDialog.visible" width="900px" append-to-body>
      <div class="template-selection">

        <el-button type="primary" size="small" @click="createNewTemplate" style="font-size: 0.8vw;">
          新增模板
        </el-button>
        <div class="section-title" style="font-size: 1vw;margin-top: 0.5vw;">可用模板</div>

        <div class="section">

          <div class="template-list" style="margin-top: 0.7vw;">
            <el-table
              :data="templates"
              style="width: 100%">
              <el-table-column
                prop="name"
                label="名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="options"
                label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click.stop="selectTemplate(scope.row)">选择</el-button>
                  <el-button size="mini" @click.stop="updatetemplate(scope.row)">修改</el-button>
                  <el-button size="mini" @click.stop="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="preview-panel" v-if="selectedTemplate">
          <div class="preview-title" style="font-size: 1vw;margin-top: 0.8vw;">当前选中模板预览:
            {{ selectedTemplate.name }}
          </div>
          <div class="preview-content" style="margin-top: 0.8vw;">
            <el-form :inline="true" label-position="right" label-width="80px" :model="selectedTemplate">
              <el-form-item label="一级标题">
                <el-input v-model="selectedTemplate.firstTitle"></el-input>
              </el-form-item>
              <el-form-item label="五级标题">
                <el-input v-model="selectedTemplate.fiveTitle"></el-input>
              </el-form-item>
              <el-form-item label="二级标题">
                <el-input v-model="selectedTemplate.secondTitle"></el-input>
              </el-form-item>
              <el-form-item label="六级标题">
                <el-input v-model="selectedTemplate.sixTitle"></el-input>
              </el-form-item>
              <el-form-item label="三级标题">
                <el-input v-model="selectedTemplate.thirdTitle"></el-input>
              </el-form-item>
              <el-form-item label="七级标题">
                <el-input v-model="selectedTemplate.sevenTitle"></el-input>
              </el-form-item>
              <el-form-item label="四级标题">
                <el-input v-model="selectedTemplate.fourthTitle"></el-input>
              </el-form-item>


            </el-form>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="templateDialog.visible = false">取消</el-button>
        <el-button type="primary" :disabled="!selectedTemplate" @click="confirmTemplate">
          确认
        </el-button>
      </div>
    </el-dialog>

    <!-- 模板编辑器对话框 -->
    <el-dialog :title="templeteTitle" :visible.sync="templateEditor.visible" width="700px" append-to-body>
      <el-form :model="templateEditor.form" label-width="100px" :rules="templateRules" ref="templateForm">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="templateEditor.form.name" placeholder="请输入模板名称" maxlength="20"
                    show-word-limit></el-input>
        </el-form-item>

        <el-divider>标题样式设置</el-divider>

        <el-form-item v-for="level in levels" :key="level.key" :label="level.label">
          <el-input v-model="templateEditor.form[level.key]" @change="handleSelected()"/>
          <!--          <el-select v-model="templateEditor.form[level.key]" style="width: 100%"-->
          <!--                     :placeholder="`请选择${level.label}样式`"-->
          <!--                     @change="handleSelected()">-->
          <!--            <el-option v-for="option in titleOptions" :key="option.value" :label="option.label" :value="option.value">-->
          <!--              <span style="float: left">{{ option.label }}</span>-->
          <!--              &lt;!&ndash; <span style="float: right; color: #8492a6; font-size: 13px">-->
          <!--                <i :class="option.icon" style="margin-right: 5px;"></i>-->
          <!--                {{ option.desc }}-->
          <!--              </span> &ndash;&gt;-->
          <!--            </el-option>-->
          <!--          </el-select>-->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancle">取消</el-button>
        <el-button type="primary" @click="saveTemplate">保存</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".doc, .docx,.csv"
                 :headers="upload.headers"
                 :action="upload.url"
                 :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress"
                 :on-success="handleFileSuccess"
                 :auto-upload="false"
                 :data="selectedTemplate"
                 drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入doc、docx格式文件。</span>
          <span>{{ upload.tip }}</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button v-loading="oprnIno" type="primary" @click="submitFileForm">确 定</el-button>
        <el-button :disabled="oprnIno" @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="upload1.title" :visible.sync="upload1.open" width="400px" append-to-body>
      <el-upload ref="uploadR" :limit="1" accept=".csv" :headers="upload1.headers" :action="upload1.url"
                 :disabled="upload1.isUploading" :on-progress="handleFileUploadProgressRelation"
                 :on-success="handleFileSuccessRelation" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将 CSV 文件拖到此处，或 <em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span style="color: #999;">仅允许导入 .csv 格式文件（逗号分隔文本）</span>
          <br/>
          <span>{{ upload.tip }}</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormR">确 定</el-button>
        <el-button @click="upload1.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入补充数据对话框 -->
    <el-dialog title="补充数据导入" :visible.sync="uploadAdd.open" width="400px" append-to-body>

      <el-upload ref="upload1" :limit="1" accept=".doc, .docx" :headers="uploadAdd.headers" :action="uploadAdd.url"
                 :disabled="uploadAdd.isUploading" :on-progress="handleFileUploadProgress1"
                 :on-success="handleFileSuccess1"
                 :auto-upload="false" :data="{ parentId: parentId, relation: relaTion }" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入doc、docx格式文件。</span>
          <span>{{ upload.tip }}</span>
        </div>
      </el-upload>

      <div style="margin-top: 10px;">请选择上级文章</div>
      <el-select filterable v-model="parentId">
        <el-option v-for="item in txtList" :label="item.docTitle" :value="item.id">
        </el-option>
      </el-select>
      <p v-if="isInputInvalid1" class="error-message">{{ inputErrorMessage }}</p>
      <div style="margin-top: 10px;">与上级文章关系</div>
      <el-input v-model="relaTion" oninput="this.value = this.value.replace(/[^(\u4e00-\u9fa5A-Za-z)]/g, '')"
                placeholder="仅限汉字或字母"></el-input>
      <span v-if="isInputInvalid" class="error-message">{{ inputErrorMessage1 }}</span>
      <div slot="footer" class="dialog-footer">
        <el-button v-loading="oprnIno1" type="primary" @click="submitFileForm1">确 定</el-button>
        <el-button :disabled="oprnIno1" @click="uploadAdd.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改知识点" :visible.sync="editTxt" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item style="position: relative ;" label="知识标题">
          <el-input v-model="txtName">
          </el-input>
        </el-form-item>
        <el-form-item style="position: relative ;" label="">
        </el-form-item>
        <el-form-item style="position: relative ;" label="关系层级">
          <el-select v-model="level1" @change="changeLevel">
            <el-option label="一级标题" value="1"></el-option>
            <el-option label="二级标题" value="2"></el-option>
            <el-option label="三级标题" value="3"></el-option>
            <el-option label="四级标题" value="4"></el-option>
<!--            <el-option label="五级标题" value="5"></el-option>-->
<!--            <el-option label="六级标题" value="6"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item style="position: relative ;" label="知识内容">
          <Editor v-if="editTxt" v-model="TxtValue"></Editor>
        </el-form-item>

        <el-form-item style="position: relative ;" label="上级知识">
          <el-select filterable v-model="parentId1" label="选择上级文章" @change="selectChanged">
            <el-option v-for="item in parentDocList" :key="item.id" :label="item.docTitle" :value="item.id">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="position: relative ;" label="与上级关系">
          <el-input v-model="relationName" oninput="this.value = this.value.replace(/[^(\u4e00-\u9fa5A-Za-z)]/g, '')"
                    placeholder="仅限汉字或字母">
          </el-input>
        </el-form-item>


<!--        <el-form-item label="上传视频" prop="courseUrl">-->
<!--          <el-upload class="avatar-uploader el-upload&#45;&#45;text" multiple :headers="videoUpload.headers"-->
<!--                     :action="videoUpload.url" :file-list="videoFileList" :show-file-list="false" accept=".mp4"-->
<!--                     :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo"-->
<!--                     :on-progress="uploadVideoProcess"-->
<!--                     :on-remove="handleVideoRemove">-->
<!--            <div v-if="!videoFlag && showVideoPath" style="display: flex; flex-wrap: wrap; gap: 10px;">-->
<!--              <div v-for="(url, index) in showVideoPath.split(',')" :key="url"-->
<!--                   style="position: relative; flex: 1 1 calc(33.333% - 20px); min-width: 200px; margin-bottom: 10px;">-->
<!--                <video :src="`${videoUpload.url2}${url}`" style="width:90%; height: auto;border-radius: 0.5vw;"-->
<!--                       class="avatar video-avatar" controls>-->
<!--                  您的浏览器不支持视频播放-->
<!--                </video>-->
<!--                <img src="../../../assets/images/delete.png" @click.stop="handleVideoRemove(videoFileList[index])"-->
<!--                     style="width: 35px; height: 35px;position: absolute; top: 5px; left: 5px; cursor: pointer; z-index: 999;"-->
<!--                     alt="删除"/>-->
<!--              </div>-->
<!--            </div>-->
<!--            <el-progress :stroke-width="10" class="progressType" v-if="videoFlag" type="circle"-->
<!--                         :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>-->
<!--            <el-button style="z-index: 999;" class="video-btn" slot="trigger" size="small"-->
<!--                       type="primary">点击上传视频-->
<!--            </el-button>-->
<!--          </el-upload>-->

<!--        </el-form-item>-->
        <el-form-item label="上传图片" prop="courseUrl">
          <el-upload :action="uploadImgUrl" list-type="picture-card" multiple :on-success="handleSuccess"
                     :on-remove="handleRemove" :file-list="fileListImgs">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
<!--        <el-form-item label="上传文件" prop="courseUrl">-->
<!--          <el-upload v-model="diaForm.list" :limit="5" :on-exceed="handleExceed" :on-preview="handlePreview"-->
<!--                     :before-upload="beforeAvatarUpload" :on-remove="handleRemoveFile" :headers="reqHeaders"-->
<!--                     :on-success="onUploadSuccess" action="http://localhost:10031/common/upload"-->
<!--                     :file-list="resultFileList"-->
<!--                     list-type="picture" class="upload-files" accept=".png,.jpeg,.gif,.pdf,.jpg,.JPG">-->
<!--            <div class="upfile-btn">-->
<!--              <d2-icon name="document-upload" class="document-upload"/>-->
<!--              <div>点击上传+拖拽上传</div>-->
<!--            </div>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->


        <el-form-item style="position: relative ;">
          <el-input type="hidden" v-model="form.courseUrl" readonly class="noAlert" placeholder=""/>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subTxt">确 定</el-button>
        <el-button @click="editTxt = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加知识点" :visible.sync="addTxt" width="400px" append-to-body>
      <el-form ref="form" :model="form1" label-width="80px">
        <el-form-item style="position: relative ;" label="知识标题">
          <el-input v-model="txtName">
          </el-input>
        </el-form-item>
        <el-form-item style="position: relative ;" label="关系层级">
          <el-select v-model="level">
            <el-option label="一级标题" value="1" v-if="parentLevel < 1"></el-option>
            <el-option label="二级标题" value="2" v-if="parentLevel < 2"></el-option>
            <el-option label="三级标题" value="3" v-if="parentLevel < 3"></el-option>
            <el-option label="四级标题" value="4" v-if="parentLevel < 4"></el-option>
            <el-option label="五级标题" value="5" v-if="parentLevel < 5"></el-option>
            <el-option label="六级标题" value="6" v-if="parentLevel < 6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="position: relative ;" label="上级知识">
          <el-input v-model="parentName" disabled></el-input>
        </el-form-item>
        <el-form-item style="position: relative ;" label="与上级关系">
          <el-input v-model="relaTion" oninput="this.value = this.value.replace(/[^(\u4e00-\u9fa5A-Za-z)]/g, '')"
                    placeholder="仅限汉字或字母"></el-input>
        </el-form-item>
        <el-form-item style="position: relative ;" label="知识内容">
          <Editor v-if="addTxt" v-model="TxtValue"></Editor>
        </el-form-item>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTxtf">确 定</el-button>
        <el-button @click="addTxt = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import {addTemplate, listTemplate, delTemplate} from "@/api/system/titleTemplate"
import {
  addTxtC,
  deleteTxt,
  getFileList,
  getTxt,
  getTxtList,
  updateTxt,
  getAllTxtList,
  downInfo,
  getFileListNew, updateOpenDown, getAllFieldList, downInfoFile, getAllTxtListP, insertNode, reset
} from "@/api/system/file";
import Editor from '@/components/Editor/index.vue'
import {deletAllInfoNew, deleteDocTitleOnly} from "../../../api/system/file";
import {updateTemplate} from "../../../api/system/titleTemplate";

export default {
  components: {
    Editor
  },
  data() {
    return {
      templeteTitle:"创建新模板",
      // 模板选择相关数据
      templateDialog: {
        visible: false,
        title: "选择导入模板"
      },
      showPreview: false,
      levels: [{
        key: 'level1',
        label: '一级标题',
      },
        {
          key: 'level2',
          label: '二级标题',
        },
        {
          key: 'level3',
          label: '三级标题',
        },
        {
          key: 'level4',
          label: '四级标题',
        },
        {
          key: 'level5',
          label: '五级标题',
        },
        {
          key: 'level6',
          label: '六级标题',
        },
        {
          key: 'level7',
          label: '七级标题',
        },],
      titleOptions: [{
        id: '1',
        label: '一、',
        value: '一、',
      },
        {
          id: '2',
          label: '（一）',
          value: '（一）',
        },
        {
          id: '3',
          label: '（1）',
          value: '（1）',
        },
        {
          id: '4',
          label: '1.',
          value: '1.',
        },
        {
          id: '5',
          label: '1.1',
          value: '1.1',
        },
        {
          id: '6',
          label: '1.1.1',
          value: '1.1.1',
        },
        {
          id: '7',
          label: '1.1.1.1',
          value: '1.1.1.1',
        },
        {
          id: '8',
          label: '①',
          value: '①',
        }],
      titleOptions1: [{
        id: '1',
        label: '一、',
        value: '一、',
      },
        {
          id: '2',
          label: '（一）',
          value: '（一）',
        },
        {
          id: '3',
          label: '（1）',
          value: '（1）',
        },
        {
          id: '4',
          label: '1.',
          value: '1.',
        },
        {
          id: '5',
          label: '1.1',
          value: '1.1',
        },
        {
          id: '6',
          label: '1.1.1',
          value: '1.1.1',
        },
        {
          id: '7',
          label: '1.1.1.1',
          value: '1.1.1.1',
        },
        {
          id: '8',
          label: '①',
          value: '①',
        }],
      templateEditor: {
        visible: false,
        form: {
          id: null,
          name: '',
          styles: {
            1: {fontSize: 24, fontWeight: 'bold', color: '#000000'},
            2: {fontSize: 20, fontWeight: 'bold', color: '#000000'},
            3: {fontSize: 18, fontWeight: 'bold', color: '#000000'},
            4: {fontSize: 16, fontWeight: 'bold', color: '#000000'},
            5: {fontSize: 14, fontWeight: 'normal', color: '#000000'},
            6: {fontSize: 12, fontWeight: 'normal', color: '#000000'}
          },
          level1: '',
          level2: '',
          level3: '',
          level4: '',
          level5: '',
          level6: '',
          level7: '',
        }
      },
      templateRules: {
        name: [
          {required: true, message: '请输入模板名称', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ]
      },
      selectedTemplate: {
        firstTitle: "",
        secondTitle: "",
        thirdTitle: "",
        fourthTitle: "",
        fiveTitle:"",
        sixTitle:"",
        sevenTitle:""

      },
      customTemplates: [],
      currentTemplate: null,

      // 原有数据
      opendeletOly: false,
      deleteWord: "",
      parentId1: undefined,
      parentDocList: [],
      openList: false,
      fileAllList: [],
      value: true,
      diaForm: {
        desc: '',
        list: [],
      },
      videoFileList: [],
      isInputInvalid1: false,
      inputErrorMessage: '',
      isInputInvalid: false,
      inputErrorMessage1: '',
      oprnIno: false,
      oprnIno1: false,
      resultFileList: [],
      queryParams: {
        docTitle: ""
      },
      level1: undefined,
      showSearch: true,
      dialogImageUrl: '',
      dialogVisible: false,
      fileListImgs: [],
      fileListImgs1: [],
      //拿到当前环境的请求前缀
      videoUpload: {
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: "http://localhost:10031/system/fileManage/uploadVideo",
        url2: "http://localhost:10031",
      },
      uploadImgUrl: "http://localhost:10031/common/upload1",
      // uploadImgUrl:"http://127.0.0.1:10031/common/upload1",

      form: {},
      showVideoPath: "",
      uploadUrl: "",//你要上传视频到你后台的地址
      videoFlag: false, //是否显示进度条
      videoUploadPercent: "", //进度条的进度，
      isShowUploadVideo: false, //显示上传按钮
      prodectName: "",
      relaTion: "",
      parentId: undefined,
      parentName: "",
      txtList: [],
      level: "4",
      addTxt: false,
      txtId: null,
      txtName: "",
      editTxt: false,
      editUrl: "",
      TxtValue: "",
      fileId: undefined,
      fileList: [],
      // 用户模板参数
      muban: {
        open: false,
        title: "模板选择",
      },
      templates: [],
      // 用户导入参数
      upload: {
        tip: "准备上传文件",
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: {Authorization: "Bearer " + getToken()},
        url: "http://localhost:10031/system/fileManage/addFile"
        // url: "http://127.0.0.1:10031/system/fileManage/addFile"
      },
      upload1: {
        tip: "准备上传文件",
        open: false,
        title: "",
        oprnIno: false,
        isUploading: false,
        updateSupport: 0,
        headers: {Authorization: "Bearer " + getToken()},
        url: "http://localhost:10031/system/fileManage/insertRelationByFile"
        // url: "http://127.0.0.1:10031/system/fileManage/addFile"
      },
      fileDocxList: [],
      uploadAdd: {
        tip: "准备上传文件",
        open: false,
        title: "",
        isUploading: false,
        updateSupport: 0,
        headers: {Authorization: "Bearer " + getToken()},
        url: "http://localhost:10031/system/fileManage/addFileNew"
      },
      relationName: "",
      defaultProps: {
        children: 'level2',
        label: 'docTitle',
        docUrl: 'docUrl',
        docLevel: 'docLevel',
        id: 'id',
      },
      loading: false,
      parentLevel: 0,
    }
  },
  methods: {
    handleCancle() {
      this.templateEditor.visible = false;
      this.templateEditor.form.level1 = ""
      this.templateEditor.form.level2 = ""
      this.templateEditor.form.level3 = ""
      this.templateEditor.form.level4 = ""
      this.templateEditor.form.level5 = ""
      this.templateEditor.form.level6 = ""
      this.templateEditor.form.level7 = ""
      this.templateEditor.form.name = ""
      this.titleOptions = this.titleOptions1
    },
    handleSelected() {
      const option1 = this.templateEditor.form.level1;
      const option2 = this.templateEditor.form.level2;
      const option3 = this.templateEditor.form.level3;
      const option4 = this.templateEditor.form.level4;
      const option5 = this.templateEditor.form.level5;
      const option6 = this.templateEditor.form.level6;
      const option7 = this.templateEditor.form.level7;
      this.titleOptions = this.titleOptions.filter(option =>
        option.value !== option1 &&
        option.value !== option2 &&
        option.value !== option3 &&
        option.value !== option4 &&
        option.value !== option5 &&
        option.value !== option6 &&
        option.value !== option7
      );
      console.log(this.titleOptions)
    },
    // 模板相关方法
    handleImport() {
      this.templateDialog.visible = true;
      this.selectedTemplate = null;
      var data = {};
      listTemplate(data).then((res) => {
        console.log(res)
        this.templates = res;
      })
    },

    createNewTemplate() {
      // this.templateEditor.form = {
      //   id: Date.now(),
      //   name: '',
      //   styles: {
      //     1: { fontSize: 24, fontWeight: 'bold', color: '#000000' },
      //     2: { fontSize: 20, fontWeight: 'bold', color: '#000000' },
      //     3: { fontSize: 18, fontWeight: 'bold', color: '#000000' },
      //     4: { fontSize: 16, fontWeight: 'bold', color: '#000000' },
      //     5: { fontSize: 14, fontWeight: 'normal', color: '#000000' },
      //     6: { fontSize: 12, fontWeight: 'normal', color: '#000000' }
      //   }
      // };
      this.templateEditor.visible = true;

      this.$nextTick(() => {
        if (this.$refs.templateForm) {
          this.$refs.templateForm.clearValidate();
        }
      });
    },

    updatetemplate(row) {

      this.templateEditor.visible = true;
      this.templeteTitle = "修改模板信息"



      console.log(row)
      this.templateEditor.form.id = row.id

      //获取当前的模板信息
      this.templateEditor.form.name = row.name
      this.templateEditor.form.level1 = row.firstTitle
      this.templateEditor.form.level2 = row.secondTitle
      this.templateEditor.form.level3 = row.thirdTitle
      this.templateEditor.form.level4 = row.fourthTitle
      this.templateEditor.form.level5 = row.fiveTitle
      this.templateEditor.form.level6 = row.sixTitle
      this.templateEditor.form.level7 = row.sevenTitle



    },

    selectTemplate(template) {
      this.selectedTemplate = template;
    },

    saveTemplate() {
      console.log(this.templateEditor.form)
      if(this.templateEditor.form.id==null){
        var template = {
          "name": this.templateEditor.form.name,
          "firstTitle": this.templateEditor.form.level1,
          "secondTitle": this.templateEditor.form.level2,
          "thirdTitle": this.templateEditor.form.level3,
          "fourthTitle": this.templateEditor.form.level4,
          "fiveTitle": this.templateEditor.form.level5,
          "sixTitle": this.templateEditor.form.level6,
          "sevenTitle": this.templateEditor.form.level7,
        }
        addTemplate(template).then((res) => {
          this.handleImport();
        })
        this.templateEditor.visible = false;
        this.templateEditor.form.level1 = ""
        this.templateEditor.form.level2 = ""
        this.templateEditor.form.level3 = ""
        this.templateEditor.form.level4 = ""
        this.templateEditor.form.level5 = ""
        this.templateEditor.form.level6 = ""
        this.templateEditor.form.level7 = ""
        this.templateEditor.form.name = ""
        this.titleOptions = this.titleOptions1
      }else {
        var template = {
          "id":this.templateEditor.form.id,
          "name": this.templateEditor.form.name,
          "firstTitle": this.templateEditor.form.level1,
          "secondTitle": this.templateEditor.form.level2,
          "thirdTitle": this.templateEditor.form.level3,
          "fourthTitle": this.templateEditor.form.level4,
          "fiveTitle": this.templateEditor.form.level5,
          "sixTitle": this.templateEditor.form.level6,
          "sevenTitle": this.templateEditor.form.level7,
        }
        updateTemplate(template).then((res) => {
          this.handleImport();
        })
        this.templateEditor.visible = false;
        this.templateEditor.form.level1 = ""
        this.templateEditor.form.level2 = ""
        this.templateEditor.form.level3 = ""
        this.templateEditor.form.level4 = ""
        this.templateEditor.form.level5 = ""
        this.templateEditor.form.level6 = ""
        this.templateEditor.form.level7 = ""
        this.templateEditor.form.id = null
        this.templateEditor.form.name = ""
        this.titleOptions = this.titleOptions1

      }

    },

    confirmTemplate() {
      if (!this.selectedTemplate) {
        this.$message.warning('请先选择一个模板');
        return;
      }

      this.templateDialog.visible = false;
      this.currentTemplate = this.selectedTemplate;

      console.log(this.currentTemplate);


      this.$nextTick(() => {
        this.upload.title = "导入文档";
        this.upload.open = true;
      });
    },


    loadTemplatesFromStorage() {
      const savedTemplates = localStorage.getItem('documentTemplates');
      if (savedTemplates) {
        this.customTemplates = JSON.parse(savedTemplates);
      }
    },


    // 修改文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.oprnIno = false;
      console.log(file)


      this.$message.success('文档导入成功');
      this.getFileListInfo();
    },


    // 原有方法
    exportList() {
      this.download('system/fileManage/exportList', {
        ...this.queryParams
      }, `doc_${new Date().getTime()}.xlsx`)
    },
    async deletAllInfo() {
      //这是一键删除方法
      await deletAllInfoNew().then((res) => {
        console.log(res);
        this.getFileListInfo();
      })
    },
    exportAllContent() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出文件...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
        customClass: 'centered-loading'
      });

      // 准备导出数据
      var ff = [];
      var fileNameList = [];

      for (let c = 0; c < this.fileDocxList.length; c++) {
        let fileId = this.fileDocxList[c].id;
        let allData = this.getAllItemsWithChildren(this.fileList, fileId);

        if (allData.length === 0) {
          continue;
        }

        ff.push(allData);
        fileNameList.push(this.fileDocxList[c].fileName);
      }

      var aa = 0;
      for (let n = 0; n < ff.length; n++) {
        // 显示加载指示器
        this.loading = true;

        // 发送请求到后端
        this.$axios.post('http://localhost:10031/system/fileManage/exportAll', ff[n], {
          headers: {Authorization: "Bearer " + getToken()},
        })
          .then((res) => {
            const link = document.createElement('a');
            link.href = res.data.url;
            document.body.appendChild(link);
            link.setAttribute('download', fileNameList[n]);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(res.data.url);
            // 创建临时URL和<a>标签触发下载
            // const url = window.URL.createObjectURL(new Blob([response.data]));
            // const link = document.createElement('a');
            // link.href = url;
            // link.setAttribute('download', fileNameList[n]); // 文件名
            // document.body.appendChild(link);
            // link.click();
            aa = aa + 1;
            if (aa == ff.length) {
              this.$message.success('文件导出成功');
              loading.close();
            }
            // 清除加载指示器
            this.loading = false;
          })
          .catch(error => {
            // 错误处理
            console.error('导出失败:', error.response ? error.response.data : error.message);
            this.$message.error('导出失败，请稍后再试或联系管理员');
            loading.close();
            // 清除加载指示器
            this.loading = false;
          });
      }
    },
    getAllItemsWithChildren(items, fileId, collected = []) {
      items.forEach(item => {
        // 如果知识点属于当前文件或它的父节点已经被收集，则收集它
        if (item.fileId === fileId || collected.some(collectedItem => collectedItem.id === item.docParentId)) {
          // 避免重复收集
          if (!collected.some(collectedItem => collectedItem.id === item.id)) {
            collected.push({
              id: item.id,
              docTitle: item.docTitle,
              docLevel: item.docLevel,
              fileId: item.fileId,
              docParentId: item.docParentId,
            });

            // 递归处理子项
            if (item.level2 && item.level2.length > 0) {
              this.getAllItemsWithChildren(item.level2, fileId, collected);
            }
          }
        }
      });
      return collected;
    },
    openAllList() {
      this.openList = true;

      getAllFieldList().then((res) => {
        this.fileAllList = res;
      })
    },
    deleVideo() {
      this.showVideoPath = ""
    },
    downLoad(url, name) {
      var data = {
        docUrl: url,
        fileName: name
      }
      downInfo(data).then((response) => {
        console.log(response);
        const link = document.createElement('a');
        link.href = response;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(response);
      })
    },
    // downLoadMu() {
    //   const link = document.createElement('a');
    //   link.href = "/file/gyxqx.docx";
    //   document.body.appendChild(link);
    //   link.click();
    //   document.body.removeChild(link);
    //   window.URL.revokeObjectURL("/file/gyxqx.docx");
    // },
    downLoadFile(url, name) {
      var data = {
        docUrl: url,
        fileName: name
      }
      downInfoFile(data).then((response) => {
        console.log(response);
        const link = document.createElement('a');
        link.href = response;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(response);
      })
    },
    updateInfo() {
      var data = {
        openDown: 0
      }
      if (this.value) {
        data.openDown = 1;
      }

      updateOpenDown(data).then((res) => {
        console.log(res);
      })
    },
    deleteOnly() {
      var data = {
        word: this.deleteWord
      }
      deleteDocTitleOnly(data).then((res) => {
        console.log(res);
        this.opendeletOly = false;
        this.deleteWord = "";
      })


    },
    // 限制上传个数不超过5个
    handleExceed(files, fileList) {
      if (fileList && fileList.length == 5) {
        this.$message.warning('XXXX');
      }
    },
    handlePreview(file) {
      console.log(file);
    },
    // 限制不超过30M
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 30;
      if (!isLt5M) {
        this.$message.error('XXXX');
      }
      return isLt5M;
    },
    // 移除文件
    handleRemoveFile(file, fileList) {
      if (!file) {
        return;
      }
      const index = this.resultFileList.findIndex(item => item.uid === file.uid);
      this.resultFileList.splice(index, 1);
    },
    // 设置请求头里面的token 和 userId
    reqHeaders() {
      return {
        Authorization: "Bearer " + getToken()
      };
    },
    // 上传成功，返回
    onUploadSuccess(response, file, fileList) {
      if (response && response.code === 200) {
        if (response) {
          this.prodectName = response.url
          console.log(this.prodectName);
          this.resultFileList.push({
            url: response.url,
            name: response.originalFilename,
            uid: file.uid
          });
          this.dealPDF();
          setTimeout(() => {
            this.dealPDF();
          }, 1);
        }
      } else if (response && response.msg) {
        console.log('upload failed', response.msg);
      }
    },
    // 上传的服务器的地址
    dealPDF() {
      var liElements = document.querySelectorAll('ul.el-upload-list.el-upload-list--picture li.el-upload-list__item');
      liElements.forEach(function (liElement) {
        var aElement = liElement.querySelector('a.el-upload-list__item-name');
        if (aElement && aElement.textContent.includes('.pdf')) {
          var imgElement = liElement.querySelector('img.el-upload-list__item-thumbnail');
          if (imgElement) {
            imgElement.src = ''; // 替换为你想要的新图片的URL
          }
        }
      });
    },


    handleQuery() {
      if (this.queryParams.docTitle == "") {
        var data = {}
        getFileList(data).then((res) => {
          this.fileList = res.data
        })
      } else {
        var data = {
          'docTitle': this.queryParams.docTitle,
        }
        this.getFileListInfo();
      }
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('文件上传成功');
      console.log(file)
      // 假设上传成功后服务器返回的是图片url
      this.fileListImgs1.push(file.response.url);
      var obj = {};
      obj.url = file.response.url;
      this.fileListImgs.push(obj);
      console.log(this.fileListImgs);
    },
    handleError(err, file, fileList) {
      this.$message.error('文件上传失败');
    },
    handleRemove(file, fileList) {
      // 移除文件的同时也移除对应的展示图片
      const index = this.fileListImgs1.indexOf(file.url);
      if (index > -1) {
        this.fileListImgs.splice(index, 1);
        this.fileListImgs1.splice(index, 1);
      }
    },
    beforeUploadVideo(file) {
      const isLt1024M = (file.size / 1024 / 1024) < 1024;
      this.form.videoSize = file.size / 1024 / 1024;
      //判断是不是MP4格式视频
      if (['video/mp4'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式');
        return false;
      }
      //单个视频大小限制在1024M以内
      if (!isLt1024M) {
        this.$message.error('上传视频大小不能超过1024MB哦!');
        return false;
      }
      return true;
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    updateCourseUrl() {
      this.form.courseUrl = this.showVideoPath;
      console.log('Updated courseUrl:', this.form.courseUrl);
    },

    // 上传成功回调
    handleVideoSuccess(response, file, fileList) {
      try {
        // 确保res是一个非空字符串
        if (!response || typeof response !== 'string') {
          this.$message.error('视频上传失败，请检查服务器响应');
          return;
        }
        const videoUrl = response.trim();
        if (videoUrl === '') {
          this.$message.error('收到无效的视频URL，请检查服务器响应');
          return;
        }
        // 检查重复
        if (this.videoFileList.some(video => video.url === videoUrl)) {
          this.$message.warning('该视频已存在于列表中');
          return;
        }
        this.videoFileList.push({url: videoUrl, name: file.name});
        this.showVideoPath = this.videoFileList.map(f => f.url).join(',');
        this.updateCourseUrl();
        this.$message.success('视频上传成功');
        console.log('Updated videoFileList:', this.videoFileList);
        console.log('Updated showVideoPath:', this.showVideoPath);
        this.$nextTick(() => {
          this.videoFlag = false;
        });
      } catch (error) {
        this.$message.error('处理上传响应时发生错误：' + error.message);
        console.error('Error in handleVideoSuccess:', error);
      }
    },
    handleVideoRemove(video) {
      if (!video) return;
      // 使用uid唯一标识符进行匹配
      const index = this.videoFileList.findIndex(item => item.uid === video.uid);
      if (index > -1) { // 更新UI
        this.videoFileList.splice(index, 1);
        this.showVideoPath = this.videoFileList.map(f => f.url).join(',');
        this.updateCourseUrl();
      }
    },


    deleteTxt(row) {
      console.log(row)
      let data = {
        id: row.id,
        url: row.docUrl
      }
      this.$modal.confirm('是否确认删除"' + row.docTitle + '"的数据项？').then(function () {
        return deleteTxt(data);
      }).then(() => {
        this.getFileListInfo()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

      // (data).then((res) => {
      //   if (res.code == 200) {
      //     this.$message.success("删除成功")
      //     this.getFileListInfo()
      //   }
      // })
    },
    addTxtf() {
      let data = {
        fileId: this.fileId,
        txtName: this.txtName,
        TxtValue: this.TxtValue,
        docParentId: this.parentId,
        docLevel: this.level,
        relation: this.relaTion,
      }
      addTxtC(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("新增成功")
          this.addTxt = false
          this.getFileListInfo();
          this.fileId = undefined;
          this.txtName = "";
          this.TxtValue = "";
          this.parentId = undefined;
          this.level = undefined;
          this.relaTion = "";
        }
      })
    },
    openAddTxt(row) {
      console.log(row)
      if (row == 0) {
        this.addTxt = true
        this.parentName = "气象海洋保障信息服务体系";
        this.fileId = 0;
        this.parentId = 0;
        this.parentLevel = 0
      } else {
        getTxtList(row.id).then((res) => {
          this.txtList = res.data
          this.addTxt = true
          this.parentId = row.id;
          this.parentName = row.docTitle;
          this.fileId = row.fileId;
          this.parentLevel = row.docLevel
        })
      }

    },
    handleDelete(id) {
      delTemplate(id).then((res) => {
        this.handleImport();
      })
    },
    selectChanged(value) {
      console.log(value);
      this.parentId1 = value;
    },
    subTxt() {
      var imgs = "";
      console.log(this.fileListImgs1);
      if (this.fileListImgs1.length != 0) {
        for (let a = 0; a < this.fileListImgs1.length; a++) {
          if (a == 0) {
            imgs = imgs + this.fileListImgs1[a];
          } else {
            imgs = imgs + "," + this.fileListImgs1[a];
          }
        }
      }
      console.log(imgs);
      let data = {
        url: this.editUrl,
        txtValue: this.TxtValue,
        txtName: this.txtName,
        id: this.txtId,
        videoUrl: this.form.courseUrl,
        imgs: imgs,
        prodectName: this.prodectName,
        parentInd: this.parentId1,
        realtion: this.relationName,
        docLevel: this.level1
      }
      console.log(data);
      updateTxt(data).then((res) => {
        this.editTxt = false
        if (res.code == 200) {
          this.$message.success("修改成功")
          this.getFileListInfo();
          this.fileListImgs = [];
          this.fileListImgs1 = [];
          this.editUrl = "";
          this.TxtValue = "";
          this.txtName = "";
          this.txtId = undefined;
          this.form.courseUrl = "";
          this.prodectName = "";
          this.showVideoPath = "";
          this.resultFileList = [];
        }
      })
    },
    editDoc(row) {
      console.log(row);
      this.txtId = row.id;
      this.editUrl = row.docUrl;
      this.txtName = row.docTitle;
      this.relationName = row.realtionName;
      this.parentId1 = row.docParentId;
      this.level1 = row.docLevel + "";
      this.videoFileList = [];
      this.showVideoPath = "";
      if (row.docVideo != null) {
        ///profile/upload/2024/08/29/锋面气旋_20240829153841A018.mp4
        let videoArr = row.docVideo.split(',');
        videoArr.forEach(videoUrl => {
          const ff = videoUrl.split('/');
          const gg = ff[ff.length - 1];
          const nn = gg.split('_')
          console.log(nn);

          this.videoFileList.push({url: videoUrl, name: nn});
          this.showVideoPath += (this.showVideoPath ? ',' : '') + videoUrl;
        })
      }
      if (row.docImgs != null) {
        this.fileListImgs = [];
        this.fileListImgs1 = [];
        let imgArr = row.docImgs.split(',')
        imgArr.forEach(item => {
          var obj = {};
          // /dev-api/profile/upload/2024/08/29/0锋面气旋_20240829153841A018.mp4
          obj.url = item;
          this.fileListImgs.push(obj);
          this.fileListImgs1.push(item);
        })
      } else {
        this.fileListImgs = [];
        this.fileListImgs1 = [];
      }


      console.log(this.fileListImgs);
      getAllTxtListP(row.docLevel).then((res) => {
        console.log(res);
        this.parentDocList = res.data;
        if (this.parentId1 == 0) {
          this.parentDocList.push({id: 0, docTitle: "气象海洋保障信息服务体系"})
        }

        this.parentDocList
      })
      getTxt(row.docUrl).then((res) => {
        this.editTxt = true
        this.TxtValue = res
      })
    },
    changeLevel() {
      getAllTxtListP(this.level1).then((res) => {
        console.log(res);
        this.parentDocList = res.data;
        this.parentDocList.push({id: 0, docTitle: "气象海洋保障信息服务体系"})
      })
    },
    getFileListInfo(data) {
      const loading = this.$loading({
        lock: true,
        text: '正在更新文件列表...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
        customClass: 'centered-loading'
      });

      if (this.queryParams.docTitle == "") {
        var data = {}
        getFileListNew(data).then((res) => {
          console.log(res);
          this.fileList = res.data;
          this.fileDocxList = res.files;
          if (res.data[0] && res.data[0].openDowload == 0) {
            this.value = false
          } else {
            this.value = true
          }
          loading.close();
        }).catch(() => loading.close());
      } else {
        var data = {
          'docTitle': this.queryParams.docTitle,
        }
        getFileListNew(data).then((res) => {
          console.log(res);
          this.fileList = res.data;
          loading.close();
        }).catch(() => loading.close());
      }
    },


    handleImportRelation() {
      this.upload1.title = "导入文献";
      this.upload1.open = true;
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    submitFileFormR() {
      this.$refs.uploadR.submit();
    },

    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      this.oprnIno = true;
    },
    handleFileUploadProgressRelation(event, file, fileList) {
      this.upload1.isUploading = true;
      this.upload1.oprnIno = true;

    },

    handleFileSuccessRelation(response, file, fileList) {
      this.upload1.open = false;
      this.upload1.isUploading = false;
      this.$refs.uploadR.clearFiles();
      this.$message.success('导入补充文件成功');
      this.getFileListInfo()
      this.upload1.oprnIno1 = false;
    },

    handleImport1() {
      this.uploadAdd.title = "新增文件";
      this.uploadAdd.open = true;
      getAllTxtList().then((res) => {
        this.txtList = res.data;
      })
    },
    submitFileForm1() {
      console.log(this.parentId);
      var aa = 0;
      if (this.relaTion == '') {
        this.isInputInvalid = true;
        this.inputErrorMessage1 = "请填写关系"
        aa = 1;
      }
      if (this.parentId == undefined) {
        this.isInputInvalid1 = true;
        this.inputErrorMessage = "请选择上级"
        aa = 2;
      }
      if (aa == 0) {
        this.$refs.upload1.submit();
      }
    },
    handleFileUploadProgress1(event, file, fileList) {
      this.uploadAdd.isUploading = true;
      this.oprnIno1 = true;
      upload.tip = "正在处理文件"
    },
    // 文件上传成功处理
    handleFileSuccess1(response, file, fileList) {
      this.uploadAdd.open = false;
      this.uploadAdd.isUploading = false;
      this.$refs.upload1.clearFiles();
      this.$message.success('导入补充文件成功');
      this.getFileListInfo()
      this.oprnIno1 = false;
    },
    async reset() {
      this.loading = true;
      try {
        await this.deletAllInfo()
        await reset();
        this.getFileListInfo(); // 获取最新列表信息
      } catch (error) {
        console.error('重置失败:', error);
      } finally {
        this.loading = false;
      }
    },
  },
  mounted() {
    this.getFileListInfo()
    this.loadTemplatesFromStorage();

    var socket = new WebSocket('ws://localhost:10031/system/websocket/1');
    let that = this
    socket.onmessage = function (event) {
      that.upload.tip = event.data
    }
  },
}
</script>
<style>
.centered-loading .el-loading-spinner {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 55%;
  left: 50%;
}

.centered-loading .el-loading-spinner .el-loading-text {
  font-size: 18px;
  margin-top: 10px;
}

.centered-loading .el-loading-spinner .el-icon-loading {
  font-size: 35px;
  -webkit-animation: loading-rotate 3s linear infinite;
  animation: loading-rotate 3s linear infinite;
}

.success-message {
  z-index: 3000 !important;
  /* 根据实际情况调整 */
}

.error-message {
  color: red;
}

.el-tree-node__content {
  height: 2vw;

}

.tree-head {
  background-color: #f8f8f8;
  line-height: 2vw;
  height: 2vw;
  border: 1px solid #dcdee3;
  border-bottom: none;
  display: flex;
  font-size: 1vw;
  color: #606266;
  padding-right: 8px;
  margin-top: 1%;
}

.tree-head-check {
  width: 38px;
  text-align: right;
}

.tree-head-one,
.tree-head-two,
.tree-head-three,
.tree-head-four,
.tree-head-five,
.tree-head-six,
.tree-head-seven {
  flex: 1;
}

.tree-head-one {
  flex: 0.3;
}

.tree-head-one {
  padding-left: 1.1vw;
}

.tree-custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1vw;
  padding-right: 1vw;
}

.el-tree-node__expand-icon {
  font-size: 1vw;
  color: #000000;
}

.template-list::v-deep .el-table td,
.template-list::v-deep .el-table th {
  font-size: 1vw !important;
  color: #67C23A;
}

</style>
