<template>
  <div v-bind="$attrs" class="relative w-full">
    <swiper ref="swiper" class="relative w-full h-full" :options="swiperOption">
      <swiper-slide v-for="(item, index) in items" :key="index" class="cursor-pointer">
        <div class="w-full h-full absolute bg-[rgba(0,0,0,0.1)]"></div>
        <img class="w-full h-full object-cover transform hover:scale-120" @click="handleGoTo(item)"  :src="item.bannerUrl" />

        <div
          :class="`absolute bottom-23px left-26px font-normal z-50 flex text-white text-size-20px ${
            titleClass ?? ''
          }`"
        >
          {{ item.content }}
        </div>
      </swiper-slide>
    </swiper>
    <div v-if="showPagination" :class="`absolute bottom-22px right-12px z-50 flex ${paginationclass}`">
      <div
        @click="clickPagination(index)"
        v-for="(item, index) in items"
        :key="index"
        :class="`dot ${index === activeIndex ? 'selected' : ''}`"
      ></div>
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.min.css";

import SwiperCore, { Autoplay } from "swiper/core";
SwiperCore.use([Autoplay]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    items: {
      default: [],
    },
    showPagination: {
      default: false,
    },
    paginationclass:{
      default: ''
    } ,
    titleClass: {},
  },
  computed: {
    paginationId: () => nanoid(6),
    swiperOption: () => ({
      slidesPerView: 1,
      click: false,
      // loop: true,
      autoplay: {
        delay: 2000,
        // pauseOnMouseEnter: true,
      },
    }),
  },

  data() {
    return {
      activeIndex: 0,
    };
  },

  methods: {
    handleGoTo(item){
      if(item.link){

        if(item.link.startsWith("http")){
            window.open(item.link);
        }else{
          this.$router.push(item.link);
        }

      }
    },
    change(swiper) {
      if (!this.showPagination) return;
      this.activeIndex = swiper.activeIndex;
    },
    clickPagination(index) {
      this.$refs.swiper.$swiper.slideTo(index);
    },
  },
  mounted() {
    this.$refs.swiper.$swiper.on("activeIndexChange", this.change);
  },
};
</script>
<style>
.swiper-pagination-bullet-active {
  @apply bg-white;
}
.swiper-pagination-bullet {
  @apply bg-rgba(255,255,255,1);
}
.dot {
  @apply w-12px h-12px rounded-full bg-[rgba(255,255,255,0.3)] mr-10px cursor-pointer;
}
.dot.selected {
  @apply bg-white;
}
</style>
