<template>
    <div class="layout-container">
        <!-- 侧边菜单 -->
        <div class="sidebar" :class="{ 'collapsed': isCollapsed }" @mouseenter="expandMenu" @mouseleave="collapseMenu">
            <!-- 侧边面板 -->
            <SidePanel :is-collapsed="isCollapsed" :menu-items="menuItems" :logo="logo" :title="title" />
        </div>

        <div class="main-container">
            <!-- 顶部状态栏 -->
            <div class="header">
                <HeaderBar :user-info="userInfo" :news-list="newsList" @logout="logout" />
            </div>

            <!-- 主内容区域 -->
            <div class="main-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useUserStore } from '@/store'
    import { removeToken } from '@/utils'
    import SidePanel from '@/components/SidePanel.vue'
    import HeaderBar from '@/components/HeaderBar.vue'

    const router = useRouter()
    const userStore = useUserStore()
    const userInfo = userStore.userInfo
    const isCollapsed = ref(true)

    const isLoggedIn = computed(() => userStore.isLoggedIn)
    const logo = ref('jifuyun.cn.png')
    if(userStore.shopInfo && userStore.shopInfo.logo) {
        logo.value = 'https://www.jifuyun.cn/' + userStore.shopInfo.logo
    }
    const title = ref('机联云维')
    if(userStore.shopInfo && userStore.shopInfo.true_name) {
        title.value = userStore.shopInfo.true_name
    }
    // 菜单配置
    const menuItems = userStore.menuList || []

    // 走马灯消息列表
    const newsList = [
        '欢迎使用询报价系统',
        '新版本更新公告：系统已升级到2.0版本',
        '重要通知：请及时处理待办询价单',
        '系统维护通知：本周日凌晨2点-4点进行系统维护'
    ]

    // 菜单展开收起控制
    const expandMenu = () => {
        isCollapsed.value = false
    }

    const collapseMenu = () => {
        isCollapsed.value = true
    }

    const logout = () => {
        userStore.logout()
        removeToken()
        router.push('/login')
    }
</script>

<style lang="scss" scoped>
.layout-container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.sidebar {
    width: 200px;
    height: 100%;
    background-color: #304156;
    transition: width 0.3s;
    overflow: hidden;

    &.collapsed {
        width: 60px;
    }
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.main-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: #f0f2f5;
}
</style>