<template>
  <div
    class="app-header-user flex justify-center items-center"
    v-loading="userStore.initializing"
    @click="userStore.logined && $emit('click')"
  >
    <template v-if="!userStore.initializing">
      <!-- 仅收紧类型 -->
      <template v-if="userInfo && userStore.logined">
        <div class="flex items-center">
          <el-avatar :src="getAvatarURL(userInfo.avatar)" />
        </div>
        <div class="app-header-user__username">
          {{ userInfo.name }}
        </div>
      </template>
      <el-button class="app-header-user__login" v-else type="primary" @click="$emit('login')">
        登录
      </el-button>
    </template>
  </div>
</template>
<style lang="scss" scoped>
.app-header-user {
  min-width: 50px;
  gap: 10px;
}
</style>
<script setup lang="ts">
import { getAvatarURL } from '@/api';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
defineEmits(['logout', 'login', 'click']);
</script>
