<template>
  <div class="container">
    <div class="big_weapon">
      <swiper
        @swiper="setWeaponSwiper"
        :slides-per-view="1"
        :thumbs="{ swiper: weaponThumbsSwiper }"
        :modules="modules"
        :followFinger="false"
        class="weapon-big"
        :navigation="{
          nextEl: '.swiper-button-next-btn',
          prevEl: '.swiper-button-prev-btn',
        }"
      >
        <SwiperSlide
          v-for="(slideContent, index) in weaponListBig"
          :key="index"
        >
          <div class="weapon-name" ><img :src="weapoName[index].name" alt="" /></div>
          <Weapon3dLoader :filePath="slideContent.url"></Weapon3dLoader>
        </SwiperSlide>
      </swiper>
    </div>
    <div class="thumbs_weapon_container">
      <Swiper
        @swiper="setWeaponThumbsSwiper"
        :slides-per-view="4"
        :modules="modules"
        :space-between="20"
        class="weaponThumbs"
        :slideToClickedSlide="true"
        :centeredSlidesBounds="true"
        :multipleActiveThumbs="false"
      >
        <SwiperSlide v-for="(slideContent, index) in weaponList" :key="index">
          <div class="weapon_thumb">
            <div
              :class="
                activeIndex == index
                  ? 'weapon-moss-bg'
                  : 'weapon-moss-active-bg'
              "
            >
              <img class="weapon_thumb_img" :src="slideContent.img" />
            </div>
            <div class="img-boder" v-if="activeIndex == index">
              <img
                src="@/assets/img/home/weapon/weapon-bottom-boder.png"
                alt=""
                srcset=""
              />
            </div>
            <div v-if="test(index, slideContent)" class="weapon-bg">
              <!-- <img
              v-if="test(index, slideContent)"
              class="weapon_thumb_bg  weapon_thumb_bg-active"
              :src="slideContent.img"
            /> -->
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
      <div class="swiper-button-prev-btn">
        <img src="@/assets/img/home/weapon/next.png" alt="" />
      </div>
      <div class="swiper-button-next-btn">
        <img src="@/assets/img/home/weapon/prev.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { Thumbs, FreeMode, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import Weapon3dLoader from "./WeaponModelLoader.vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/free-mode";
const modules = [FreeMode, Navigation, Thumbs];
const weaponSwiper = ref(null);
const weaponThumbsSwiper = ref(null);
const activeIndex = ref(0);
const weaponList = reactive([
  { id: 1, img: new URL("@/assets/img/home/weapon/70001.png", import.meta.url).href },
  { id: 2, img: new URL("@/assets/img/home/weapon/70002.png", import.meta.url).href },
  { id: 3, img: new URL("@/assets/img/home/weapon/70003.png", import.meta.url).href },
  { id: 4, img: new URL("@/assets/img/home/weapon/70004.png", import.meta.url).href },
  { id: 5, img: new URL("@/assets/img/home/weapon/70005.png", import.meta.url).href },
  { id: 6, img: new URL("@/assets/img/home/weapon/70006.png", import.meta.url).href },
  { id: 7, img: new URL("@/assets/img/home/weapon/70007.png", import.meta.url).href },
]);
const weaponListBig = reactive([
  { id: 1, url: "/70001.gltf" },
  { id: 2, url: "/70002.gltf" },
  { id: 3, url: "/70003.gltf" },
  { id: 4, url: "/70004.gltf" },
  { id: 5, url: "/70005.gltf" },
  { id: 6, url: "/70006.gltf" },
  { id: 7, url: "/70007.gltf" },
]);
const weapoName = reactive([
  {
    name: new URL("@/assets/img/home/weapon/name-7001.png", import.meta.url).href,
  },{
    name: new URL("@/assets/img/home/weapon/name-7002.png", import.meta.url).href,
  },{
    name: new URL("@/assets/img/home/weapon/name-7003.png", import.meta.url).href,
  }, {
    name: new URL("@/assets/img/home/weapon/name-7004.png", import.meta.url).href,
  }, {
    name: new URL("@/assets/img/home/weapon/name-7005.png", import.meta.url).href,
  },{
    name: new URL("@/assets/img/home/weapon/name-7006.png", import.meta.url).href,
  },{
    name: new URL("@/assets/img/home/weapon/name-7007.png", import.meta.url).href,
  },
]);

const setWeaponThumbsSwiper = (swiper) => {
  weaponThumbsSwiper.value = swiper;
  console.log("setWeaponThumbsSwiper ", swiper);
  // swiper.on('slideChange', function() {
  //   console.log('slide changed', swiper);
  //   activeIndex.value = swiper.activeIndex;
  // })
};

const setWeaponSwiper = (swiper) => {
  weaponSwiper.value = swiper;
  console.log("slide changed", swiper);
  swiper.on("slideChange", function () {
    console.log("slide changed weapon", swiper);
    activeIndex.value = weaponSwiper.value.activeIndex;
  });
};

// const onSlideChange = () => {
//   activeIndex.value = weaponSwiper.value.activeIndex;
// };

function test(index, sc) {
  console.log(index, "oo");
  return activeIndex.value == index;
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}
.big_weapon {
  width: 1440px;
  // margin-left: 156px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  position: relative;
  justify-content: center;
  .weapon-name{
   position: absolute;
   left: 100px;
   top: 40px;
  }
}
// .weapon_big_image {
//   width:400px;
//   height:400px;
// }
.thumbs_weapon_container {
  user-select: none;
  position: relative;
  // padding: 0 40px;
  width: 940px;
  height: 200px;
  margin: 0 auto;
  .swiper-button-prev::after {
    display: none;
  }
  .swiper-button-next::after {
    display: none;
  }
  .swiper-button-prev-btn {
    position: absolute;
    left: -120px;
    top: -280px;
    z-index: 5;
  }
  .swiper-button-next-btn {
    position: absolute;
    z-index: 6;
    right: -120px;
    top: -280px;
  }

  .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
}
.weapon_thumb {
  width: 240px;
  // height: 115px;
  padding-bottom: 100px;
}
.weapon_thumb_img {
  display: block;
  position: absolute;
  left: 106px;
  top: 60px;
  max-width: 90%;
  height: auto;
  // opacity: 0.6;
  // background: rgba(131, 188, 217, 0.3);
  transform: translate(-50%, -50%);
}
.weapon_thumb_bg {
  display: block;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 220px;
  height: 84px;
  background: rgba(255, 225, 117, 1);
  transform: translate(-50%, -50%);
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 0px,
    100% calc(100% - 15px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 0px),
    0 10px
  );
}
.weapon-bg {
  position: relative;
 
}
.weapon-bg::before {
  position: absolute;
  content: "";
  bottom: -163px;
  left: 15px;
  display: block;
  width: 170px;
  height: 17px;
  background: url("./@/assets/img/home/weapon-bottom-boder.png") no-repeat;
  background-size: contain;
}

.HeroThumbs {
}
.weapon-moss-bg {
  background: url("@/assets/img/home/weapon/weapon-active-bg.png") no-repeat;
  background-size: contain;
  height: 115px;
  width: 220px;
  position: relative;
}
.weapon-moss-active-bg {
  background: url("@/assets/img/home/weapon/weapon-bg.png") no-repeat;
  height: 115px;
  width: 220px;
  background-size: contain;
}
.weapon-moss-bg ::before {
  width: 100%;
  height: 8px;
  position: absolute;
  left: 0;
  top: 100px;
  background: url("@/assets/img/home/weapon/weapon-bottom-boder.png") no-repeat;
  background-size: 100% 100%;
}
.img-boder {
  margin-top: 10px;
}
</style>
