<template>
    <div class="header">
        <div class="header_logo">
            <img :src="logo" class="logo"/>
            <div>长春黄金研究院有限公司</div>
        </div>
        <div class="header_time">
            {{ currentTime }}
        </div>
        <div class="header_user">
            <img :src="AvatarSvg" width="40px" height="40px"/>
            <div class="user_name">Admin</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import logo from '@/assets/logo.svg'
    import AvatarSvg from '@/assets/avatar.svg'
    import { ref, onMounted } from 'vue'
    import {eventBus} from '@/eventBus'
    import { getFormattedDateTime } from '@/utils' 
    const menuId = ref(0)
    const time = getFormattedDateTime()
    const currentTime = ref(time)
    onMounted(()=>{
        //测试页面返回时，需要调整菜单 
        eventBus.on('menuId', (value:number)=>{
            menuId.value = value
        })
    })
</script>
<style lang="scss" scoped>
    @use "@/assets/style/mixin.scss" as *;
    .header{
        display: flex;
        align-items: center;
        background: #e9e9e9;
        align-items: center;
        height: var(--headerHeight);
        .header_logo{
            display: flex;
            font-size: 36px;
            align-items: center;
            width: 700px;
            color: #8799AB;
            gap: 5px;
            padding-left: 50px;
            
            .logo{
                height:85px;
                width:85px;
            }
        }
        
        .header_time{
            width: 375px;
            height: 80px;
            font-size: 28px;
            display: flex;
            align-items: center;
            margin-left: 54%;
            background: white;
            justify-content: center;
            border-radius: 10px;
        }

        .header_ins{
            display: flex;
            align-items: center;
            border-radius: 5px;
            width: 444px;
            height: 80px;
            background: #FFFFFF;
        }

        .header_container{
            margin-left: 10px;
            display: flex;
            align-items: center;
            border-radius: 5px;
            width: 500px;
            height: 80px;
            background: #FFFFFF;
            .waste_status{
                padding:5px 5px;
                width: 75%;
            }

            .waste_detail{
                display: flex;
                justify-content: flex-end;
                width: 40%;
            }
        }

        .header_user{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            margin-left: 30px;            

        }

        .user_name{
            font-size: 34px;
            color: #393F46;
        }
    }

    .circle {
      width: 30px; 
      height: 30px; 
      background-color: green; 
      border-radius: 50%; 
      margin-left: 10px;
    }

    :deep(.van-dropdown-menu__bar){
        background-color: #1871F8;
        border-radius: 5px;
        height: 30px;
        width: 90px;
        .van-ellipsis{
            color:white;
        }    
        
    }

    :deep(.van-dropdown-item__content){
        width: 150px;
        margin-left: 170px;
    }

    .text_size{
        font-size:30px;
        padding-right: 5px;
    }
    
</style>