<!-- 菜单权限树型结构 -->
<template>
  <el-tree ref='tree' accordion :current-node-key="nodeKey" :data="dataSource" node-key="id"
    @node-click="handleNodeClick" highlight-current :filter-node-method="filterNode">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span><i :class="data.icon" v-if='showIcon'></i>{{data.text}}</span>
    </span>
  </el-tree>
</template>

<script>
  export default {
    data() {
      return {
        dataSource: [],
        iconCla: 'iconfont icon-wenjian',
        showIcon: false,
        nodeKey: -10, //默认选中
      };
    },
    props: {
      datas: {
        type: Array,
        required: false
      },
      iconClass: {
        type: Boolean,
        required: false
      }
    },
    created() {
      this.showIcon = this.iconClass ? this.iconClass : this.showIcon;
    },
    watch: {
      datas(val, oldVal) {
        // 监听修改后的值
        this.dataSource = val;
      }
    },
    methods: {
      handleNodeClick(data) {
        /**
         * 点击节点回调
         */
        this.$emit('clickCb', data)
      },
      getCurrentNode() {
        /**
         * 获取当前选中行的值
         */
        return this.$refs.tree.getCurrentNode()
      },
      filterNode(value, data) {
        /**
         * 过滤搜索状态
         * @returns {Boolean} true 节点可以显示
         * @returns {Boolean} false 节点隐藏
         */
        if (!value) {
          this.$emit('treeFilter', true);
          return true
        } {
          if (data.text.indexOf(value) !== -1) {
            this.$emit('treeFilter', false)
            return data.text.indexOf(value) !== -1;
          }
        }
      },
      filterText(val) {
        /**
         * 搜索框过滤
         */
        this.$nextTick(() => {
          this.$refs.tree.filter(val);
        })
      }
    }
  }

</script>

<style scoped>
</style>