<!--
 * @Description: 
 * @Author: zenghua.wang
 * @Date: 2023-06-20 14:29:45
 * @LastEditors: zenghua.wang
 * @LastEditTime: 2025-02-14 11:39:56
-->
<template>
  <el-dropdown class="layout-avatar">
    <span class="el-dropdown-link">
      <el-avatar :size="30" class="avatar" :src="userInfo.avatar || getAssetsFile('images/avatar.gif')" />
      <span class="layout-avatar-name">{{ userInfo.userName || '游客' }}</span>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :command="0"> 当前角色：{{ userInfo.nickName }} </el-dropdown-item>
        <el-dropdown-item :command="5" divided @click="logOut">
          <el-icon><SwitchButton /></el-icon>退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup name="layout-avatar">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/store/modules/user';
import { useTagsViewStore } from '@/store/modules/tagsView';
import { usePermissionStore } from '@/store/modules/permission';
import { getAssetsFile } from '@/utils';
import { LogOut } from '@/apis/login';

const router = useRouter();
const UserStore = useUserStore();
const TagsViewStore = useTagsViewStore();
const PermissionStore = usePermissionStore();

// 用户信息
const userInfo = computed(() => UserStore.getUserInfo());

const logOut = async () => {
  ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    LogOut().then((res) => {
      if (res.code === 200) {
        UserStore.logout();
        TagsViewStore.clearVisitedView();
        PermissionStore.clearRoutes();
        router.push({ path: '/login' });
        ElMessage({
          type: 'success',
          message: '退出登录成功！',
        });
        localStorage.removeItem('daimp-front-main_user_store');
      }
    });
  });
};
</script>

<style lang="scss" scoped>
.layout-avatar {
  &-name {
    margin-left: 8px;
    @include ellipsis;
  }
  .el-dropdown-link {
    @include flex-row;

    align-items: center;
    cursor: pointer;
  }
}
</style>
