<template>
  <div class="pv-swiper" :style="{ height: props.height + 'px' }">
    <div class="pv-track">
      <div
        v-for="(img, i) in (props.images || [])"
        :key="i"
        class="pv-slide"
        :style="{ backgroundImage: 'url(' + img + ')' }"
      >
        <span v-if="!img" class="pv-placeholder">轮播图 {{ i + 1 }}</span>
      </div>
    </div>
    <div v-if="(props.images || []).length > 0" class="pv-dots">
      <span v-for="(_, i) in (props.images || [])" :key="i" class="pv-dot" :class="{ active: i === 0 }"></span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({ props: { type: Object, default: () => ({}) } })
</script>

<style scoped>
.pv-swiper { position: relative; background: #e8e8e8; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pv-track { display: flex; width: 100%; height: 100%; overflow: hidden; }
.pv-slide { min-width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.pv-placeholder { color: #999; font-size: 14px; background: rgba(255,255,255,.5); padding: 4px 12px; border-radius: 4px; }
.pv-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.pv-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.pv-dot.active { background: #fff; width: 16px; border-radius: 3px; }
</style>
