<template>
    <div class="sidebar-logo-container" :class="{ collapse: collapse }"
        :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
        <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 class="sidebar-title"
                    :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }"
                    style="padding-left: 10px">{{ title }}</h1>
            </router-link>
            <router-link v-else key="expand" class="sidebar-logo-link" to="/">
                <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
                <span class="sidebar-title"
                    :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }"
                    style="padding-left: 10px">{{ title }}</span>
            </router-link>
        </transition>
    </div>
</template>

<script>
import logoImg from '@/assets/logo/logo.gif';
import variables from '@/assets/styles/variables.scss';
import { getDept } from '@/api/system/dept';

export default {
    name: 'SidebarLogo',
    props: {
        collapse: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        variables() {
            return variables;
        },
        sideTheme() {
            return this.$store.state.settings.sideTheme;
        },
    },
    data() {
        return {
            title: '',
            logo: '',
            baseUrl: process.env.VUE_APP_BASE_API,
        };
    },
    mounted() {
        this.getDeptDetail();
    },
    methods: {
        //获取机构详情
        getDeptDetail() {
            const deptId = this.$store.state.user.dept.deptId;
            getDept(deptId).then((response) => {
                const data = response.data;
                if (data.logoName) {
                    this.title = data.logoName;
                } else {
                    this.title = '浙江超亿消防装备有限公司';
                }
                if (data.deptLogo) {
                    this.logo = this.baseUrl + data.deptLogo;
                } else {
                    this.logo = logoImg;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
}

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

.sidebar-logo-container {
    position: relative;
    height: auto;
    min-height: 50px;
    background: #2b2f3a;
    margin-left: 12px;
    margin-top: 15px;
    width: 200px;
    padding: 12px 0;

    & .sidebar-logo-link {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;

        & .sidebar-logo {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
        }

        & .sidebar-title {
            display: block;
            margin: 0;
            color: #fff;
            font-weight: 400;
            line-height: 1.4;
            font-size: 18px;
            font-family: '微软雅黑';
            width: calc(100% - 40px);
            word-wrap: break-word;
            white-space: normal;
            padding-left: 10px;
            overflow-wrap: break-word;
            text-align: center;
        }
    }

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