<template>
  <div id="default-carousel" class="relative w-full" data-carousel="slide">
    <!-- Carousel wrapper -->
    <div class="relative overflow-hidden rounded-lg h-[600px]">
      <!-- Item 1 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="" alt="Bordered avatar">
        <p>子墨</p>
      </div>
      <!-- Item 2 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 3 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 4 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
      <!-- Item 5 -->
      <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <img src="" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
      </div>
    </div>
    <!-- Slider indicators -->
    <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
      <button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
      <button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
    </div>
    <!-- Slider controls -->
    <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="sr-only">Previous</span>
        </span>
    </button>
    <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
    </button>
  </div>
</template>
<script>
// 这里假设你正在使用 Vue.js
export default {
  data() {
    return {
      currentSlide: 0, // 当前显示的幻灯片索引
      totalSlides: 5,  // 总共的幻灯片数量
    };
  },
  methods: {
    showSlide(index) {
      // 显示特定索引的幻灯片
      const slides = document.querySelectorAll('[data-carousel-item]');
      slides.forEach((slide, i) => {
        if (i === index) {
          slide.classList.remove('hidden');
        } else {
          slide.classList.add('hidden');
        }
      });
    },
    updateIndicators() {
      // 更新指示器的状态
      const indicators = document.querySelectorAll('[data-carousel-slide-to]');
      indicators.forEach((indicator, i) => {
        if (i === this.currentSlide) {
          indicator.setAttribute('aria-current', 'true');
        } else {
          indicator.setAttribute('aria-current', 'false');
        }
      });
    },
    nextSlide() {
      // 显示下一张幻灯片
      this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
      this.showSlide(this.currentSlide);
      this.updateIndicators();
    },
    prevSlide() {
      // 显示上一张幻灯片
      this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
      this.showSlide(this.currentSlide);
      this.updateIndicators();
    },
  },
  mounted() {
    // 默认显示第一张幻灯片
    this.showSlide(this.currentSlide);

    // 绑定事件处理程序，处理前进和后退按钮的点击事件
    document.querySelector('[data-carousel-prev]').addEventListener('click', this.prevSlide);
    document.querySelector('[data-carousel-next]').addEventListener('click', this.nextSlide);
  },
  beforeDestroy() {
    // 在组件销毁前解除事件监听
    document.querySelector('[data-carousel-prev]').removeEventListener('click', this.prevSlide);
    document.querySelector('[data-carousel-next]').removeEventListener('click', this.nextSlide);
  },
};

</script>