<template>
  <image :src="avatar" class="cu-avatar radius lg"></image>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useUserStore} from "@/store/userStore";
import UserApi from "@/api/UserApi";

const avatar = ref("");
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const userStore = useUserStore();
const user = userStore.getCacheUser(props.id);
user
  ? (avatar.value = user.name)
  : UserApi.getUser(props.id).then((res) => {
      avatar.value = res?.data?.avatar;
      userStore.storeUser(res.data.id,res.data);
    });
</script>

<style scoped></style>
