<template>
  <!-- 产品图片轮播 + 自定义指示点
       UI 尺寸固定：宽100% × 高500rpx，仅通过 mode 控制图片完整显示 -->
  <view class="detail-swiper">
    <swiper
      class="swiper"
      :circular="true"
      :indicator-dots="false"
      :current="current"
      @change="onChange"
    >
      <swiper-item v-for="(item, index) in images" :key="index">
        <view class="swiper-item">
          <!-- aspectFit：图片保持原始比例完整显示；
               图片宽高 100% 保证以容器为基准缩放；
               比例不匹配时短边留白，容器背景灰 -->
          <image class="swiper-image" :src="item" mode="aspectFit"></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
    }
  },
  watch: {
    images() {
      // 切换图片数组时重置指示点到第一张
      this.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; /* UI 定死：260px，不再改动 */
}
.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
}
/* 图片：完整显示，保持比例，自动缩放适应容器
   aspectFit + 100% 宽高 = 图片自动等比缩放到能完整放入 100%*500rpx 的容器 */
.swiper-image {
  width: 100%;
  height: 100%;
}

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