<style lang="scss" scoped>
    // todo layout样式 单独抽出一个文件夹
    .sidebarLogoFade-enter-active {
        transition: opacity 1.5s;
    }

    .sidebarLogoFade-enter,
    .sidebarLogoFade-leave-to {
        opacity: 0;
    }

    .sidebar-logo-container {
        position: relative;
        width: 100%;
        height: 51px;
        line-height: 50px;
        background: $siderBarBg;
        border-bottom: 1px solid darken($siderBarBg, 4.2%);
        text-align: center;
        overflow: hidden;
        color: #000;

        & .sidebar-logo-link {
            height: 100%;
            width: 100%;
            padding-right: 15px;
            color: #fff;

            & .sidebar-logo {
                width: 32px;
                vertical-align: middle;
                margin-right: 10px;
            }

            & .sidebar-title {
                display: inline-block;
                margin: 0;
                font-weight: bold;
                line-height: 50px;
                font-size: 16px;
                font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
                vertical-align: middle;
            }
        }

        &.collapse {
            .sidebar-logo {
                margin-right: 0px;
            }
        }
    }
</style>

<template>
    <div class="sidebar-logo-container" :class="{'collapse':collapse}">
        <transition name="sidebarLogoFade">
            <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
                <img v-if="logo" :src="logo" class="sidebar-logo">
                <h1 v-else class="sidebar-title">{{ title }}</h1>
            </router-link>
            <router-link v-else key="expand" class="sidebar-logo-link" to="/">
                <img v-if="logo" :src="logo" class="sidebar-logo">
                <h1 class="sidebar-title">{{ title }}</h1>
            </router-link>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'SidebarLogo',
        props: {
            collapse: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                title: '启效智慧云',
                logo: process.env.BASE_URL + 'img/logo/logo_white.png'
            };
        }
    };
</script>