<template>
    <div class="top-bar">
        <!--系统状态-->
        <div class="sys-handler">
            <!--菜单折叠控制按钮-->
            <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollapsedChange"></sider-trigger>
            <!--面包屑-->
            <bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></bread-crumb>
        </div>

        <!--用户-->
        <div class="user-container">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import SiderTrigger from './sider-trigger'
    import BreadCrumb from './bread-crumb'
    import './top-bar.less'

    export default {
        name: "TopBar",
        components: {
            'sider-trigger': SiderTrigger,
            'bread-crumb': BreadCrumb
        },
        props: {
            collapsed:Boolean
        },
        computed: {
            breadCrumbList(){
                return []
            }
        },
        methods: {
            handleCollapsedChange (state) {
                this.$emit('on-coll-change', state)
            }
        }
    }
</script>

<style scoped>

</style>
