<template>
    <div class="u-tree">
        <!-- 搜索栏 -->
        <div class="u-tree__search">
            <el-input
                placeholder="关键字搜索"
                v-model="keyword"
                class="u-tree__search-input"
                clearable
                size="mini"
                @keyup.enter.native="handleSearch"
            ></el-input>
            <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>
        </div>
        <!-- 标签树 -->
        <div class="u-tree__content">
            <dg-scrollbar>
                <dg-tree
                    ref="tree"
                    node-key="code"
                    :props="props"
                    :data="treeData"
                    default-expand-all
                    :expand-on-click-node="true"
                    :filter-node-method="filterNode"
                    style="padding-right: 15px"
                >
                    <div slot-scope="{ data }" class="u-tree-label">
                        <p @click="handleNodeClick(data)">
                            <i class="el-icon-folder-opened" v-if="data.parent"></i>
                            <i class="el-icon-document" v-else></i>
                            <span class="tree-node__text"> {{ data.name }}</span>
                        </p>
                    </div>
                </dg-tree>
            </dg-scrollbar>
        </div>
    </div>
</template>

<script>
import { getBusinessTagTree } from "@/api/common";
export default {
    name: "BusinessTagTree",
    props: {
        props: {
            type: Object,
            default() {
                return {
                    value: "code",
                    label: "name",
                    children: "child",
                    isLeaf(data) {
                        return data.parent !== true;
                    }
                };
            }
        }
    },
    data() {
        return {
            treeData: [],
            // 查询关键字
            keyword: ""
        };
    },
    methods: {
        handleSearch() {
            this.$refs.tree.filter(this.keyword);
            this.$emit("submitSearchTree");
        },
        /**
         * @description: 点击节点
         * @param {*} node 节点
         */
        handleNodeClick(node) {
            console.log(node);
            if (!node.parent) {
                this.$emit("handleGetNode", node);
            }
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        // 获取树
        getTree() {
            getBusinessTagTree().then((res) => {
                this.treeData = res.data.content.filter((item) => item.child);
            });
        }
    },
    created() {
        this.getTree();
    }
};
</script>

<style lang="scss" scoped>
.u-tree {
    &__search {
        &-input {
            width: 65%;
            margin-bottom: 10px;
        }
    }
    &__content {
        height: calc(100vh - 17.6rem);
    }
}
</style>
