<script setup lang="ts">
import { computed, ref } from 'vue';
import type { VNode } from 'vue';
import { useMessage } from 'naive-ui';
import { ExitOutline } from '@vicons/ionicons5';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useSvgIcon } from '@/hooks/common/icon';
import { $t } from '@/locales';

defineOptions({
  name: 'UserAvatar'
});

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

// type DropdownKey = 'logout';

// type DropdownOption =
//   | {
//       key: DropdownKey;
//       label: string;
//       icon?: () => VNode;
//     }
//   | {
//       type: 'divider';
//       key: string;
//     };

// const options = computed(() => {
//   const opts: DropdownOption[] = [
//     {
//       label: $t('common.logout'),
//       key: 'logout',
//       icon: SvgIconVNode({ icon: 'ph:sign-out', fontSize: 18 })
//     }
//   ];

//   return opts;
// });

// function logout() {
//   window.$dialog?.info({
//     title: $t('common.tip'),
//     content: $t('common.logoutConfirm'),
//     positiveText: $t('common.confirm'),
//     negativeText: $t('common.cancel'),
//     onPositiveClick: () => {
//       authStore.resetStore();
//     }
//   });
// }

// function handleDropdown(key: DropdownKey) {
//   if (key === 'logout') {
//     logout();
//   } else {
//     // If your other options are jumps from other routes, they will be directly supported here
//     routerPushByKey(key);
//   }
// }

const showModal = ref(false);

function onNegativeClick() {
  showModal.value = false;
}

function onPositiveClick() {
  showModal.value = false;
  localStorage.removeItem('token');
  // location.href = './login';
  toLogin();
}
</script>

<template>
  <!--
 <NButton v-if="!authStore.isLogin" 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.userName }}</span>
      </ButtonIcon>
    </div>
  </NDropdown>
-->

  <NButton quaternary circle style="width: 60px" @click="showModal = true">
    <img src="@/assets/yonghu.png" alt="" style="width: 16px; height: 16px; margin-right: 4px" />
    用户
  </NButton>
  <NModal
    v-model:show="showModal"
    :mask-closable="false"
    preset="dialog"
    title="确认"
    content="你确认退出登录吗?"
    positive-text="确认"
    negative-text="取消"
    @positive-click="onPositiveClick"
    @negative-click="onNegativeClick"
  />
</template>

<style scoped></style>
