<template>
  <div class="xd-tree">
    <h6 v-if="title">{{title}}</h6>
    <el-tree
      v-if="ref !== null"
      :ref="ref"
      :props="props"
      :show-checkbox="showCheckbox"
      :default-expand-all="defaultExpandAll"
      :node-key="nodeKey"
      :expand-on-click-node="expandOnClickNode"
      :load="loadNode"
      @node-click="handleNodeClick"
      lazy
    >
      <div class="xd-tree__node" slot-scope="{ node, data }">
        <div class="xd-tree__node-label">{{ node.label}}</div>
        <div v-if="isSolt && node.expanded && !node.isLeaf">
          <el-dropdown trigger="click" @command="handleMenuClick">
            <div class="el-dropdown-link">
              <i class="xd_admin_iconfont xdicon_sangedian-x"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <template v-for="(item, index) in menuList">
                <el-dropdown-item :command="{item,index,node, data}">{{item}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>

export default {
  name: "XdOrganizeTree",
  props:{
    showCheckbox: {
      type: Boolean,
      default: false
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    isSolt:{
      type: Boolean,
      default: true
    },
    expandOnClickNode: {
      type: Boolean,
      default: false
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    checkStrictly:{
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default(){
        return ['添加','编辑', '删除']
      }
    },
    maxLevel:{
      type: Number,
      default: 4
    },
    
    title: {
      type: String,
      default: ''
    },

    //树
    props: {
      type: Object,
      default(){
        return {
          label: 'label',
          isLeaf: 'leaf'
        }
      }

    },
  },

  data() {
    return {
      ref: null
    }
  },

  created() {
    this.ref =  'tree' + this.$xdHelper.randomChar(20);
  },

  methods: {
    handleMenuClick(command){
      command['$refs'] = this.$refs[this.ref]
      this.$emit('onCommand',command);
    },

    loadNode(node, resolve){
      this.$emit('onLoadNode', {
        node,
        resolve:(data)=>{
          resolve(data);
          console.log('in',data);
        }
      })
    },
    handleNodeClick(data){
      this.$emit("onNodeClick", data);
    }
  }
};
</script>

<style scoped lang="scss">
.xd-tree {
  & > h6 {
    margin: 0 0 10px;
    border-bottom: 1px solid #e5e5e5;
    line-height: 20px;
    font-size: 14px;
    padding:0 0 10px;
  }
  &__node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    line-height: 30px;
  }
  ::v-deep .el-tree-node__content {
    height: 30px;
    line-height: 30px;
  }
  ::v-deep .el-tree-node__expand-icon {
    font-size: 18px;
  }

  & .el-dropdown-link {
    width: 40px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
