<template>
  <div class="userDropdown">
    <a-dropdown>
      <span class="avatar">
        <a-avatar>
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
        <span class="username"> {{ account }} </span>
      </span>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="javascript:;" @click="logout">退出登录</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'
import { message } from 'ant-design-vue'

defineOptions({
  name: 'userDropdown',
})

const userStore = useUserStore()
const { account } = userStore.getUserInfo()

const logout = async () => {
  console.log('退出登录')
  await userStore.logout(true) // 主动退出登录，需调用接口
  message.success('退出登录成功')
}
</script>

<style scoped lang="less">
.avatar {
  display: inline-block;
}
.username {
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
}
.userDropdown {
  cursor: pointer;
  .ant-dropdown-trigger {
    display: block;
  }
}
</style>
