<!--
 * @Author: ChenKangxu
 * @Date: 2021-09-23 20:55:35
 * @LastEditTime: 2021-10-03 22:13:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \piecework-treasure\src\components\common\treeDepartment.vue
    本组件用于项目公司部门树形结构 二次封装了element-ui的树形控件，加入递归处理数据的方法以及数据检索功能
 新增方法和使用参考【https://element.eleme.cn/#/zh-CN/component/tree】
-->

<template>
  <el-card class="box-card">
    <div slot="header" class="header">
      <span>{{ title }}</span>
      <el-input
        style="width: 150px"
        placeholder="输入关键字查找"
        v-model="searchCurrentDepartment"
      ></el-input>
    </div>
    <!-- 开启拖拽功能 -->
    <el-tree
      :draggable="draggable"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      :show-checkbox="checkbox"
      @check-change="handleCheckChange"
      ref="tree"
      :filter-node-method="filterNode"
      :data="list"
      :props="defaultProps"
      @node-click="clickNode"
      empty-text="暂时没有分类数据"

    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span style="margin-left: 10px" v-if="rightMenus">
          <el-button
            type="text"
            size="mini"
            @click="clickHandler('delete', node, data)"
          >
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </el-card>
</template>

<script>
/**
 * @property list 部门原始请求的数组
 * @property defaultProps 默认选择项
 * @event clickNode 选择节点事件 和饿了么组件一致
 * +2021-09-24更新
 * @property title 组件大标题
 * @property draggable 是否开启树形组件拖拽功能
 * @event node-drag-start
 * @event node-drag-enter
 * @event node-drag-leave
 * @event node-drag-over
 * @event node-drag-end
 * @event node-drop
 * --------以上事件均与element-ui保持一致【https://element.eleme.cn/#/zh-CN/component/tree】----------
 * +2021-09-25更新
 * @property {Boolean} rightMenus 是否显示右侧【删除】小菜单
 * @property {Boolean} checkbox 是否显示左侧选择框
 * @event delete 左侧删除按钮点击事件
 * @event check 右侧选择框选择事件
 */
export default {
  props: {
    // 部门原始请求的数组
    list: {
      type: [Array, Object],
      default: [],
    },
    // 默认选择项
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label",
        };
      },
    },
    // 是否开启拖拽功能
    draggable: {
      type: Boolean,
      default: false,
    },
    // 标题
    title: {
      type: String,
      default: "内容分类",
    },
    // 是否显示选择框
    checkbox: {
      type: Boolean,
      default: false,
    },
    // 是否显示右侧小菜单
    rightMenus: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      searchCurrentDepartment: "",
    };
  },
  watch: {
    searchCurrentDepartment(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 用来搜索树形结构的方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 选择节点
    clickNode(e) {
      this.$emit("click-node", e);
    },
    // ==================拖拽事件 start===================
    handleDragStart(e) {
      if (this.draggable) this.$emit("node-drag-start", e);
    },
    handleDragEnter(e) {
      if (this.draggable) this.$emit("node-drag-enter", e);
    },
    handleDragLeave(e) {
      if (this.draggable) this.$emit("node-drag-leave", e);
    },
    handleDragOver(e) {
      if (this.draggable) this.$emit("node-drag-over", e);
    },
    handleDragEnd(e) {
      if (this.draggable) this.$emit("node-drag-end", e);
    },
    handleDrop(e) {
      if (this.draggable) this.$emit("node-drag", e);
      
    },
    // ==================拖拽事件 end====================
    // =================左侧菜单点击事件================
    clickHandler(option, node, data) {
      this.$emit(option, { node, data });
    },
    // =======================end=======================
    //==================多选框选择事件start====================
    handleCheckChange(e) {
      this.$emit("check", e);
    },
    // ============end=================
  },
  computed: {
    //   公司处理后的数据结构
    companyStructural() {
      return this.addChildren(this.list);
    },
    // 递归处理函数
    addChildren() {
      return (arr) => {
        if (Array.isArray(arr) && arr.length > 0) {
          let outPut = [];
          arr.forEach((item, index) => {
            outPut.push({
              label: item.mainTypeName,
              value: item.mainTypeId,
              id: item.departmentId,
              createTime: "2021-09-22 21:06:58",
              mainTypeId: item.mainTypeId,
              mainTypeName: item.mainTypeName,
              mainTypeSort: item.mainTypeSort,
              children: item.sonDepartments
                ? this.addChildren(item.sonDepartments)
                : "",
            });
          });
          return outPut;
        } else {
          return arr;
        }
      };
    },
  },
};
</script>

<style>
</style>