<template>
  <div class="bg-layer" :style="layerStyle">
    <img
      v-for="(imgSrc, index) in filteredBackgroundImages"
      :key="index"
      v-smart-img
      :src="imgSrc"
      :alt="`background-${index}`"
      :class="['bg-image', imageClass]"
      :style="imageStyle"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 背景图片数组
  backgroundImages: {
    type: Array,
    required: true,
    default: () => [],
  },

  // 层级样式
  layerStyle: {
    type: Object,
    default: () => ({}),
  },

  // 图片样式
  imageStyle: {
    type: Object,
    default: () => ({}),
  },

  // 图片类名
  imageClass: {
    type: String,
    default: '',
  },

  // 是否过滤空图片
  filterEmpty: {
    type: Boolean,
    default: true,
  },
})

// 过滤掉空的图片路径
const filteredBackgroundImages = computed(() => {
  if (props.filterEmpty) {
    return props.backgroundImages.filter((img) => img && img.trim() !== '')
  }
  return props.backgroundImages
})
</script>

<style scoped>
.bg-layer {
  width: 100vw;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-image {
  width: 100vw;
  object-fit: cover;
  object-position: center top;
  display: block;
}
</style>
