<template>
    <div class="full-page">
        <div class="heard">
            <el-input
                :placeholder="this.$t('navigator.searchTip')"
                v-model="filterText"
                clearable
            >
            </el-input>
            <i
                class="cqlt-icon cqlt-icon-shouqi"
                @click="expandHandle"
                v-if="expandAll"
            ></i>
            <i
                class="cqlt-icon cqlt-icon-zhankai"
                @click="expandHandle"
                v-else
            ></i>
            <i class="cqlt-icon cqlt-icon-shuaxin" @click="loadTree"></i>
        </div>
        <el-tree
            ref="tree"
            class="cqlt-tree"
            highlight-current
            :data="data"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
        ></el-tree>
    </div>
</template>

<script>
export default {
    name: 'tree',
    props: {
        defaultProps: {
            typeof: Object,
            default: () => {
                return {
                    children: 'children',
                    label: 'name',
                }
            },
        },
        data: {
            typeof: Array,
            default: () => [],
        },
    },
    data() {
        return {
            filterText: '',
            expandAll: false,
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    methods: {
        expandHandle() {
            this.expandAll = !this.expandAll
            this.expandNodes(this.$refs.tree.store.root)
        },
        // 遍历树形数据，设置每一项的expanded属性，实现展开收起
        expandNodes(node) {
            node.expanded = this.expandAll
            for (let i = 0; i < node.childNodes.length; i++) {
                node.childNodes[i].expanded = this.expandAll
                if (node.childNodes[i].childNodes.length > 0) {
                    this.expandNodes(node.childNodes[i])
                }
            }
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            this.$emit('node-click', data)
        },
        loadTree() {
            this.$emit('loadTree')
        },
    },
}
</script>

<style lang="scss" scoped>

.heard {
    display: flex;
    align-items: center;
}
.cqlt-icon {
    font-size: 16px;
    font-weight: bold;
}
.cqlt-icon-zhankai,
.cqlt-icon-shouqi {
    margin: 0 5px;
}
.cqlt-tree {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 10px;
    border: none;
    overflow: auto;
    display: inline-block !important;
    /deep/ .el-tree-node__content {
		padding: 5px 0;
	}
    /deep/ .el-tree-node>.el-tree-node__children {
      overflow: initial !important;
    }
}
</style>
