<template>
  <view class="image-preview-container">
    <!-- 核心：swiper 轮播容器，实现左右滑动 -->
    <swiper 
      class="swiper-box" 
      :current="currentIndex" 
      @change="onSwiperChange"
      :indicator-dots="false" 
    >
      <!-- 遍历图片数组，生成每一张轮播项 -->
      <swiper-item v-for="(item, index) in imageList" :key="index">
        <image 
          class="preview-image" 
          :src="item" 
          mode="aspectFill" 
          @load="onImageLoad"
        ></image>
      </swiper-item>
    </swiper>

    <!-- 自定义左上角页码指示器（1/2 样式） -->
    <view class="page-indicator">
      {{ currentIndex + 1 }} / {{ imageList.length }}
    </view>
  </view>
</template>

<script>
export default {
  name: "ImageSwiper",
  data() {
    return {
      // 图片数组，替换成你的实际图片链接/本地路径
      imageList: [
        "/static/images/first.jpg", // 第一张图（对应你截图的 1/2）
        "/static/images/my.png"  // 第二张图
      ],
      currentIndex: 0, // 当前显示的图片索引（从0开始）
      swiperHeight: 0  // 自适应swiper高度（可选，解决高度塌陷）
    };
  },
  methods: {
    // 监听swiper切换，更新当前索引
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
    // 图片加载完成后，自适应swiper高度（可选，让图片完整显示）
    onImageLoad(e) {
      const { width, height } = e.detail;
      // 按屏幕宽度计算自适应高度
      const systemInfo = uni.getSystemInfoSync();
      const screenWidth = systemInfo.windowWidth;
      const ratio = height / width;
      this.swiperHeight = screenWidth * ratio;
    }
  }
};
</script>

<style scoped>
.image-preview-container {
  position: relative; /* 让页码绝对定位生效 */
  width: 100%;
}

.swiper-box {
  width: 100%;
  /* 固定高度写法（如果不需要自适应，直接写死高度） */
  /* height: 750rpx; */
  /* 自适应高度写法（根据图片高度自动适配） */
  height: v-bind(swiperHeight + 'px');
  background-color: #000; /* 图片背景黑底，更美观 */
}

.preview-image {
  width: 100%;
  height: 100%;
}

/* 左上角页码样式，完全匹配你截图的效果 */
.page-indicator {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  padding: 8rpx 16rpx;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
  color: #fff;
  font-size: 28rpx;
  border-radius: 8rpx;
  z-index: 999; /* 层级最高，不被图片遮挡 */
}
</style>