<template>
  <el-dropdown @command="handleCommand">
    <div class="user-info">
      <el-avatar :size="32" :src="userInfo?.avatar" />
      <span class="font-medium text-base">{{ userInfo?.name || '用户' }}</span>
      <el-icon><arrow-down /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="setting">
          <el-icon size="var(--el-font-size-extra-large)" class="mr-2">
            <Setting />
          </el-icon>
          <span>个人设置</span>
        </el-dropdown-item>
        <el-dropdown-item divided command="logout">
          <icon name="exit" size="var(--el-font-size-extra-large)" :type="2" class="mr-2" />
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const handleCommand = (command: string) => {
  switch (command) {
    case 'setting':
      router.push('/user/setting')
      break
    case 'logout':
      ElMessageBox.confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          userStore.logout()
          ElMessage.success('退出登录成功')
        })
        .catch(() => {})
      break
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  @apply cursor-pointer flex items-center gap-2 px-2 py-1 rounded-md transition-colors;

  &:hover {
    background-color: var(--el-fill-color-dark);
  }
}
</style>
