<template>
  <!-- 帮助菜单 -->
  <el-dropdown popperClass="user-dropdown" class="box-item" trigger="click" @command="handleCommand">
    <button style="display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%">
      <el-image :src="avatar" lazy loading="lazy" style="width: 28px; height: 28px">
        <template #error>
          <img style="width: 28px; height: 28px" :src="logoImg" />
        </template>
      </el-image>
    </button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="logout" :icon="LucideLogOut" class="global-play-click-sound">
          <span> 退出登录 </span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
  import logoImg from '@/assets/images/logo/logo.png';
  import LucideLogOut from '~icons/lucide/log-out';

  const userStore = useUserStore();

  const avatar = computed(() => userStore.userInfo?.avatar || logoImg);

  /**
   * 处理菜单命令
   * @param command - 命令类型
   */
  function handleCommand(command: string) {
    switch (command) {
      case 'logout':
        logout();
        break;
      default:
        break;
    }
  }

  /**
   * 退出登录
   */
  async function logout() {
    try {
      await MessageBox.confirm('您确定要退出登录吗？', '温馨提示');
      userStore.logout();
    } catch (error: any) {
      console.log('error====', error);
    }
  }
</script>
