<template>
  <el-dropdown trigger="click" type="primary">
    <div class="flex-center cursor">
      <AppAvatar>
        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
      </AppAvatar>
      <span class="ml-4">{{ user.name }}</span>
      <el-icon class="el-icon--right">
        <CaretBottom/>
      </el-icon>
    </div>

    <template #dropdown>
      <el-dropdown-menu class="avatar-dropdown">
        <el-dropdown-item @click="openResetPassword">
          重置密码
        </el-dropdown-item>
        <el-dropdown-item class="border-t" @click="logout">
          退出
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <ResetPassword ref="resetPasswordRef"></ResetPassword>
</template>
<script setup lang="ts">
import ResetPassword from './ResetPassword.vue'
import { layout } from "@/utils/api";
const router = useRouter()

const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()

const openResetPassword = () => {
  resetPasswordRef.value?.open()
}

const logout = () => {
  layout().then(() => {
    router.push({name: 'login'})
  })
}
const user = JSON.parse(sessionStorage.getItem("userInfo"));
</script>
