<template>
<!-- main-container -->
    <div class="flex h-full min-w-[1200px]">
        <div class="flex items-center ml-[20px]">
			<NuxtLink to="/">
				<div class="w-[132px] mr-[10px]"><img src="@/assets/images/index/logo.jpg" /></div>
			</NuxtLink>
			<div class="hidden text-[14px] text-[#A6B0C8] xl:block">|<span class="ml-[10px]">一款快速开发SAAS通用管理系统后台框架</span>
			</div>
		</div>

        <div class="mx-auto flex-shrink">
            <el-menu :default-active="appStore.route" class="h-full" mode="horizontal" :ellipsis="false" :router="true">
                <el-menu-item index="/" route="/">
                    <span class="text-base mx-4">首页</span>
                    <span></span>
                </el-menu-item>
                <el-menu-item index="/community/answer" route="/">
                    <span class="text-base mx-4">文章</span>
                    <span></span>
                </el-menu-item>
                <el-menu-item  route="/">
                    <span class="text-base mx-4">社区</span>
                    <span></span>
                </el-menu-item>
            </el-menu>
        </div>

        <div class="flex items-center justify-end mr-[20px] ml-auto whitespace-pre">
            <el-dropdown v-if="info">
                <div>
                    <NuxtLink to="/member/center">
                        <span class="cursor-pointer">{{info.nickname}}</span>
                    </NuxtLink>
                    <span class="mx-2">|</span>
                    <span class="cursor-pointer" @click="logoutFn">退出</span>
                </div>
            </el-dropdown>
            <NuxtLink to="/auth/login" v-else>
                <el-button type="primary" link>{{ t('login') }} / {{ t('register') }}</el-button>
            </NuxtLink>
        </div>
    </div>
</template>

<script lang="ts" setup>
import useMemberStore from '@/stores/member'
import useAppStore from '@/stores/app'

const memberStore = useMemberStore()
const info = computed(() => memberStore.info)

const logoutFn = ()=>{
    memberStore.logout()
    navigateTo(`/auth/login`)
}

const appStore = useAppStore()
</script>

<style lang="scss" scoped>
:deep(.el-menu--horizontal) {
    border-bottom: none;
}
.el-menu-item{
    padding-left: 0;
    border: none !important;
    color: #000 !important;
    &.is-active{
        border: none !important;
        color: #000 !important;
        span{
            &:first-of-type{
                position: relative;
                z-index: 1;
            }
            &:last-of-type{
                position: absolute;
                width: 16px;
                height: 16px;
                background-image: linear-gradient(to bottom right,#FFFFFF,var(--el-color-primary));
                border-radius: 100px;
                bottom: 15px;
                right: 27px;
                z-index: 0;
            }
        }
    }
    &:hover{
        background-color: transparent !important;
        color: var(--el-menu-hover-text-color) !important;
    }
    &:focus{
        background-color: transparent !important;
    }
}
</style>