<template>
  <div class="container">
    <div class="hero-left">
      <!-- <div class="hero-name">HERO</div> -->
      <div class="hero-boder">
        <!-- <img src="@/assets/img/home/hero/hero-boder.png" alt="" /> -->
      </div>
      <div class="hero-slogan">
        <!-- CEBG has more than 8 heroes for players to choose, and each of them has
        a distinguishing design, skills, and gameplay. All the entry-level
        heroes are free for all the players, so there is no threshold to this
        game. -->

        <div class="hero-boder"></div>

        <div v-for="(item, index) in HeroList" :key="index">
          <XyzTransitionGroup class="item-group" xyz="fade down-100% back-5">
            <div class="miffy-container-active" v-if="activeIndex == index">
              <!-- <div class="miffy">{{ item.name }}</div> -->
              <div class="miffy-slogan">
                {{ item.slogan }}
              </div>
            </div>
          </XyzTransitionGroup>
        </div>

        <div><img src="" alt="" /></div>
      </div>
      <div class="hero-right">
        <div class="big_hero">
          <swiper
            @swiper="setHeroSwiper"
            :slides-per-view="1"
            :thumbs="{ swiper: heroThumbsSwiper }"
            :modules="modules"
            class="hero-big"
            ref="myRef"
            :navigation="{
              nextEl: '.swiper-btn2-next',
              prevEl: '.swiper-btn2-prev',
            }"
          >
            <SwiperSlide v-for="(item, index) in heroList" :key="index">
              <XyzTransitionGroup class="item-group" xyz="fade ease">
                <div class="hero-big-img" :class="index >= 7 ?  'man-bg' :'woman-bg'">
                  <img
                    class="hero_big_image"
                    v-if="activeIndex == index"
                    :src="item.img"
                  />
                </div>
              </XyzTransitionGroup>
            </SwiperSlide>
          </swiper>
          <!-- <div
            class="hero-bg"
            :style="{ transform: 'rotate(' + rotate + 'deg)' }"
          >
            <img src="@/assets/img/home/hero-swiper-bg.png" alt="" />
          </div> -->
          <div class="swiper-btn2-prev">
            <img src="@/assets/img/home/next.png" alt="" />
          </div>
          <div class="swiper-btn2-next">
            <img src="@/assets/img/home/prev.png" alt="" />
          </div>
        </div>
        <div class="thumbs_hero_container">
          <Swiper
            @swiper="setHeroThumbsSwiper"
            :slides-per-view="5"
            :modules="modules"
            :space-between="0"
            class="HeroThumbs"
            :slideToClickedSlide="true"
            :centeredSlidesBounds="true"
            :multipleActiveThumbs="false"
          >
            <SwiperSlide
              v-for="(slideContent, index) in heroAvatarList"
              :key="index"
            >
              <div class="hero_thumb">
                <img class="hero_thumb_img" :src="slideContent.img" />
                <div v-if="test(index, slideContent)" class="weapon-bg">
                  <img
                    v-if="test(index, slideContent)"
                    class="hero_thumb_bg hero_thumb_bg-active"
                    :src="slideContent.img"
                  />
                  <div class="line"></div>
                  <div class="arrowhead">
                    <img src="@/assets/img/home/hero/arrowhead.png" alt="" />
                  </div>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Thumbs, FreeMode, Navigation, EffectFlip } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import { HeroList } from "@/configs/information";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/effect-flip";
import "swiper/css/free-mode";

const heroList = reactive([
  { id: 1, img: require("@/assets/img/home/hero/001.png"), name: "midif" },
  { id: 2, img: require("@/assets/img/home/hero/002.png"), name: "ChipCard" },
  { id: 3, img: require("@/assets/img/home/hero/003.png"), name: "ChipCard" },
  { id: 4, img: require("@/assets/img/home/hero/004.png"), name: "ChipCard" },
  { id: 5, img: require("@/assets/img/home/hero/005.png"), name: "ChipCard" },
  { id: 6, img: require("@/assets/img/home/hero/006.png"), name: "ChipCard" },
  { id: 7, img: require("@/assets/img/home/hero/007.png"), name: "ChipCard" },
  { id: 8, img: require("@/assets/img/home/hero/008.png"), name: "ChipCard" },
  { id: 9, img: require("@/assets/img/home/hero/009.png"), name: "ChipCard" },
  { id: 10, img: require("@/assets/img/home/hero/010.png"), name: "ChipCard" },
]);
const heroAvatarList = reactive([
  { id: 1, img: require("@/assets/img/home/hero/avatar/0001.png") },
  { id: 2, img: require("@/assets/img/home/hero/avatar/0002.png") },
  { id: 3, img: require("@/assets/img/home/hero/avatar/0003.png") },
  { id: 4, img: require("@/assets/img/home/hero/avatar/0004.png") },
  { id: 5, img: require("@/assets/img/home/hero/avatar/0005.png") },
  { id: 6, img: require("@/assets/img/home/hero/avatar/0006.png") },
  { id: 7, img: require("@/assets/img/home/hero/avatar/0007.png") },
  { id: 8, img: require("@/assets/img/home/hero/avatar/0008.png") },
  { id: 9, img: require("@/assets/img/home/hero/avatar/0009.png") },
  { id: 10, img: require("@/assets/img/home/hero/avatar/0010.png") },
]);

const modules = [FreeMode, Navigation, Thumbs, EffectFlip];
const heroSwiper = ref(null);
const heroThumbsSwiper = ref(null);
const activeIndex = ref(0);
const rotate = ref(0);
const myRef = ref(null);
onMounted(() => {
  setInterval(() => {
    rotate.value += 5;
    if (rotate.value >= 360) rotate.value = 0;
  }, 100);
});

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

const setHeroSwiper = (swiper) => {
  heroSwiper.value = swiper;
  swiper.on("slideChange", function () {
    console.log("slide changed hero", swiper);

    activeIndex.value = heroSwiper.value.activeIndex;
    console.log(activeIndex.value, " activeIndex.value");
  });
};

const onSlideChange = () => {
  activeIndex.value = heroSwiper.value.activeIndex;
};
const handSlidePrev = () => {
  if (activeIndex.value === 0) return false;
  myRef.value?.$el.swiper.slidePrev();
};
const handSlideNext = () => {
  if (activeIndex.value === 9) return false;
  myRef.value?.$el.swiper.slideNext();
};
function test(index, sc) {
  // console.log(index, "oo");
  return activeIndex.value == index;
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;

  .hero-left {
    .hero-name {
      font-size: 78px;
      font-family: "Big John";
      font-weight: 400;
      color: #1c3045;
    }
    .hero-boder {
      width: 695px;
      height: 2px;
      background-color: #ff3030;
      opacity: 0.2;
      top: 335px;
      position: absolute;
    }
    .hero-slogan {
      // width: 617px;
      // height: 82px;
    }

    .miffy-container {
      background: url("@/assets/img/home/miffy-bg.png") no-repeat;
      background-size: contain;
      opacity: 0;
      top: 690px;
      position: absolute;
    }
    .miffy-container-active {
      opacity: 1;
      top: 408px;
      width: 695px;
      height: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      transform: none;
      background: url("@/assets/img/home/hero/introduce-bg.png") no-repeat;
      background-size: cover;
    }
    .miffy {
      font-size: 40px;
      font-family: "BigJohn";
      margin-bottom: 19px;
      margin-left: 20px;

      color: #ff5470;
      line-height: 32px;
    }
    .miffy-slogan {
      width: 585px;
      height: 82px;
      margin-left: 20px;
      font-size: 16px;
      font-family: Arial;
      font-weight: bold;
      color: #ffffff;
      line-height: 32px;
    }
  }
}

.big_hero {
  width: 854px;
  height: 903px;
  position: relative;
  left: 740px;
  .swiper-btn2-prev {
    position: absolute;
    top: 70px;
    right: 280px;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
  }
  .swiper-btn2-next {
    position: absolute;
    top: 70px;
    right: 179px;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
  }
  .hero-big-img {
    width: 854px;
    position: relative;
    height: 903px;
    bottom: 0;
    display: flex;
    // justify-content: center;
    // align-items: center;
  }
  img {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }

  // .swiper-button-disabled {
  //   opacity: 0.5;
  //   pointer-events: none;
  //   cursor:not-allowed
  // }
}
.woman-bg{
  background: url('@/assets/img/home/hero/hero-bg.png')no-repeat;
  background-position: center bottom;
} 
.man-bg{
  background: url('@/assets/img/home/hero/hero-active-bg.png')no-repeat;
  background-position:center bottom;
}
.hero_big_image {
}
.hero-right {
  position: relative;
}
.hero-bg {
  position: absolute;
  left: 52px;
  top: 188px;
  animation: "rotateImg" 10s linear infinite;
}
@keyframes rotateImg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.thumbs_hero_container {
  user-select: none;
  position: absolute;
  left: -42px;
  top: 51px;
  // padding: 0 40px;
  width: 766px;
  height: 200px;
  .swiper-button-prev::after {
    display: none;
  }
  .swiper-button-next::after {
    display: none;
  }
  .swiper-btn-prev {
    position: absolute;
    right: 0;
  }
  .swiper-btn-next {
    position: absolute;
    right: 10px;
  }
  .swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
}
.hero_thumb {
  // width: 90px;
  // height: 184px;
  padding-bottom: 100px;
}
.hero_thumb_img {
  display: block;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 106px;
  height: 106px;
  opacity: 0.6;
  background: rgba(131, 188, 217, 0.3);
  transform: translate(-50%, -50%);
}
.hero_thumb_bg {
  display: block;
  position: absolute;
  left: 100px;
  top: 100px;
  width: 106px;
  height: 106px;
  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;
  height: 190px;
  width: 176px;
  //  padding-bottom: 300px;
  .line {
    width: 2px;
    background-color: #000;
    transform: rotateY(180deg);
    position: absolute;
    opacity: 0.2;
    z-index: 10px;
    bottom: -95px;
    // top: 180px;
    left: 96px;
    animation: myfirst 0.5s ease-in alternate 1 forwards;
  }
  @keyframes myfirst {
    0% {
      height: 0px;
    }
    100% {
      height: 131px;
    }
  }
  .arrowhead {
    position: absolute;
    // opacity: 0.2;
    width: 100px;
    height: 15px;
    z-index: 10px;
    bottom: -104px;
    // top: 180px;
    left: 47px;
  }
}
.weapon-bg::before {
  position: absolute;
  content: "";
  bottom: -170px;
  left: 56px;
  display: block;
  width: 86px;
  height: 17px;
  background: url("./@/assets/img/home/weapon-bottom-boder.png") no-repeat;
  background-size: contain;
}

.HeroThumbs {
}
</style>
