<template>
  <div class="containers">
    <div
      class="axis"
      :style="{ transform: `translateX(${-currentStep * 348}px)` }"
    >
      <div
        v-for="(point, index) in points"
        :key="index"
        class="point"
        :class="{ selected: index === currentStep }"
        @click="selectPoint(index)"
        v-html="point"
      ></div>
    </div>
  </div>
  <div class="axios"><img src="../../assets/img/about/axios.png" alt="" /></div>

  <div class="teme-card">
    <XyzTransition xyz="fade down-100% back-5">
      <div class="card-item" v-if="currentStep == 0">
        <div class="text">
          Co-Founder of Giant Interactive(NASDAQ:GA)<br />Ops Manager in Shanda
          Group
        </div>
      </div>
      <div class="card-item" v-else-if="currentStep == 1">
        <div class="text">
          Core data officer of Foxconn GroupGaming data expert in Giant Interactive
        </div>
      </div>
      <div class="card-item" v-else-if="currentStep == 2">
        <div class="text">
          Worked in Shanda Group with 4 million-player games
        </div>
      </div>
      <div class="card-item" v-else="currentStep == 3">
        <div class="text">
          In charge of Legend, Legends of the world, The Romance of Legends, etc
        </div>
      </div>
    </XyzTransition>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";


const points = [
  "FOUNDER </br> MICHEAL YUE",
  "GAMING ECONOMIST</br> YODA",
  "PRODUCER</br> SUPER G",
  "CTO </br> XIN",
];
const currentStep = ref(0);

const selectPoint = (index) => {
  currentStep.value = index;
};
</script>

<style lang="scss" scoped>
.containers {
  position: relative;
  margin-top: 50px;
  /* overflow: hidden; */
  margin-left: 548px;
  width: 1392px;
  // height: 50px;
}

.axis {
  display: flex;
  transition: transform 0.3s ease;
}

.point {
  width: 348px;
  height: 150px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  /* border: 1px solid #000; */
  cursor: pointer;
  font-size: 22px;
  font-family: "Big John";
  font-weight: 400;
  color: #070707;
  line-height: 30px;
}
.axios {
  // margin-top: 100px;
}
.selected {
  /* background-color: #f0f0f0; */
}
.teme-card {
  width: 1440px;
  margin: 0 auto;
  padding-top: 100px;
  display: flex;
  // justify-content: center;
  position: relative;
  .card-item {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 290px;
    color: #ffffff;
    background: url("../../assets/img/about/item-card.png") no-repeat;
    background-size: contain;
    .text{
      width: 90%;
    }
  }
}
</style>
