<template>
  <div class="game-swiper">
    <swiper
      :spaceBetween="10"
      :thumbs="{ swiper: thumbsSwiper }"
      :modules="modules"
      :autoplay="{ delay: 3500, disableOnInteraction: false }"
      class="mySwiper2"
      ref="myRef"
      :navigation="{
        nextEl: '.swiper-button1-next',
        prevEl: '.swiper-button1-prev',
        disabledClass: 'swiper-button-disabled',
      }"
    >
      <swiper-slide v-for="(item, index) of imageList" :key="index">
        <YoutubeVideo :id="item.id" :src="item.videoSrc" :width="1200" :height="600">
        </YoutubeVideo>
        <!-- <img class="img" @click="handleClick(item)" :src="item.imgSrc" /> -->
      </swiper-slide>
    </swiper>
    <swiper
      @swiper="setThumbsSwiper"
      :spaceBetween="50"
      :slidesPerView="5"
      :freeMode="true"
      :watchSlidesProgress="true"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide v-for="(item, index) of imageList" :key="index">
        <img class="img" :src="item.imgSrc" />
      </swiper-slide>
    </swiper>
    <div
      class="swiper-button1-next"
      :class="activeIndex == 0 ? 'swiper-button-disabled' : ''"
      @click="handSlidePrev"
    >
      <img src="@/assets/img/home/next.png" alt="" />
    </div>
    <div
      class="swiper-button1-prev"
      :class="activeIndex == 6 ? 'swiper-button-disabled' : ''"
      @click="handSlideNext"
    >
      <img src="@/assets/img/home/prev.png" alt="" />
    </div>
  </div>
  <!-- <VideoModal ref="videoModal"
    ></VideoModal> -->
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import YoutubeVideo from "./../global/YouTubeVideoDemo.vue";
import VideoModal from "./../global/VideomModal.vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import { FreeMode, Navigation, Thumbs, Autoplay } from "swiper";
const modules = [Thumbs, FreeMode, Autoplay];
const myRef = ref(null);
const activeIndex = ref(null);
const videoModal = ref("");
const videoSrc = ref("");

const imageList = reactive([
  {
    imgSrc: new URL("@/assets/img/home/game/001.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=_SZ5pVCxmro",
    id:'_SZ5pVCxmro'
  },
  {
    imgSrc: new URL("@/assets/img/home/game/002.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=b-Dt2UvK4c4",
    id:'b-Dt2UvK4c4'
  },
  {
    imgSrc: new URL("@/assets/img/home/game/003.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=t8SZPxlqzMI",
    id:'t8SZPxlqzMI'
  },
  {
    imgSrc: new URL("@/assets/img/home/game/004.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=_trHtuEsmDY",
    id:'_trHtuEsmDY'
  },
  {
    imgSrc: new URL("@/assets/img/home/game/005.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=ru1TNcZoS98",
    id:'ru1TNcZoS98'
  },
  {
    imgSrc: new URL("@/assets/img/home/game/006.png", import.meta.url).href,
    videoSrc: "https://www.youtube.com/watch?v=0hSr0KJtgmI",
    id:'0hSr0KJtgmI'
  },
]);
const thumbsSwiper = ref(null);

const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
const handleClick = (item) => {
  videoSrc.value = item.videoSrc;
  console.log(videoModal.value, "videoModal");
  videoModal.value.open();
};
onMounted(() => {
  handSlidePrev();
  handSlideNext();
});
// const handSlidePrev = () => {
//   if (activeIndex.value == 0) {
//     return false;
//   }
// //   console.log(myRef.value?.$el.swiper.activeIndex, " myRef.value");
//   myRef.value?.$el.swiper.slidePrev();
//   activeIndex.value = myRef.value?.$el.swiper.activeIndex;
// //   console.log(activeIndex, "activeIndex00");
// };
// const handSlideNext = () => {
//   if (activeIndex.value == 6) {
//     return false;
//   } else {
//     myRef.value?.$el.swiper.slideNext();
//     activeIndex.value = myRef.value?.$el.swiper.activeIndex;
//     console.log(activeIndex.value, "activeIndex.value01");
//   }
// };

const handSlidePrev = () => {
  if (activeIndex.value === 0) return false;
  myRef.value?.$el.swiper.slidePrev();
  activeIndex.value = myRef.value?.$el.swiper.activeIndex;
};
const handSlideNext = () => {
  if (activeIndex.value === 6) return false;
  myRef.value?.$el.swiper.slideNext();
  activeIndex.value = myRef.value?.$el.swiper.activeIndex;
  console.log(activeIndex.value, "activeIndex.value01");
};
</script>

<style lang="scss" scoped>
.game-swiper {
  position: relative;
  .swiper-button1-next {
    width: 74px;
    height: 74px;
    cursor: pointer;
    top: 0;
    left: 0;
    // z-index: 10;
    top: 263px;
    position: absolute;
    // border-radius: 50%;
    // background: #1b1b1b;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-button1-prev {
    width: 74px;
    height: 74px;
    cursor: pointer;
    top: 263px;
    right: 0;
    // z-index: ;
    // border-radius: 50%;
    position: absolute;
    // background: #1b1b1b;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-button-disabled {
    opacity: 0.5;
    // cursor: auto;
    pointer-events: none;
    cursor: not-allowed;
  }
}
.swiper-button-next {
  /*先将原始箭头的颜色设置为透明的  然后设置一个背景图片  达到修改按钮样式的目的*/
  right: 1.5%;
  left: auto;
  color: rgba(0, 0, 0, 0) !important;
  /* background: url("../../assets/images/start/left.png") center center no-repeat; */
  background-size: 100% 100%;
}

.swiper-button-prev {
  left: 1.5%;
  right: auto;
  color: rgba(0, 0, 0, 0) !important;
  /* background: url("../../assets/images/start/right.png") center center no-repeat; */
  background-size: 100% 100%;
}

/* swiper样式 */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  position: relative;
  /* float: left; */
  height: 600px;
  width: 1200px;

  border-radius: 12px;
}

.mySwiper {
  position: relative;
  margin-top: 30px;
  /* float: left; */
  /* margin-left: 3%; */
  width: 1200px;
  height: 80%;
  box-sizing: border-box;
  padding: 10px 0;
}

.swiper-cover {
  position: absolute;
  width: 100%;
  height: 30%;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0%;
  right: 0%;
  z-index: 100;
}

.swipercover-top {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  height: 30%;
  color: white;
  border-bottom: 2px solid dodgerblue;
}

.swipercover-top-text {
  width: 15%;
  height: 100%;
  border-bottom: 2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipercover-bottom {
  margin-left: 10%;
  width: 100%;
  height: 70%;
}

.mySwiper .swiper-slide {
  width: 100%;
  height: 33%;
  opacity: 0.4;
  border-radius: 4%;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
