<template>
  <div class="container">
    <div class="tabs">
      <!-- <div class="tab-left">
        <img src="../../assets/img/home/tabs/tab-left.png" alt="" />
      </div> -->
      <TabBar
        :listred="listred"
        :listblack="listblack"
        :tabs="tabs"
        :activeTab="activeTab"
        :getTabIcon="getTabIcon"
        @handactiveTab="handactiveTab"
      ></TabBar>
      <div class="tab-bg">
        <img src="../../assets/img/home/tabs/tab-bg.png" alt="" />
      </div>
    </div>
    <div class="content">
      <transition name="fade">
        <div class="item">
          <XyzTransitionGroup class="item-group" xyz="fade-100%">
            <HeroCard v-if="activeTab === 0"></HeroCard>
            <WeaponCard v-if="activeTab === 1"></WeaponCard>
            <ChipCard v-if="activeTab === 2"></ChipCard>
          </XyzTransitionGroup>
        </div>
      </transition>
    </div>
    <div class="game-bg">
      <img src="@/assets/img/home/weapon-bg.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import TabBar from "./TabBar.vue";
import HeroCard from "./HeroCard.vue";
import WeaponCard from "./WeaponCard.vue";
import ChipCard from "./ChipCard.vue";
import loginButton from "./loginButton.vue";
import { ref, computed } from "vue";

const listred = [
  "src/assets/img/home/tabs/HERO-red-tab.png",
  "src/assets/img/home/tabs/WEAPON-red-tab.png",
  "src/assets/img/home/tabs/CHIP-red-tab.png",
];
const listblack = [
  "src/assets/img/home/tabs/HERO-black-tab.png",
  "src/assets/img/home/tabs/WEAPON-black-tab.png",
  "src/assets/img/home/tabs/CHIP-black-tab.png",
];
const activeTab = ref(0);
const tabs = ["HERO", "WEAPON", "CHIP"];
const getTabIcon = (index) =>
  index === activeTab.value ? listred[index] : listblack[index];
function handactiveTab(index) {
  activeTab.value = index;
}


</script>
<style lang="scss" scoped>
.container {
  position: relative;
  height: 1480px;
  .tabs {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
  }
  .tab-bg {
    position: absolute;
  }
  .game-bg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    img {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      color: transparent;
    }
  }
}
.btn{
  width: 300px;
  height: 100px;
  margin: 0 auto;
}
.tabs {
  display: flex;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  padding: 20px;
}

.tab img {
  margin-right: 10px;
  width: 20px;
  height: 20px;
}

.tab.active {
  background-color: #f00;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.tab-left {
  width: 535px;
  img {
    width: 100%;
  }
}
.tab-right {
  width: 535px;
  img {
    width: 100%;
  }
}
</style>
