<template>
  <div class="QdmTree">
    <el-input
    v-if="filter"
    placeholder="搜索"
    v-model="filterText">
    </el-input>
    <el-tree
    :data="list"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :accordion="accordion"
    :default-expand-all="all"
    :filter-node-method="filterNode"
    ref="tree"></el-tree>
  </div>
</template>
<script>
export default {
  name: "QdmTree",
  props: {
    list: {
    	type: Array,
      default: () => {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    filter: {
      type: Boolean,
      default: false
    },
    accordion: {
      type: Boolean,
      default: false
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: ''
    }
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('treeReturn', data)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style lang="less">
.QdmTree {
  >.el-input {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    margin-bottom: 8px;
  }
  .el-tree-node__label {
    font-size: 13px;
  }
}
</style>