<template>
    <div class="header-bar">
        <!-- 消息走马灯 -->
        <div class="header-section news-carousel">
            <el-carousel
                height="60px"
                direction="vertical"
                :autoplay="true"
                :interval="3000"
                indicator-position="none"
                v-if="newsList && newsList.length > 0"
            >
                <el-carousel-item v-for="(item, index) in newsList" :key="index">
                    <div class="news-item">
                        <i class="fa fa-volume-up"></i>
                        <span>{{ item }}</span>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div class="news-item" v-else>
                <i class="fa fa-volume-up"></i>
                <span>欢迎使用订单管理系统</span>
            </div>
        </div>

        <!-- 快捷菜单 -->
        <div class="header-section quick-menu">
            <el-menu
                mode="horizontal"
                :ellipsis="false"
                class="menu-container"
                @select="handleMenuSelect"
            >
                <el-menu-item v-for="(item, index) in visibleMenuItems" :key="index" :index="item.route">
                    <i :class="item.icon"></i>
                    <span class="ml-2">{{ item.name }}</span>
                </el-menu-item>

                <!-- 折叠菜单 -->
                <el-sub-menu v-if="collapsedMenuItems.length > 0" index="more">
                    <template #title>
                        <i class="fa fa-ellipsis-h"></i>
                        <span class="ml-2">更多</span>
                    </template>
                    <el-menu-item 
                        v-for="(item, index) in collapsedMenuItems" 
                        :key="`collapsed-${index}`" 
                        :index="item.route"
                    >
                        <i :class="item.icon"></i>
                        <span class="ml-2">{{ item.name }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>

        <!-- 用户中心 -->
        <div class="header-section user-center">
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="user-info">
                    <el-image
                        v-if="userInfo.header_ico"
                        :src="'https://www.jifuyun.cn/' + userInfo.header_ico"
                        class="avatar-image"
                        fit="cover"
                    />
                    <i v-else class="fa fa-user-circle avatar-icon"></i>
                    <span class="username">{{ userInfo.nickname }}</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="profile">
                            <i class="fa fa-user-o"></i> 个人信息
                        </el-dropdown-item>
                        <el-dropdown-item command="settings">
                            <i class="fa fa-cog"></i> 系统设置
                        </el-dropdown-item>
                        <el-dropdown-item divided command="logout">
                            <i class="fa fa-sign-out"></i> 退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    import { ref, computed, onMounted, onUnmounted } from 'vue'
    // import { Fold,EditPen } from '@element-plus/icons-vue'

    const props = defineProps({
        userInfo: {
            type: Object,
            default: () => ({})
        },
        newsList: {
            type: Array,
            default: () => []
        },
        menuItems: {
            type: Array,
            default: () => [
                { name: '首页', icon: 'fa fa-home', route: '/home' },
                // { name: '订单管理', icon: 'fa fa-list-alt', route: '/inquiry/list' },
                // { name: '产品目录', icon: 'fa fa-cubes', route: '/products' },
                // { name: '客户管理', icon: 'fa fa-users', route: '/customers' }
            ]
        }
    })

    const emit = defineEmits(['logout'])
    const router = useRouter()

    // 菜单相关
    const containerWidth = ref(0)
    const menuItemWidth = 120 // 每个菜单项的估计宽度（像素）
    const visibleMenuItems = ref([])
    const collapsedMenuItems = ref([])

    // 计算可见和折叠的菜单项
    const updateMenuItems = () => {
        const availableWidth = containerWidth.value || 0
        // 确保至少显示一个菜单项
        const maxVisibleItems = Math.max(1, Math.floor(availableWidth / menuItemWidth))

        if (!props.menuItems || props.menuItems.length <= maxVisibleItems) {
            // 所有菜单项都可见
            visibleMenuItems.value = [...(props.menuItems || [])]
            collapsedMenuItems.value = []
        } else {
            // 部分菜单项需要折叠
            visibleMenuItems.value = props.menuItems.slice(0, maxVisibleItems - 1) // 减1为"更多"菜单留出空间
            collapsedMenuItems.value = props.menuItems.slice(maxVisibleItems - 1)
        }
    }

    // 监听窗口大小变化
    const handleResize = () => {
        const menuContainer = document.querySelector('.quick-menu .menu-container')
        if (menuContainer) {
            containerWidth.value = menuContainer.offsetWidth
            updateMenuItems()
        } else {
            // 如果找不到容器，设置一个默认值
            containerWidth.value = 400
            updateMenuItems()
        }
    }

    onMounted(() => {
        window.addEventListener('resize', handleResize)
        // 初始化后延迟计算，确保DOM已经渲染
        setTimeout(handleResize, 100)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize)
    })

    // 菜单选择处理
    const handleMenuSelect = (index) => {
        router.push(index)
    }

    // 用户中心下拉菜单处理
    const handleCommand = (command) => {
        switch (command) {
            case 'profile':
                router.push('/profile')
                break
            case 'settings':
                router.push('/settings')
                break
            case 'logout':
                emit('logout')
                break
        }
    }
</script>

<style lang="scss" scoped>
    .header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 20px;

        // 三个部分等宽
        .header-section {
            flex: 1;
            display: flex;
            align-items: center;
            max-width: 33.33%;
        }

        // 左侧走马灯
        .news-carousel {
            justify-content: flex-start;
            overflow: hidden; // 修改为visible，避免走马灯被隐藏
            min-width: 200px; // 确保最小宽度

            :deep(.el-carousel__container) {
                height: 60px;
            }

            :deep(.el-carousel__item) {
                height: 60px !important;
            }

            .news-item {
                display: flex;
                align-items: center;
                height: 60px;
                color: #666;
                font-size: 14px;
                width: 100%;

                i {
                    margin-right: 8px;
                    color: #1890ff;
                }
            }
        }

        // 中间快捷菜单
        .quick-menu {
            justify-content: center;
            overflow: hidden;

            .menu-container {
                width: 100%;
                display: flex;
                justify-content: center;
                border-bottom: none;
            }

            :deep(.el-menu--horizontal) {
                border-bottom: none;
            }

            :deep(.el-menu-item) {
                height: 60px;
                line-height: 60px;
            }

            :deep(.el-sub-menu__title) {
                height: 60px;
                line-height: 60px;
            }
        }

        // 右侧用户中心
        .user-center {
            justify-content: flex-end;

            .user-info {
                display: flex;
                align-items: center;
                cursor: pointer;

                .avatar-image {
                    width: 40px;
                    height: 40px;
                    border: #1890ff 1px solid;
                    border-radius: 50%;
                    margin-right: 8px;
                }

                .avatar-icon {
                    font-size: 40px;
                    margin-right: 8px;
                    color: #666;
                }

                .username {
                    font-size: 14px;
                    color: #666;
                    margin-right: 4px;
                }
            }
        }
    }

    :deep(.el-dropdown-menu__item) {
        i {
            margin-right: 8px;
        }
    }
</style>