<template>
  <div class="relative w-full">
    <van-swipe class="overflow-hidden" :style="swiperStyle" @change="handleSwiperChange">
      <van-swipe-item v-for="(item, index) in thumbnails" :key="index">
        <img class="w-full h-full" :src="item.photoUrl">
      </van-swipe-item>
    </van-swipe>

    <!-- 缩略图部分 -->
    <div v-if="showThumbnails && thumbnails.length"
      class="absolute left-[12px] right-[12px] flex items-end flex-row flex-nowrap" :style="thumbnailBoxStyle">
      <div class="flex-auto h-full whitespace-nowrap" scroll-x="true" :scroll-left="scrollLeft"
        :scroll-with-animation="true" show-scrollbar="false">
        <div class="flex items-center gap-[10px]" v-if="thumbnails.length > 1">
          <div v-for="(thumb, index) in thumbnails" :key="index"
            :class="['shrink-0 text-center', index === active && 'border-2 border-white border-solid']"
            :id="`thumbnail-${index}`" @click="handleThumbnailClick(index)">
            <img class="w-[36px] h-[36px] rounded-card border border-[#171717] border-solid" :src="thumb.photoUrl">
          </div>
        </div>
      </div>

      <div class="ml-[12px] bg-[rgba(0,0,0,0.5)] rounded-[50px] p-[0_6px_4px_8px] flex-auto shrink-0 whitespace-nowrap"
        @click="handlePreviewClick">
        <van-icon name="arrow-left" size="10" color="#fff"></van-icon>
        <span class="mx-[4px] text-[10px] text-white align-center">
          {{ thumbnails.length }}
        </span>
        <van-icon name="arrow-right" size="10" color="#fff"></van-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import { useRouter } from 'vue-router'
import { usePictureStore } from "@/store";

const pictureStore = usePictureStore();
const router = useRouter();

// Props定义
const props = defineProps({
  // 轮播图圆角大小，支持数字(px)或字符串
  borderRadius: {
    type: [Number, String],
    default: 8,
  },
  // 轮播图数据
  images: {
    type: Array,
    default: () => [],
  },
  // 轮播图高度，支持数字(px)或字符串
  height: {
    type: [Number, String],
    default: 200,
  },
  // 是否显示缩略图
  showThumbnails: {
    type: Boolean,
    default: true,
  },
  // 缩略图距离底部的距离，支持数字(px)或字符串
  thumbnailBottom: {
    type: [Number, String],
    default: 0,
  },
});

const active = ref(0);
const scrollLeft = ref(0);

// 计算圆角样式
const borderRadiusStyle = computed(() => {
  const radius =
    typeof props.borderRadius === "number"
      ? `${props.borderRadius}px`
      : props.borderRadius;
  return {
    borderRadius: radius,
  };
});

// 计算轮播图样式（包含高度和圆角）
const swiperStyle = computed(() => {
  const radius =
    typeof props.borderRadius === "number"
      ? `${props.borderRadius}px`
      : props.borderRadius;
  const swiperHeight =
    typeof props.height === "number" ? `${props.height}px` : props.height;
  return {
    borderRadius: radius,
    height: swiperHeight,
  };
});

// 使用传入的图片数据或默认数据
const thumbnails = computed(() => props.images);

// 计算缩略图底部距离样式
const thumbnailBoxStyle = computed(() => {
  const bottom =
    typeof props.thumbnailBottom === "number"
      ? `${props.thumbnailBottom}px`
      : props.thumbnailBottom;
  return {
    bottom: bottom,
  };
});

const handleThumbnailClick = (index) => {
  active.value = index;
  scrollToActiveItem(index);
};

// 滚动到选中项
const scrollToActiveItem = async (index) => {
  await nextTick();

  // 计算每个缩略图项的宽度（包括间距）
  const itemWidth = 58; // 48px宽度 + 10px间距
  const containerWidth = 300; // 大概的容器宽度
  const targetScrollLeft = Math.max(
    0,
    index * itemWidth - containerWidth / 2 + itemWidth / 2,
  );

  scrollLeft.value = targetScrollLeft;
};

// 监听主轮播图变化，同步缩略图滚动
const handleSwiperChange = (e) => {
  const currentIndex = e.detail.current;
  active.value = currentIndex;
  scrollToActiveItem(currentIndex);
};

const handlePreviewClick = () => {
  pictureStore.setPreviewImageData(thumbnails.value);

  router.push({ name: 'album' })
};
</script>
