<template>
  <div class="flex w-2/5 pl-1 pr-1 hover:cursor-pointer">
    <el-dropdown size="large" placement="bottom-end" class="flex items-center justify-center w-full hover:cursor-pointer">
      <div class="flex w-fit lg:items-center">
        <div class="rounded-full w-7 h-7"></div>
        <!-- <img :src="userStore.getAvatar" class="rounded-full w-7 h-7" /> -->
        <div class="hidden ml-2 lg:block">{{ userStore.getNickname }}</div>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="w-28">
          <el-dropdown-item>
            <Icon name="user" /> <router-link :to="{ path: '/user/center' }">个人信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item divided @click="logout">
            <Icon name="power" className="mr-1 w-4 h-4" />
            退 出
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user'
import Message from '@/support/message'

const userStore = useUserStore()

const logout = () => {
  Message.confirm('确定退出系统吗?', () => {
    userStore.logout()
  })
}
</script>
