<template>
  <el-dropdown placement="bottom-start">
    <span class="el-dropdown-link">
      <el-avatar :size="45" fit="contain" :src="avatar" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="userInfo">个人信息</el-dropdown-item>
        <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import useInstance from "@/hooks/useInstance";
import { cleanSession, getToken } from "@/utils/auth";
import { store } from "@/store/index";
import { ref, reactive } from "vue";
import router from "@/router";
const { global } = useInstance();

const avatar = store.state.user.userAvatar;

//退出登录
const loginOut = async () => {
  let confirm = await global.$lqconfirm("确定退出登录吗?");
  if (confirm) {
    //跳到登录
    window.location.href = "/#/login";
    //清空session
    cleanSession();
  }
};

//跳转个人信息
const userInfo = async () => {
  router.push({ path: "/user" });
};
</script>
