<template>
    <div class="user-info flex items-center px-[15px] relative">
        <img src="./images/default_avatar.png" class="w-[60px] h-[60px] relative z-10" alt="" />
        <div class="tx-regular text-[18px] ml-[10px] relative z-10">未登录</div>
        <img :src="bgImgUrl" alt="" v-if="bgImgUrl" class="bg-img" />
    </div>
</template>
<script lang="ts" setup>
import useAppStore from '@/stores/modules/app'
import type { PropType } from 'vue'
import type options from './options'
import { computed } from 'vue'
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
console.log('props', props.content)
const bgImgUrl = computed(() => {
    const url = props?.content?.data[0]?.image || ''
    return url ? getImageUrl(url) : ''
})
// let bgImgUrl = props?.content?.data[0]?.image || ''
// if (bgImgUrl) {
//     bgImgUrl = getImageUrl(bgImgUrl)
// }
</script>

<style lang="scss" scoped>
.user-info {
    position: relative;
    height: 220px;
    .bg-img {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 0;
        width: 100%;
    }
}
</style>
