<!-- 资料库 -->
<template>
  <div class="app-container">

    <div class="sidebar">
      <!--<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>-->


      <!--<v-jstree :data="data"-->
      <!--          :allow-batch="false"-->
      <!--          :multiple="false"-->
      <!--          :whole-row="false"-->
      <!--          value-field-name="id"-->
      <!--          text-field-name="derectoryName"-->
      <!--          @item-click="itemClick"-->
      <!--&gt;-->


      <!-- draggable @item-drop="itemDrop"-->
      <v-jstree ref="tree" :data="data" :item-events="itemEvents"

      >

        <!--@contextmenu.prevent="$refs.ctx.open($event, _.vm)"-->
        <template slot-scope="_">
          <div style="display: inherit; width: 200px"
               @click.ctrl="itemCtrlClick(_.vm, $event)"
               @click.exact="itemClick(_.vm, $event)"
               @contextmenu.prevent="onContextmenu(_.vm, $event)"
          >
            <i v-if="!_.model.loading" :class="_.vm.themeIconClasses" role="presentation"></i>
            {{ _.model.text }}
            <!--
                       <button style="border: 0px; background-color: transparent; cursor: pointer;" @click="customItemClick(_.vm, _.model, $event)"><i class="fa fa-remove"></i></button>

            -->
          </div>
        </template>

      </v-jstree>
    </div>

    <div class="content">

      <card-table :del-prop="['createTime']" :loading="loading" :modalData="databaseList" :searchParams="queryParams"
                  :tableSearch="true" labelWidth="120px" @columnSearch="handleQuery" @pagination="getList"
                  @resetList="resetQuery"
      >


        <template #operations="{selections}">
          <el-button v-hasPermi="['train:database:add']" icon="el-icon-plus" plain size="mini" type="primary"
                     @click="handleAdd"
          >{{ $t('common.add') }}
          </el-button>
          <!--<el-button  v-hasPermi="['train:database:add']" icon="el-icon-plus" plain size="mini" type="primary"-->
          <!--           @click="handleAdd"-->
          <!--&gt;设置可见范围-->
          <!--</el-button>-->
        </template>

        <template #default="{ list }">
          <el-table-column align="center" label="No" type="index" width="50"/>
          <!--文件名-->
          <Column :label="$t('database.fileName')" :show-overflow-tooltip="true" prop="fileName" width="250"/>
          <!--文件类型-->
          <Column :label="$t('database.fileType')" :show-overflow-tooltip="true" prop="fileType"/>
          <!--可见范围-->
          <Column :label="$t('database.visibleRange')" :show-overflow-tooltip="true" prop="visibleRange"/>
          <!--创建时间-->
          <Column :label="$t('common.createTime')" :show-overflow-tooltip="true" prop="createTime"/>
          <!--创建人-->
          <Column :label="$t('common.createBy')" :show-overflow-tooltip="true" prop="createByName"/>
          <!--更新时间-->
          <Column :label="$t('common.updateTime')" :show-overflow-tooltip="true" prop="updateTime"/>
          <!--更新人-->
          <Column :label="$t('common.updateBy')" :show-overflow-tooltip="true" prop="updateByName"/>
          <!--简介-->
          <Column :label="$t('database.briefIntroduction')" :show-overflow-tooltip="true" prop="briefIntroduction"/>
          <!--操作-->
          <Column :label="$t('common.operate')" :min-width="150" :showSearch="true" align="center" fixed="right"
                  search-type="operate"
          >
            <template #default="{ row }">
              <!--查看-->
              <el-button v-hasPermi="['train:database:edit']" icon="el-icon-edit" size="mini" type="text"
                         @click="handleUpdate(row)"
              >{{ $t('common.view') }}
              </el-button>

              <el-dropdown v-hasPermi="['train:database:catalog', 'train:database:remove']" size="mini"
                           @command="(command) => handleCommand(command, row)"
              >
                <el-button icon="el-icon-d-arrow-right" size="mini" type="text">{{ $t('common.more') }}</el-button>

                <el-dropdown-menu slot="dropdown">
                  <!--修改-->
                  <el-dropdown-item v-hasPermi="['train:database:catalog']" command="handleCatalog"
                                    icon="el-icon-edit"
                  >调整目录
                  </el-dropdown-item>
                  <!--删除-->
                  <el-dropdown-item v-hasPermi="['train:database:remove']" command="handleDelete"
                                    icon="el-icon-delete"
                  >{{ $t('common.delete') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </template>
          </Column>

        </template>

      </card-table>


      <!--<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="资料名" prop="fileName">
          <el-input
            v-model="queryParams.fileName"
            placeholder="请输入资料名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="目录ID" prop="directoryId">
          <el-input
            v-model="queryParams.directoryId"
            placeholder="请输入目录ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['train:database:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['train:database:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['train:database:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['train:database:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="databaseList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="资料名" align="center" prop="fileName" />
        <el-table-column label="资料类型" align="center" prop="fileType" />
        <el-table-column label="目录ID" align="center" prop="directoryId" />
        <el-table-column label="可见范围(角色) *可以复选、以[;]分隔" align="center" prop="visibleRange1" />
        <el-table-column label="可见范围(区域) *可以复选、以[;]分隔" align="center" prop="visibleRange2" />
        <el-table-column label="可见范围(代理商) *可以复选、以[;]分隔" align="center" prop="visibleRange3" />
        <el-table-column label="简介" align="center" prop="briefIntroduction" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['train:database:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['train:database:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

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

    <!-- 添加或修改资料库对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="40vw">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="上传" prop="remark">
          <FileUpload v-model="form.fileList" :buttonText="$t('common.uploadFile')" :class="{ 'upload': false }"
                      :controllerUrl="controllerUrl"
                      :disabled="false" :fileType="fileType" :isShowTip="false"
          >
          </FileUpload>
        </el-form-item>
        <el-form-item label="简介" prop="briefIntroduction">
          <el-input v-model="form.briefIntroduction" placeholder="briefIntroduction" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--<vue-context id="testingctx" ref="ctx" @ctx-open="onCtxOpen">-->
    <!--  <li class="ctx-item" @click="addFile">New file</li>-->
    <!--  <li class="ctx-item" @click="addFolder">New folder</li>-->
    <!--  <li class="ctx-item" @click="removeNodes(editingNode)">Delete</li>-->
    <!--</vue-context>-->
  </div>
</template>

<script>
import {
  addDatabase,
  createDirectory,
  delDatabase,
  getDatabase,
  getDirectoryTree,
  listDatabase,
  updateDatabase
} from '@/api/train/database'
import VJstree from 'vue-jstree'
import FileUpload from '@/components/FileUpload'

const RootNodeValue = 'Root'

export default {
  name: 'Database',
  components: {
    VJstree, FileUpload
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 资料库表格数据
      databaseList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileName: null,
        fileType: null,
        directoryId: null,
        visibleRange1: null,
        visibleRange2: null,
        visibleRange3: null,
        briefIntroduction: null,

        curNodeId: null
      },
      // 表单参数
      form: {},
      fileType: ['jpg', 'png', 'jpeg', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'txt', 'pdf'],
      // 表单校验
      rules: {},
      // data: [],
      controllerUrl: '',

      // data: [
      //   {
      //     "derectoryName": "And wholerow selection",
      //     id: 1,
      //     children: [
      //       {
      //         "derectoryName": "Same but with checkboxes",
      //         // "opened": true,
      //         "children": [
      //           {
      //             "derectoryName": "custom icon",
      //           },
      //           {
      //             "derectoryName": "initially open",
      //           },
      //           {
      //             "derectoryName": "custom icon",
      //           },
      //           {
      //             "derectoryName": "disabled node",
      //           }
      //         ]
      //       },
      //     ]
      //   },
      //
      // ],

      fileIdx: 0,
      filesToAdd: 1,
      folderIdx: 3,
      searchText: '',
      editingItem: {},
      editingNode: null,
      itemEvents: {
        mouseover: function() {
          console.log('mouseover')
        }
      },
      data: [
//         {
//           "text": "Root",
//           "value": RootNodeValue,
//           "dragDisabled": true,
// //          "disabled": true,
//           "isLeaf": true,
//           "opened": true,  //does not work
//           "isfolder": true,
//           "icon": "fa fa-warning icon-state-danger",
//           "children": [
//             {
//               "text": "Folder1",
//               "isfolder": true
//             },
//             {
//               "text": "Folder2",
//               "isfolder": true
//             },
//             {
//               "text": "Folder3",
//               "isfolder": true
//             }
//           ]
//         }
      ]

    }
  },
  created() {
    this.getDirectoryTree()
    this.getList()

    // window.addEventListener('keydown', this.keyDownListener)
  },

  destroyed() {
    // window.removeEventListener('keydown', this.keyDownListener);
  },

  methods: {
    rowClick(node, event) {
      console.log('event:', event)
      console.log('node:', node)
      this.editingNode = node
      this.editingItem = node.model
      console.log(node.model.text + ' clicked !')
      this.deselectNodeChildren(this.$refs.tree)
      node.model.selected = true
      event.stopPropagation()
      this.getList()
    },

    onContextmenu(node, event) {

      this.rowClick(node, event)

      this.$contextmenu({
        items: [
          // {
          //   label: "添加文件",
          //   onClick: () => {
          //     alert('addFile')
          //     this.addFile();
          //   },
          //   divided: true
          // },
          {
            label: '添加文件夹',
            onClick: () => {
              this.addFolder()
            },
            icon: 'el-icon-folder-add'
          },
          // {label: "重新加载(R)", divided: true, icon: "el-icon-refresh"},
          {
            label: '删除文件夹',
            onClick: () => {
              this.removeNodes()
            },
            icon: 'el-icon-delete'
          }
          // {label: "打印(P)...", icon: "el-icon-printer"},
          // {label: "投射(C)...", divided: true},
          // {
          //   label: "使用网页翻译(T)",
          //   divided: true,
          //   minWidth: 0,
          //   children: [{label: "翻译成简体中文"}, {label: "翻译成繁体中文"}]
          // },
          // {
          //   label: "截取网页(R)",
          //   minWidth: 0,
          //   children: [
          //     {
          //       label: "截取可视化区域",
          //       onClick: () => {
          //         this.message = "截取可视化区域";
          //         console.log("截取可视化区域");
          //       }
          //     },
          //     {label: "截取全屏"}
          //   ]
          // },
          // {label: "查看网页源代码(V)", icon: "el-icon-view"},
          // {label: "检查(N)"}
        ],
        event,
        //x: event.clientX,
        //y: event.clientY,
        customClass: 'custom-class',
        zIndex: 3,
        minWidth: 50
      })
      return false
    },

    // btnKeyDown: function (event) {
    //   alert("BtnKeyDown")
    // },
    keyDownListener: function(event) {
      if (event.keyCode === 46) //del
      {
        this.removeNodes()
      }
    },
//     onCtxOpen(node) {
//       this.editingNode = node
//       this.editingItem = node.model
// //       alert('menu open ' + node.model.text)
// //        this.menuData = locals
//     },
    itemClick(node, event) {
      this.rowClick(node, event)
    },
    itemCtrlClick: function(node, e) {
      console.log('ctrl selected')
      node.model.selected ^= true
      if (node.model.selected) {
        node.model.opened = false
        this.deselectNodeChildren(node)
        node.model.selected = true
      }
      e.stopPropagation()
//      alert("ctrl click : " + node.model.text)
    },
    deselectNodeChildren: function(parent) {
      this.$refs.tree.handleRecursionNodeChilds(parent, node => {
        // console.log('node:', node)
        if (node.model !== undefined) {
          console.log('node.model:', node.model)
          let prevsel = node.model.selected
          node.model.selected = false

//         return true
          return node.model.opened || prevsel
        }
      })
      console.log('data:', this.data)
      // this.$nextTick(() => {
      //   this.$forceUpdate()
      // })
    },
    sortBy: function(attr, rev) {
      if (rev == undefined) {
        rev = 1
      } else {
        rev = (rev) ? 1 : -1
      }
      return function(a, b) {
        let bd = b.isfolder
        if (a.isfolder === bd) {
          a = a[attr]
          b = b[attr]
          if (a < b) {
            return rev * -1
          }
          if (a > b) {
            return rev * 1
          }
          return 0
        } else {
          return (bd === true) ? 1 : -1
        }
      }
    },
    // itemDrop: function (node, item, draggedItem) {
    //   this.deselectNodeChildren ( this.$refs.tree )
    //   draggedItem.selected =  true
    //   if (item.isfolder === true) {
    //     item.children.sort(this.sortBy('text', true))
    //   } else {
    //     this.addNode(node, draggedItem, true)
    //     item[this.$refs.tree.childrenFieldName].splice(0, 1)
    //   }
    //   console.log(node.model.text + ' drop !')
    // },
    async removeNodes() {
      // let cntrFiles = 0
      let cntrFolders = 0
      this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, node => {
        if (node.model !== undefined && node.model.selected && node.model.value !== RootNodeValue) {
          // if (node.model.isfolder === true) {
          this.$refs.tree.handleRecursionNodeChilds(node, fnode => {
            // if (fnode.model.isfolder === true)
            //   cntrFolders++
            // else
            //   cntrFiles++
            cntrFolders++
          })
          return false
          // } else {
          //   cntrFiles++
          // }
        }
      })
      if (cntrFolders === 0) {
        return
      }
      alert('will be deleted, folders : ' + cntrFolders)
      try {
        await this.$modal.confirm('是否确认删除资料库编号为"' + cntrFolders + '"的数据项？');
        // await delDatabase(ids);

        this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, node => {
          if (node.model !== undefined && node.model.selected) {
            this.removeNode(node)
            return node.model.opened
          }
        })

        // this.getList();
        this.$modal.msgSuccess('删除成功');
      } catch (error) {
        // 可以在这里处理异常，如果有需要的话
      }




    },
    removeNode: function(node) {
//    alert("RemoveNode")

      if (node !== undefined) {
        let item = node.model
        if (item.id !== undefined) {
          if (item.value !== RootNodeValue) {
            let index = node.parentItem.indexOf(item)
            node.parentItem.splice(index, 1)
          } else {
            item.selected = false
          }
        }
      }
    },
    addNode: function(node, newItemData, notDeselect) {
      if (this.editingItem.id !== undefined) {
        if (notDeselect === undefined) {
          this.deselectNodeChildren(this.$refs.tree)
        }
        newItemData.selected = true
        let item = node.model
        let parentItem
        if (item.isfolder === true) {
          item.addChild(newItemData)
          item.children.sort(this.sortBy('text', true))
        } else {
          item.addBefore(newItemData, node)
          node.parentItem.sort(this.sortBy('text', true))
        }

      }
    },
    getFileData: function() {
      this.fileIdx += 1
      return {
        text: 'File' + this.fileIdx,
        value: 'File' + this.fileIdx,
//           dropDisabled: true,
        icon: 'fa fa-warning icon-state-danger'
      }
    },
    addFile: function(node) {
      if (this.editingItem.id !== undefined) {
        this.addNode(this.editingNode, this.getFileData())
      }
    },
    addFolder: function() {
      if (this.editingItem.id !== undefined) {
        // this.folderIdx += 1
        // let newItemData = {
        //   text: "Folder" + this.folderIdx,
        //   value: "Folder" + this.folderIdx,
        //   isfolder: true
        // }
        // console.log("editingNode:", this.editingNode)
        // this.addNode(this.editingNode, newItemData)

        this.$prompt('请输入文件夹名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputPattern: /^[^\\/?%*:|"<>]+$/,
          inputErrorMessage: '文件夹名字非法'
        }).then(async({ value }) => {
          // this.$message({
          //   type: 'success',
          //   message: '文件夹名字: ' + value
          // });
          const param = {
            derectoryName: value,
            superDirectory: this.editingItem.value
          }
          await this.createDirectory(param)
          this.getDirectoryTree()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      }
    },

    // 添加文件夹
    async createDirectory(param) {
      const response = await createDirectory(param)
    },

    inputKeyUp: function() {
      var text = this.searchText
      const patt = new RegExp(text)
      this.$refs.tree.handleRecursionNodeChilds(this.$refs.tree, function(node) {
        if (text !== '' && node.model !== undefined) {
          const str = node.model.text
          if (patt.test(str)) {
            node.$el.querySelector('.tree-anchor').style.color = 'red'
          } else {
            node.$el.querySelector('.tree-anchor').style.color = '#000'
          } // or other operations
        } else {
          node.$el.querySelector('.tree-anchor').style.color = '#000'
        }
      })
    },
    fillData: function() {
      if (this.editingItem.id !== undefined) {
        this.$refs.tree.handleRecursionNodeChilds(this.editingNode, node => {
          if (node.model !== undefined && node.model.isfolder === true && node.model.value !== RootNodeValue) {
//            this.editingItem = node.model
//            this.editingNode = node
            for (var i = 0; i < this.filesToAdd; i++) {
              this.addNode(node, this.getFileData(), true)
            }
          }
        })
      }
    },

//     itemClick(node, item, e) {
//       console.log(node)
//       console.log(item)
//       console.log('e:', e)
//       console.log(node.model.derectoryName + ' clicked !')
//
//       this.curFolderId = node.model.id
//
//       // TODO
//       this.getList();
//     },
//
//     itemCtrlClick: function(node, e) {
//       node.model.selected ^=  true
//       if ( node.model.selected ) {
//         node.model.opened = false
//         this.deselectNodeChildren ( node )
//         node.model.selected = true
//       }
//       e.stopPropagation()
// //      alert("ctrl click : " + node.model.text)
//     },
//
//     onCtxOpen(node) {
//       this.editingNode = node
//       this.editingItem = node.model
// //       alert('menu open ' + node.model.text)
// //        this.menuData = locals
//     },

    getDirectoryTree() {
      getDirectoryTree().then(response => {
        this.data = response.data
      })
    },

    /** 查询资料库列表 */
    async getList() {
      this.loading = true
      const param = {
        ...this.queryParams,
        // directoryId: this.curFolderId,
        directoryId: this.editingItem.value
      }
      try {
        const response = await listDatabase(param)
        this.databaseList = response.rows
        this.total = response.total
      } finally {
        this.loading = false
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fileName: null,
        fileType: null,
        directoryId: null,
        visibleRange1: null,
        visibleRange2: null,
        visibleRange3: null,
        briefIntroduction: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        remark: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageNum = 1

      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleCatalog':
          this.handleCatalog(row)
          break
        case 'handleDelete':
          this.handleDelete(row)
          break
        default:
          break
      }
    },

    /** 新增按钮操作 */
    handleAdd() {
      if (!this.editingItem.value) {
        this.$modal.msgError('请先选择目录')
        return
      }
      this.controllerUrl = `/train/database/upload/${this.editingItem.value}`

      this.reset()
      this.open = true

      this.form.fileList = []
      this.title = '添加资料库'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getDatabase(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改资料库'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDatabase(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            this.form.directoryId = this.editingItem.value
            addDatabase(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除资料库编号为"' + ids + '"的数据项？').then(function() {
        return delDatabase(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },

    // 调整目录
    handleCatalog(row) {
      this.$modal.msgInfo('调整目录')
    }

    // /** 导出按钮操作 */
    // handleExport() {
    //   this.download('train/database/export', {
    //     ...this.queryParams
    //   }, `database_${new Date().getTime()}.xlsx`)
    // }
  }
}
</script>

<style lang="scss" scoped>
//@import '~vue-context/dist/css/vue-context.css';
//@import '~vue-context/src/sass/vue-context';

.app-container {
  display: flex;

  .sidebar {
    //width: 200px;
    //width: 18vw;
    flex: 1;
    //height: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: 30px 0;

    //border-right: 1px solid #ebeef5;
    border: 1px solid #000;
    background-color: #fff;
    //background-color: lightgreen;
  }

  .content {
    width: 80vw;
    padding: 10px;
    //background-color:lightblue;
  }
}


/* 更多 按钮 样式 start */
@import "@/assets/styles/element-variables.scss";

.el-dropdown-menu {
  padding: 8px 0;

  .el-dropdown-menu__item {
    padding: 0 20px;
    color: $--color-primary;
  }

  .el-dropdown-menu__item + .el-dropdown-menu__item {
    margin-top: 5px;
  }
}

::v-deep .el-dropdown-menu__item i {
  margin-right: 12px !important;
}

/* 更多 按钮 样式 end */
</style>
