<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps({
  src: {
    required: true,
    type: String
  }
})
function handleImageUrl(url: string) {
  if (/^(https?:)/.test(url)) {
    return url
  } else {
    return window.GLOBAL_CONFIG.oss + url
  }
}

const ImageList = reactive(props.src.split(';').map((url) => handleImageUrl(url)))

</script>

<template>
  <div class="w-full">
    <template v-if="src">
      <el-image class="h-full" :src="ImageList[0]" fit="contain" :preview-src-list="ImageList" :z-index="3001" preview-teleported>
      </el-image>
    </template>
    <template v-else>
      <span class="cursor-pointer">暂无图片</span>
    </template>
  </div>

</template>
