<template>
    <div class="header-bar">
        <!-- 消息走马灯 -->
        <div class="news-carousel">
            <el-carousel
                height="60px"
                direction="vertical"
                :autoplay="true"
                :interval="3000"
                indicator-position="none"
            >
                <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>
        <!-- <div>
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                router
                :collapse="collapse"
                mode="horizontal"
                background-color="#f5f5f5"
                text-color="#333"
            >
                <el-menu-item index="2">
                    <template #title>
                        <template>
                            <el-icon><EditPen /></el-icon>
                            <span>新建询盘</span>
                        </template>
                    </template>
                </el-menu-item>
            </el-menu>
        </div> -->
        <!-- 用户中心 -->
        <div class="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 { Fold,EditPen } from '@element-plus/icons-vue'

    const props = defineProps({
        userInfo: {
            type: Object,
            default: () => ({})
        },
        newsList: {
            type: Array,
            default: () => []
        }
    })

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

    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;

    .news-carousel {
        flex: 1;
        margin-right: 20px;
        overflow: hidden;

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

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

    .user-center {
        .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>