<template>
  <div class="app-container">
    <el-input
      v-model="filterText"
      placeholder="Filter keyword"
      style="margin-bottom:30px;"
    />
    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Tree as ElTree } from "element-ui";
import { TreeData } from "element-ui/types/tree";

@Component({
  name: "Tree"
})
export default class extends Vue {
  private filterText = "";
  private data2 = [
    {
      id: 1,
      label: "Level one 1",
      children: [
        {
          id: 4,
          label: "Level two 1-1",
          children: [
            {
              id: 9,
              label: "Level three 1-1-1"
            },
            {
              id: 10,
              label: "Level three 1-1-2"
            }
          ]
        }
      ]
    },
    {
      id: 2,
      label: "Level one 2",
      children: [
        {
          id: 5,
          label: "Level two 2-1"
        },
        {
          id: 6,
          label: "Level two 2-2"
        }
      ]
    },
    {
      id: 3,
      label: "Level one 3",
      children: [
        {
          id: 7,
          label: "Level two 3-1"
        },
        {
          id: 8,
          label: "Level two 3-2"
        }
      ]
    }
  ];
  private defaultProps = {
    children: "children",
    label: "label"
  };

  @Watch("filterText")
  private onFilterTextChange(value: string) {
    (this.$refs.tree2 as ElTree).filter(value);
  }

  private filterNode(value: string, data: TreeData) {
    if (!value) {
      return true;
    }
    return data.label && data.label.indexOf(value) !== -1;
  }
}
</script>
