<template>
  <router-link v-if="userInfo.path" :to="userInfo.path">
    <div class="g-user-avatar">
      <GAvatar
        :src="userInfo.imgSrc"
        :width="size"
        :height="size"
        :name="userInfo.nickname || userInfo.name"
      >
      </GAvatar>
      <span v-if="showName" class="g-user-avatar-name">{{ userInfo.nickname || userInfo.name }}</span>
    </div>
  </router-link>
  <div v-else class="g-user-avatar">
    <GAvatar
      :src="userInfo.imgSrc"
      :width="size"
      :height="size"
      :name="userInfo.nickname || userInfo.name"
    >
      </GAvatar>
    <span v-if="showName" class="g-user-avatar-name">{{ userInfo.nickname || userInfo.name }}</span>
  </div>
</template>

<script lang="ts">
export default {
  name: 'user-avatar'
};
</script>

<script setup lang="ts">
defineOptions({
  name: 'UserAvatar'
});
withDefaults(defineProps<{
  userInfo: {
    nickname?: string;
    name?: string;
    imgSrc: string;
    path?: string;
    iam_id?:string;
  },
  size?: number;
  showName?: boolean;
}>(), {
  userInfo: () => ({
    imgSrc: '',
    path: ''
  }),
  size: 30,
  showName: true
});
</script>

<style scoped lang="scss">
$g-user-avatar-color: #243042;
.g-user-avatar {
  display: inline-flex;
  align-items: center;
  &-name {
    margin-left: 2px;
    color: $g-user-avatar-color;
    font-size: 14px;
    line-height: 1;
  }
}
</style>
