<template>
  <view class="image-swiper">
    <swiper
      class="swiper-box"
      :autoplay="false"
      :interval="3000"
      :duration="1000"
      :current="active"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in thumbnails"
        :key="index"
      >
        <image :src="item.url" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <view class="custom-indicator">
      图片{{ active + 1 }}/{{ thumbnails.length }}
    </view>

    <view class="thumbnail-box">
      <view
        v-for="(thumb, index) in thumbnails"
        :key="index"
        class="thumbnail-item"
        @click="handleThumbnailClick(index)"
      >
        <image :src="thumb.url" mode="aspectFill"></image>
        <text>{{ thumb.description }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const active = ref(0);

const thumbnails = ref([
  {
    url: "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
    description: "瑶山古寨",
  },
  {
    url: "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
    description: "民俗表演",
  },
  {
    url: "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
    description: "特色美食",
  },
  {
    url: "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
    description: "传统服饰",
  },
  {
    url: "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
    description: "其他",
  },
]);

const handleThumbnailClick = (index) => {
  active.value = index;
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
