<template>
  <n-dropdown
    trigger="click"
    :options="userMenuOptions"
    @select="handleUserMenuSelect"
  >
    <n-button quaternary>
      <n-avatar
        round
        size="small"
        :src="user?.avatar"
      >
        {{ user?.username?.charAt(0).toUpperCase() }}
      </n-avatar>
      <span class="username">{{ user?.username }}</span>
      <Icon icon="tabler:chevron-down" />
    </n-button>
  </n-dropdown>
</template>

<script setup lang="ts">
import { computed, h } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NDropdown, NAvatar, useMessage } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { useAuthStore } from '../stores/auth'
import { t } from '../i18n'

const router = useRouter()
const message = useMessage()
const authStore = useAuthStore()

const user = computed(() => authStore.user)

const userMenuOptions = computed(() => {
  const options: any[] = [
    {
      label: t('Menu Management'),
      key: 'menu-manager',
      icon: () => h(Icon, { icon: 'tabler:menu-2' })
    },
    {
      label: t('Settings'),
      key: 'settings',
      icon: () => h(Icon, { icon: 'tabler:settings' })
    },
    {
      type: 'divider'
    },
    {
      label: t('Logout'),
      key: 'logout',
      icon: () => h(Icon, { icon: 'tabler:logout' })
    }
  ]
  
  return options
})

const handleUserMenuSelect = async (key: string) => {
  if (key === 'logout') {
    await authStore.logout()
    message.success(t('Logged out'))
    router.push('/')
  } else if (key === 'menu-manager') {
    router.push({ name: 'MenuManager' })
  } else if (key === 'settings') {
    router.push({ name: 'Settings' })
  }
}
</script>

<style scoped>
.username {
  margin-left: 8px;
  font-weight: 500;
}

/* 移动端隐藏用户名文字 */
@media (max-width: 768px) {
  .username {
    display: none;
  }
}
</style>

