<template>
    <div class="searh-menu-container">
        <el-input prefix-icon="el-icon-search" v-model="searchKey" placeholder="请输入内容" clearable @clear="clearFn" @keyup.enter.native="searchFn"></el-input>
        <el-tree
            v-show="!searchResultShow"
            class="search-menu"
            :default-expanded-keys="[1, 2]"
            :data="data"
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <i class="iconfont" :class="node.level == 1 ? 'icon-2zuzhijiagou' : node.isLeaf ? 'icon-chengyuan' : 'icon-tongshi-zuzhijiagou'"></i>
                <span>{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
</template>
<script>
    export default {
        name: "searchMenu",
        components: {},
        props: {},
        data() {
            return {
                data: [ // el-tree mock data
                    {
                        id: 1,
                        label: '一级 1',
                        children: [
                            {
                                id: 4,
                                label: '二级 1-1',
                                children: [
                                    {
                                        id: 9,
                                        label: '三级 1-1-1'
                                    },
                                    {
                                        id: 10,
                                        label: '三级 1-1-2'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 2,
                        label: '一级 2',
                        children: [
                            {
                                id: 5,
                                label: '二级 2-1'
                            },
                            {
                                id: 6,
                                label: '二级 2-2'
                            }
                        ]
                    },
                    {
                        id: 3,
                        label: '一级 3',
                        children: [
                            {
                                id: 7,
                                label: '二级 3-1'
                            },
                            {
                                id: 8,
                                label: '二级 3-2'
                            }
                        ]
                    }
                ],
                searchKey: "",
                searchResultShow: false,
            };
        },
        created() {},
        methods: {
            /**
             * 清楚输入框
             */
            clearFn() {},

            /**
             * 关键字搜索
             */
            searchFn() {
                console.log(this.searchKey);
            },

            /**
             * 树形菜单选择
             */
            handleNodeClick(obj, node) {
                console.log(obj, node);
                this.$emit("handleTreeSelection", obj, node);
            }
        },
        filter: {},
        computed: {},
        watch: {}
    };
</script>
<style lang="scss">
    .searh-menu-container {
        overflow-y: scroll;
        overflow-x: scroll;
        width: 260px;
        background: #eef1f8;
        height: 690px;
        padding: 20px 15px;
        box-sizing: border-box;
        .search-menu {
            margin-top: 30px;
            color: #606266;
            font-size: 14px;
            background: #EEF1F8;
            min-width: 100%;
            display:inline-block !important;
            .el-tree-node {
                .el-tree-node__content {
                    height: 36px;
                    .iconfont {
                        color: #409EFF;
                        margin-right: 5px;
                    }
                    &:hover {
                        color: #fff;
                        background: #409EFF;
                        .iconfont {
                            color: #fff;
                        }
                    }
                }
            }
        }
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background: #409EFF;
            color: #fff;
            .iconfont {
                color: #fff;
            }
        }
    }
</style>


