<template>
  <n-dropdown
    :show-arrow="true"
    trigger="click"
    :options="options"
    @select="handleSelect"
  >
    <n-button quaternary>
      <n-avatar
        size="small"
        round
        :style="{
          color: 'yellow',
          backgroundColor: '#eee',
        }"
      ></n-avatar>
    </n-button>
  </n-dropdown>
</template>
<script setup lang="ts">
  import api from "@/axios";
  import { LOGIN_ROUTER, USER_CENTER } from "@/config/constant";
  import LineMdLogOut from "@/components/icon/src/icons/LineMdLogOut.vue";
  import LineMdPersonFilled from "@/components/icon/src/icons/LineMdPersonFilled.vue";
  import { useUserStore } from "@/stores/user";
  import { useTestStore } from "@/stores/test";
  import { useMessage } from "naive-ui";
  import { useRouter } from "vue-router";
  const router = useRouter();
  // const userStore = useUserStore();
  const userTestStore = useTestStore()
  const message = useMessage();
  const options = ref([
    {
      label: "个人中心",
      key: "userCenter",
      icon: () => h(LineMdPersonFilled),
    },
    {
      label: "退出登录",
      key: "logout",
      icon: () => h(LineMdLogOut),
    },
  ]);
  const handleSelect = async (key: string | number) => {
    switch (key) {
      case "logout":
        // await api.delete("/login/logout");
        // userStore.resetUserInfo();
        userTestStore.resetUserTest()
        router.replace(LOGIN_ROUTER.path).then(() => {
          message.success("退出登录成功！");
        });
        break;
      case "userCenter":
        router.push(USER_CENTER.path);
        break;
    }
  };
</script>
