<template>
    <ElImage :src="finalSrc" :preview-src-list="previewList" preview-teleported loading="lazy" :fit="fit">
        <template #error>
            <div class="h-full flex items-center justify-center text-sm text-neutral-400">
                <PhotoOff style="width: 20px" />
            </div>
        </template>
    </ElImage>
</template>
<script setup>
import { computed } from 'vue'
import uri from 'fast-uri'
import { ElIcon } from 'element-plus'
import { PhotoOff } from '@vicons/tabler'
const prefix = import.meta.env.VITE_IMAGE_PREFIX
const props = defineProps({
    src: {
        type: [String, Array],
        required: true
    },
    fit: {
        type: String,
        default: 'cover'
    }
})
function resolve(url) {
    if (!url) return ''
    if (/^http.*/.test(url)) return url
    else return uri.resolve(prefix, url)
}
const finalSrc = computed(() => {
    if (Array.isArray(props.src)) {
        return resolve(props.src[0])
    }
    return resolve(props.src)
})
const previewList = computed(() => {
    if (!props.src) {
        return []
    }
    if (Array.isArray(props.src)) {
        return props.src.map((src) => resolve(src))
    }
    return [resolve(props.src)]
})
</script>
