<template>
  <!-- 产品图片轮播 + 自定义指示点 -->
  <view class="detail-swiper">
    <swiper
      class="swiper"
      :circular="true"
      :indicator-dots="false"
      @change="onChange"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <view class="swiper-item">
          <image class="swiper-image" :src="item" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 自定义指示点：active 16x8 橙色胶囊，inactive 8x8 黑色 20% -->
    <view class="dots">
      <view
        v-for="(item, index) in images"
        :key="index"
        class="dot"
        :class="{ active: current === index }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DetailSwiper',
  props: {
    images: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onChange(e) {
      this.current = e.detail.current
    }
  }
}
</script>

<style scoped>
.detail-swiper {
  position: relative;
  width: 100%;
  background: #f2f2f2;
}
.swiper {
  width: 100%;
  height: 500rpx; /* 260px */
}
.swiper-item {
  width: 100%;
  height: 100%;
}
.swiper-image {
  width: 100%;
  height: 100%;
}

/* 指示点：覆盖在图片底部 */
.dots {
  position: absolute;
  bottom: 20rpx; /* 距图片底部 10px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12rpx; /* 6px */
}
.dot {
  width: 16rpx; /* 8px */
  height: 16rpx;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8rpx; /* 4px */
}
.dot.active {
  width: 32rpx; /* 16px */
  height: 16rpx; /* 8px */
  background: #ff6800;
}
</style>
