<template>
  <div class="white-body-view">
    <el-tree
      id="my-tree"
      ref="tree"
      class="tree-view structure-tree"
      :data="treeData"
      highlight-current
      :default-expand-all="treeExpandAll"
      :props="defaultProps"
      check-strictly
      :node-key="treeNodeKey"
      :auto-expand-parent="false"
      :expand-on-click-node="false"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span class="tooltip">
          <span class="add-f-s-14" @click="a(data)">{{ data.username }}{{data.deptName}}</span>
        </span>
        <div class="operation-view">
          <i
            class="small-operation-btn el-icon-plus"
            style="color: #409eff"
            @click.stop="handleAdd(data)"
            >添加子级</i
          >
          <i
            v-if="!data.username"
            class="small-operation-btn el-icon-edit"
            style="color: #e6a23c"
            @click.stop="handleEdit(data)"
            >编辑</i
          >
          <i
            v-if="!data.username"
            class="small-operation-btn el-icon-delete"
            style="color: #f56c6c"
            @click.stop="handleDelete(data)"
            >删除</i
          >
        </div>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  props: {
    // 源数据
    treeData: {
      type: Array,
      default: function () {
        return [];
      },
    },

    // 树节点是否默认展开
    treeExpandAll: {
      type: Boolean,
      default: true,
    },

    // 树节点唯一标识
    treeNodeKey: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      defaultProps: {
        children: "deptRsList",
        label: "username",
      },
      selectItem: {},
    };
  },

  methods: {
    // 添加新增按钮
    handleAdd(data) {
      this.$emit("addItem", data);
    },

    // 点击删除按钮
    handleDelete(data) {
      this.$emit("deleteItem", data);
    },

    // 点击编辑按钮
    handleEdit(data) {
      this.selectItem = data;
      this.$emit("editItem", JSON.parse(JSON.stringify(data)));
    },

    // ============== 组件内事件 结束=============

    // ============== 父组件回调事件 开始=============

    // 添加新记录，树形列表回显
    treeAddItem(data) {
      this.$refs.tree.append(data, data.parentId);
    },

    // 删除节点
    treeDeleteItem(val) {
      this.$refs.tree.remove(val);
    },

    // 修改记录，树形列表回显
    treeEditItem(val) {
      Object.assign(this.selectItem, val);
      this.selectItem = {};
    },

    // ============== 父组件回调事件 结束=============
  },
};
</script>
<style lang="scss">
.el-tag {
  margin-right: 20px;
}
.structure-tree {
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  #my-tree .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
  .el-tree-node__content {
    margin-bottom: 15px;
  }
  .tooltip {
    margin-right: 5px;
    font-size: 13px;
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 4px;
  }
  .operation-view {
    position: absolute;
    right: 0;
    display: inline-block;
    padding: 0px 5px;
    margin-left: 5px;
    color: #777777;
    i {
      margin-right: 15px;
    }
  }
  .small-operation-btn {
    margin: 7px 3px 0;
  }
}
::v-deep .el-tree-node__content {
  margin-bottom: 20px;
}
.add-f-s-14 {
  font-size: 16px;
}
</style>
<style>
.el-tree-node__content {
  height: 39px;
}
.custom-tree-node {
  line-height: 29px;
}
.el-tree-node__content {
  margin-bottom: 0 !important;
}
.structure-tree .small-operation-btn {
  margin: 0px 3px 0;
}
/* .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: no-repeat !important;
} */
/* .el-tree-node:focus > .el-tree-node__content {
  background-color: #f5f7ff !important;
} */
</style>
