<template>
    <el-avatar :src="userPhoto ? userPhoto : defaultImage" :size="size"></el-avatar>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed, watch } from 'vue'
import { getUserImg } from '@/api/system/user'
import { useUserStore } from '@/stores/user'
import defaultImage from '@/assets/img/layout/defaultPhoto.jpg'

const userStore = useUserStore()
const userDetail = computed(() => userStore.userDetail)

watch(
    userDetail,
    () => {
        getData()
    },
    {
        deep: true
    }
)

const userPhoto = ref('')

const props = defineProps({
    size: {
        type: Number,
        default: undefined
    }
})

const avatarSize = computed(() => {
    if (typeof props.size === 'number') {
        return `${props.size / 19.2}vw`
    }
    return props.size
})

const getData = async () => {
    if (!userDetail.value) return
    const photo = (userDetail.value as any)?.user?.photo || ''
    if (photo) {
        const userPhotoData = await getUserImg(photo)
        if (userPhotoData && typeof userPhotoData === 'string') {
            userPhoto.value = userPhotoData
        }
    }
}
getData()
</script>
