<template>
  <div>
    <el-dialog
      :title="title"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      :modal="false"
      custom-class="dialog-style list-dialog pd_0"
      width="500px"
      height="500px"
      @close="dialogClose"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont" id="_categoryMoveDialog" style="height: 430px;">
        <el-form ref="editForm" :model="formData" class="tree-box tree-annex">
          <el-tree
            v-if="treeFlag"
            :props="defaultProps"
            :load="loadNode"
            node-key="id"
            ref="tree"
            lazy
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            class="tree-list"
            icon-class="el-icon-arrow-down"
          >
        <span class="el-tree-node__label" slot-scope="{ node, data }" v-if="!node.data.moreBtn">
          <i class="ico-wenjian"></i>
          <span>{{ node.label }}</span>
        </span>
            <span v-else class="el-tree-node__label">
          <el-button type="primary" plain class="button-sty">{{ node.label }}</el-button>
        </span>
          </el-tree>
        </el-form>
      </div>
      <label id="labBtn" class="transverse">
        <div class="icon">
          <i class="el-icon-more"></i>
          <i class="el-icon-more"></i>
        </div>
      </label>

      <div class="multipleChoice nextDom" style="margin-top:8px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <i class="position el-icon-map-location"></i>
          <el-breadcrumb-item v-for="(treeNode,index) in treeNodeArr" :key="index" @click.native="doNav(treeNode)">{{
              treeNode.label
            }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain class="button-sty" @click="dialogClose">
          <i class="el-icon-close el-icon"></i>
          {{ $t2('取 消', 'system.button.cancel2') }}
        </el-button>
        <el-button type="primary" class="button-sty" @click="dialogPrimary">
          <i class="el-icon-check el-icon"></i>
          {{ $t2('确 定', 'system.button.confirm2') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mixins from './mixins/fileCategoryDialogMixins';

export default {
  mixins: [mixins]
};
</script>
<style scoped>
.tree-box {
  width: 100%;
  border-right: none;
}

.tree-box.tree-annex .tree-list {
  height: auto;
  padding-top: 0;
}
</style>
