<template>
  <el-dropdown trigger="click">
    <div class="user-info">
      <img :src="UserAvatar" class="user-avatar" />
      <span class="user-name">{{ userStore.info?.realname }}</span>
      <img :src="ArrowIcon" class="dropdown-icon" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="emit('switchAccount')">切换账号</el-dropdown-item>
        <el-dropdown-item @click="emit('modifyPassword')">修改密码</el-dropdown-item>
        <el-dropdown-item @click="userInfo = ''">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
  import UserAvatar from 'assets/images/user-avatar@1X.png';
  import ArrowIcon from 'assets/svg/arrow.svg';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  const emit = defineEmits(['switchAccount', 'modifyPassword']);
</script>

<style lang="scss" scoped>
  .user-info {
    @include flex-center;
    gap: 4cpx;
  }
  .user-avatar {
    width: 30cpx;
    height: 30cpx;
  }
  .user-name {
    font-weight: 400;
    font-size: 14cpx;
    color: $text-color;
  }
  .dropdown-icon {
    width: 25cpx;
    height: 25cpx;
  }
  :deep(.el-dropdown-menu__item) {
    padding: 4cpx 37cpx;
    font-weight: 400;
    font-size: 14cpx;
    color: #606266;
    &:hover {
      background-color: $primary-color;
      color: $white-color;
      border-radius: 4cpx;
    }
  }
</style>
