<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :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
            :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 }" 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>
      <template v-if="isBillEnabled && handleType==2">
        <div class="multipleChoice nextDom2" style="margin-top:8px;">
          <el-button slot="append" icon="el-icon-search" @click="openBillDialog" size="mini" class="an-btn-search"
                     type="success" style="float: left;margin-left: 8px;margin-top: 8px;"></el-button>
          <el-tooltip :enterable="false" effect="dark" :content="$t2('全部删除','components.fileLibrary.allDelete')" placement="top">
            <a class="allDel icon-quanbushanchu" @click="clearBill" style="right: 8px;left: auto;"></a>
          </el-tooltip>
          <div class="list">
            <div class="item" v-for="(checkBillData,index) in checkBillDatas" :key="index">
              <p>{{ getBillLabel(checkBillData) }}</p>
              <a class="el-icon-close" @click="deleteBillData(index)"></a>
            </div>
          </div>
        </div>
      </template>

      <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>
    <component
      v-if="isBillEnabled && showBillDialog && billDialogContent"
      :visiable.sync="showBillDialog"
      :is="billDialogContent"
      v-bind="billDialogParam"
      @confirm="confirmBillDialog"
    ></component>
  </div>
</template>
<script>
import mixins from './mixins/categoryMoveDialogMixins';

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>
