<!-- 多图显示组件 -->
<template>
  <div class="multi-image-display">
    <template v-if="imageList.length > 0">
      <div 
        v-for="(image, index) in imageList" 
        :key="index" 
        class="image-item"
      >
        <el-image
          :src="getFullImageUrl(image)"
          :preview-src-list="imageList.map(img => getFullImageUrl(img))"
          :initial-index="index"
          :preview-teleported="true"
          :style="`width: ${imageWidth}; height: ${imageHeight};`"
          fit="cover"
          lazy
        />
      </div>
    </template>
    <div v-else class="no-image">
      暂无图片
    </div>
  </div>
</template>

<script setup lang="ts">
import { getFullImageUrl } from "@/utils";

interface Props {
  images?: string;
  imageWidth?: string;
  imageHeight?: string;
}

const props = withDefaults(defineProps<Props>(), {
  images: "",
  imageWidth: "100px",
  imageHeight: "100px"
});

// 将逗号分隔的图片字符串转换为数组
const imageList = computed(() => {
  if (!props.images) return [];
  
  // 如果是数组格式，直接返回
  if (Array.isArray(props.images)) {
    return props.images;
  }
  
  // 如果是逗号分隔的字符串，分割成数组
  if (typeof props.images === 'string' && props.images.includes(',')) {
    return props.images
      .split(',')
      .map(url => url.trim())
      .filter(url => url !== '');
  }
  
  // 如果是单个URL，返回单元素数组
  if (props.images) {
    return [props.images];
  }
  
  return [];
});
</script>

<style scoped lang="scss">
.multi-image-display {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  border-radius: 6px;
  overflow: hidden;
}

.no-image {
  color: #999;
  font-size: 14px;
}
</style>