<template>
    <n-layout-header bordered>
        <div class="header-icon">
            <img src="/logo.jpg">
            <div class="header-icon__text">
                <p class="cn">零枢</p>
                <p class="en">ZeroNode</p>
            </div>
        </div>
        <div class="header-avatar">
            <div class="header-avatar__info">
                <n-avatar src="@/assets/images/luolan_avatar.jpg" round :size="45"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                </n-avatar>
                <p class="username">白盐浊泉</p>
                <n-dropdown :options="options" @select="handleSelect">
                    <n-icon :size="16" color="#000" style="cursor: pointer;">
                        <CaretDownOutline />
                    </n-icon>
                </n-dropdown>
            </div>
        </div>
    </n-layout-header>
</template>

<script setup lang='ts'>
import { useAuth0 } from '@auth0/auth0-vue';
import {
    Pencil as EditIcon,
    LogOutOutline as LogoutIcon,
    PersonCircleOutline as UserIcon,
    CaretDownOutline
} from '@vicons/ionicons5';
import { NIcon } from 'naive-ui';
const { logout } = useAuth0();
const router = useRouter();
function renderIcon(icon: Component) {
    return () => {
        return h(NIcon, null, {
            default: () => h(icon)
        })
    }
}
const options = [
    {
        label: '用户资料',
        key: 'profile',
        icon: renderIcon(UserIcon)
    },
    {
        label: '编辑用户资料',
        key: 'editProfile',
        icon: renderIcon(EditIcon)
    },
    {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(LogoutIcon)
    }
];

const handleSelect = (key: string | number) => {
   if(key === 'logout'){
     logout({ logoutParams: { returnTo: window.location.origin } });
     router.push('/');
   }
}
</script>
<style scoped lang='scss'>
.n-layout-header {
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-icon {
        display: flex;
        align-items: center;
        height: 100%;
        gap: 12px;

        img {
            height: 45px;
            width: 45px;
            border-radius: 4px;
        }

        &__text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 45px;

            .cn {
                font-size: 20px;
                font-weight: bold;
            }

            .en {
                color: $primaryColor;
                font-size: 12px;
                font-weight: 600;
            }
        }
    }

    // 右侧
    .header-avatar {
        &__info {
            display: flex;
            align-items: center;
            gap: 8px;

            .username {
                color: #606266;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
}
</style>