<style lang="scss" scoped>
.input {
  margin-bottom: 20px;
}
</style>
<template>
  <div class="tree">
    <el-input
      v-model="filterText"
      v-if="showFilter"
      placeholder="输入关键字"
      class="input"
    />
    <div v-if="showAll" class="shaoAll">
      <el-checkbox v-model="checked">全部</el-checkbox>
    </div>
    <div class="button-slot">
      <slot name="button"></slot>
    </div>

    <el-tree
      ref="tree"
      :render-after-expand="renderAfterExpand"
      :node-key="nodeKey"
      :check-strictly="checkStrictly"
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-on-click-node="false"
      :data="treeData"
      :current-node-key="defaultNode"
      highlight-current
      check-on-click-node
      :props="nodeProps"
      :show-checkbox="showCheckbox"
      :filter-node-method="filterNode"
      @node-click="nodeClick"
      @check-change="checkChange"
      @check="check"
    />
  </div>
</template>

<script>
export default {
  props: {
    checkStrictly:{
      type:Boolean,
      default:false
    },
    renderAfterExpand:{
      type:Boolean,
      default:true,
    },
    nodeKey: {
      type: Number | String,
      default: "id",
    },
    //默认展开树的level
    defaultExpandedLevel: {
      type: Number,
    },
    defaultNode: {
      type: Number | String,
    },
    showAll: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default() {
        return [];
      },
    },
    nodeProps: {
      type: Object,
      default() {
        return {
          label: "label",
          children: "children",
        };
      },
    },
    showFilter: {
      type: Boolean,
      default: true,
    },
    defaultCheckedKeys: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    /* description 默认展开tree
     * defaultExpandedLevel 和 defaultNode二选一
     * defaultExpandedLevel 默认展开tree的level
     * defaultNode 默认展开node
     */
    defaultExpandedKeys() {
      if (this.defaultExpandedLevel||this.defaultExpandedLevel==0) {
        let tree = this.treeData;
        let level = this.defaultExpandedLevel;
        let ids = this.getIdsByLevel(tree, level);
        return ids;
      }else{
        return [this.defaultNode]
      }
    },
  },
  data() {
    return {
      checked: false,
      filterText: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {},
  methods: {
    getIdsByLevel(tree, level, ids = [], count = 0) {
      count++;
      for (let i = 0; i < tree.length; i++) {
        if (level === count) {
          ids.push(tree[i].id);
        }
        if (tree[i].children) {
          this.getIdsByLevel(tree[i].children, level, ids, count);
        }
      }
      return ids;
    },
    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
    setCurrentNode(keys) {
      this.$refs.tree.setCurrentNode(keys);
    },
    // 筛选
    filterNode(value, data) {
      if (!value) return true;
      return data[this.nodeProps.label].indexOf(value) !== -1;
    },
    // 树选择
    nodeClick(node, tree) {
      this.$emit("nodeClick", node, tree);
    },
    checkChange(node, checked) {
      this.$emit("checkChange", node, checked);
    },
    check(node,checked) {
      this.$emit("check", node,checked);
    },
  },
};
</script>
<style lang="less" scoped>
.button-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
