<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"
      loading="lazy"
      decoding="async"
    />
  </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: '',
  },

  // 保留 useCanvas 入参兼容历史页面；当前不再启用 canvas 背景。
  // 大 canvas 会增加低端机内存和绘制压力，实际防扒取收益有限。
  useCanvas: {
    type: Boolean,
    default: false,
  },

  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;
  display: block;
  object-fit: cover;
  object-position: center top;
}
</style>
