<script setup lang="ts">
import { computed } from 'vue';
import type { DropdownOption } from 'naive-ui';
import type { RouteKey } from '@elegant-router/types';
import { useAuthStore } from '@/store/modules/auth';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useSvgIcon } from '@/hooks/common/icon';

defineOptions({
  name: 'UserAvatar'
});

const authStore = useAuthStore();
const { routerPushByKey, toLogin } = useRouterPush();
const { SvgIconVNode } = useSvgIcon();

// 计算属性获取认证状态
const isAuthenticated = computed(() => {
  const globalConfig = (window as any).uiGlobalConfig;
  return globalConfig?.IsAuthenticated ?? false;
});

function loginOrRegister() {
  toLogin();
}

const options = computed<DropdownOption[]>(() => [
  // {
  //   label: $t('common.userCenter'),
  //   key: 'user_center',
  //   icon: SvgIconVNode({ icon: 'carbon:user-avatar', fontSize: 18 })
  // },
  {
    label: $t('common.logout'),
    key: 'logout',
    icon: SvgIconVNode({ icon: 'carbon:logout', fontSize: 18 })
  }
]);

function handleDropdown(key: string) {
  if (key === 'logout') {
    authStore.resetStore();
  } else if (key === 'user_center') {
    routerPushByKey(key as RouteKey);
  }
}
</script>

<template>
  <NButton v-if="!isAuthenticated" quaternary @click="loginOrRegister">
    {{ $t('page.login.common.loginOrRegister') }}
  </NButton>
  <NDropdown v-else placement="bottom" trigger="click" :options="options" @select="handleDropdown">
    <div>
      <ButtonIcon>
        <SvgIcon icon="ph:user-circle" class="text-icon-large" />
        <span class="text-16px font-medium">{{ authStore.userInfo.FullName }}</span>
      </ButtonIcon>
    </div>
  </NDropdown>
</template>

<style scoped></style>
