<!-- 工具栏：User 信息按钮 -->
<template>
    <span title="点击登录" class="tool-fox" @click="$router.push('/login')" v-if="user.name == null">
        <span style="font-size: 0.8em; font-weight: bold; position: relative; top: -2px;">未登录</span>
    </span>
    <span title="我的信息" class="tool-fox user-info" style="padding: 0;" v-else>
        <!-- 昵称头像 -->
        <el-dropdown @command="handleCommand" trigger="click" size="medium" style="line-height: inherit;">
            <span class="el-dropdown-link" style="height: 100%; padding: 0 1em; display: inline-block;">
                <img class="user-avatar" :src="user.avatar" alt="user-avatar">
                <span class="user-name">{{ user.name }}</span>
                <el-icon class="el-icon--right" style="position: relative; top: 2px;">
                    <el-icon-ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="drop in dropList" :command="drop.name" :key="drop.name">{{ drop.name }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </span>
</template>

<script setup name="nav-tool-user">
import {useUserStore} from "../../../store/user";

const userStore = useUserStore();
const { user, dropList } = userStore;

// 处理userinfo的下拉点击
const handleCommand = function(command) {
    dropList.forEach(function(drop) {
        if(drop.name === command) {
            drop.click();
        }
    })
};

</script>

<style scoped>

.user-info{position: relative; top: -1px;}
.user-avatar{width: 25px; height: 25px; margin-right: 5px; border-radius: 50%; vertical-align: middle;}
.user-name{font-size: 0.9em; color: var(--tool-color); position: relative; top: 1px;}

</style>
