<template>
    <div>
        <el-input
            placeholder="输入关键字进行过滤"
            clearable
            v-model="filterText"
            style="margin-bottom: 10px"
        ></el-input>
        <el-tree
            :highlight-current="true"
            :expand-on-click-node="false"
            :style="'height: ' + (vh - 10) + 'px;'"
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            ref="tree"
            v-loading="loadingTree"
        ></el-tree>
    </div>
</template>
<script>
import { pvTree } from '@/api/AccountOperation'
export default {
    components: {},
    props: {},
    data() {
        return {
            vh: 0,
            filterText: '',
            loadingTree: true,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            treeList: [],
            treeData: []
        }
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    created() {
        this.operationTree()
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 180
        },
        // 树查询
        async operationTree() {
            this.loadingTree = true
            const data = await pvTree()
            this.treeData = data.data
            this.loadingTree = false
        },
        // 树点击事件
        handleNodeClick: function (data, node) {
            this.breadList = []
            this.treeList = data
            let selectNode = this.$refs.tree.getNode(node) //  获取点击当节点的dom的信息
            // console.log(data,'data',node,'node')
            this.$emit('nodeData', data)
        },
        // 树过滤

        filterNode(value, data, node) {
            if (!value) {
                return true
            }
            let _array = [] //这里使用数组存储 只是为了存储值。
            this.getReturnNode(node, _array, value)
            let result = false
            _array.forEach(item => {
                result = result || item
            })
            return result
        },
        getReturnNode(node, _array, value) {
            let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
            isPass ? _array.push(isPass) : ''
            this.index++
            if (!isPass && node.name != 1 && node.parent) {
                this.getReturnNode(node.parent, _array, value)
            }
        }
    },

    computed: {},

    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    }
}
</script>
<style lang="scss" scoped>
.el-tree {
    // background-color: #ccc;
}
</style>
