<template>
    <div :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground, marginLeft: collapse ? 0 : '' }" class="sidebar-logo-container">
        <transition name="sidebarLogoFade">
            <div v-if="collapse" key="collapse" class="sidebar-logo-link" @click="getlink(role)">
                <div v-if="logo" class="flex-center" style="width: 100; height: 100%">
                    <img :src="smallLogo" class="sidebar-logo" style="width: auto; height: 80%; margin: 0" />
                </div>
                <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
                    {{ title }}
                </h1>
            </div>
            <div v-else key="expand" class="sidebar-logo-link" @click="getlink(role)">
                <img v-if="logo" :src="logo" class="sidebar-logo" />
                <span class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</span>
            </div>
        </transition>
    </div>
</template>

<script>
import logoImg from '@/assets/logo/logo.png';
import smallLogo from '@/assets/logo/logo-small.png';
import variables from '@/assets/styles/variables.scss';
import { mapState, mapMutations } from 'vuex';

export default {
    name: 'SidebarLogo',
    props: {
        collapse: {
            type: Boolean,
            required: true,
        },
    },
    computed: {
        ...mapState({
            // 映射 Vuex 中的 currentRole 状态
            currentRole: (state) => state.permission.currentRole,
        }),
        variables() {
            return variables;
        },
        sideTheme() {
            return this.$store.state.settings.sideTheme;
        },
    },
    methods: {
        ...mapMutations({
            // 映射 SET_CURRENT_ROLE mutation
            setCurrentRole: 'permission/SET_CURRENT_ROLE',
        }),
        updateCurrentRole(role) {
            console.log(role);
            this.setCurrentRole(role);
            this.role = role;
            console.log('Current Role Set To:', this.role); // 打印到控制台
        },
        getlink(role) {
            this.$router.push({
                path: '/' + role,
            });
        },
    },
    data() {
        return {
            title: '',
            logo: logoImg,
            smallLogo: smallLogo,
            role: undefined,
        };
    },
    mounted() {
        this.$store
            .dispatch('GetInfo')
            .then((res) => {
                const roles = res.deptMenu;
                // 调用 updateCurrentRole 方法来设置 currentRole
                this.updateCurrentRole(roles[0] != null ? roles[0] : 'index');
            })
            .catch((err) => {
                // 错误处理
                console.error(err);
            });
    },
};
</script>

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

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

.sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #2b2f3a;
    overflow: hidden;
    margin-left: 15px;

    & .sidebar-logo-link {
        height: 100%;
        width: 100%;

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

        & .sidebar-title {
            display: inline-block;
            margin: 0;
            color: #fff;
            font-weight: 400;
            line-height: 50px;
            font-size: 20px;
            font-family: '微软雅黑';
            vertical-align: middle;
        }
    }

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