<template>
  <div class="containers">
    <div
      class="vision-title"
      ref="mTab"
      id="bgTest"
      :style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
    >
      TEAM
    </div>
    <div class="content">
      <div class="content-top">
        <div class="content-left" ref="contentLeft">
          <div class="mission">
            <img src="@/assets/img/about/mission.png" alt="" />
          </div>
        </div>
        <div class="content-right">
          <div class="title">Vision & Mission</div>
          <div class="title-boder">
            <img src="@/assets/img/about/vision-title-boder.png" alt="" />
          </div>
          <div class="slogan">
            <div class="cebg-stands">
              <ScrollAnimatedText text-color="#5D5D5D">
                Our goal is to produce a game that is very enjoyable to play and
                has an excellent economic design that allows players to feel the
                joy of playing while being able to earn tokens.
              </ScrollAnimatedText>
            </div>
            <div class="cebg-batlegrounds">
              <ScrollAnimatedText text-color="#5D5D5D">
                At the same time, a community co-creation and sharing mechanism
                is used to disrupt the existing content and value-sharing model
                so that creativity and value can flourish in the community
              </ScrollAnimatedText>
            </div>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="team-boder">
          <div class="team-title">TEAM</div>
          <div class="team-boder-img">
            <img src="@/assets/img/about/team-boder.png" alt="" />
          </div>
        </div>
        <!-- <div class="card-list">
          <div class="card-item" v-for="team in cardText">
            <div class="child">
           
            </div>
            <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
          </div>
        </div> -->
        <AxisSlider></AxisSlider>
      </div>
    </div>
    <div class="banner-boder">
      <img src="@/assets/img/about/vision-bottom-boder.png" alt="" />
    </div>
    <div class="vidion-bg">
      <img src="@/assets/img/about/team-bg.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import Grid9Panel from "./Grid9Panel.vue";
import AxisSlider from "./AxisSlider.vue";
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
const Y1 = ref(0);
const ratio = ref(0.2); //视差偏移率
const positionY1 = ref(0); //背景Y轴偏移量
const contentLeft = ref(null);
const animationTriggered = ref(false);
const cardText = [
  {
    name: "Michael Yue",
    title: "Founder",
    slogan:
      "Co-Founder of Giant Interactive(NYSE:GA)<br/>Ops Manager in Shanda Group",
  },
  {
    name: "Yoda",
    title: "Gaming Economist",
    slogan: "CDO of Foxconn GroupGaming data expert in Giant Interactive",
  },
  {
    name: "Super G.",
    title: "Producer",
    slogan: "Worked in Shanda Group with 4 million-player games.",
  },
  {
    name: "Xin",
    title: "CTO",
    slogan:
      "In Charge of Legend, Legends of the World,The Romance of Legends, etc.",
  },
];
onMounted(() => {
  window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
  let bgTest = document.getElementById("bgTest");
  Y1.value = bgTest.offsetTop * ratio.value;
  contentLeftAnimation();
});
function contentLeftAnimation() {
  gsap.from(contentLeft.value, {
    x: -1000,
    duration: 1,
    ease: "power2.out",
  });
}
function isContentLeftVisible() {
  const rect = contentLeft.value.getBoundingClientRect();
  const windowHeight =
    window.innerHeight || document.documentElement.clientHeight;
  return rect.top <= windowHeight && rect.bottom >= 0;
}
function handleScroll() {
  if (!animationTriggered.value && isContentLeftVisible()) {
    contentLeftAnimation();
    animationTriggered.value = true;
  }
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
}
</script>

<style lang="scss" scoped>
.containers {
  padding-bottom: 116px;
  position: relative;
  .banner-boder {
    position: absolute;
    left: 0;
    bottom: -100px;
  }
  .vision-title {
    position: absolute;
    left: 21%;
    bottom: 380px;
    font-size: 210px;
    font-family: "Big John";
    font-weight: 400;
    color: #d7d7d7;
    letter-spacing: 160px;
    z-index: -1;
  }
  .vidion-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
  }
  .team-boder-img {
    width: 400px;
  }
  .content {
    width: 1440px;
    margin: 0 auto;

    .content-top {
      display: flex;
      justify-content: space-between;
      .title {
        padding-top: 174px;
        margin-left: 38px;
        font-size: 48px;
        font-family: "Big John";
        font-weight: 400;
        font-style: italic;
        color: #000000;
      }
      .title-boder {
        width: 689px;
        padding-top: 10px;
        height: 58px;
        img {
          width: 100%;
        }
        padding-bottom: 30px;
      }
      .slogan {
        width: 622px;
        padding-top: 36px;
        margin-left: 49px;
        font-size: 16px;
        font-family: "Poppins";
        font-weight: bold;
        color: #000000;
        display: flex;
        flex-direction: column;
        .cebg-batlegrounds {
          // padding-top: 30px;
        }
      }
      .mission {
        padding-top: 13px;
        width: 656px;
        height: 587px;

        img {
          max-width: 100%;
          height: auto;
          object-fit: cover;
        }
      }
    }
    .content-bottom {
      margin-top: 45px;
      padding-bottom: 310px;
      .team-boder {
        position: relative;
        width: 95%;
        margin: 0 auto;
        img {
          width: 100%;
        }
        .team-title {
          font-size: 48px;
          font-family: "Big John";
          font-weight: 400;
          font-style: italic;
          color: #1a1919;
        }
      }
      .card-list {
        padding-top: 100px;
        padding-bottom: 251px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .card-item {
          position: relative;
          width: 330px;
          background: rgba(236, 46, 91, 1);
          border-radius: 12px;
          height: 456px;

          overflow: hidden;
          .child {
            position: absolute;
            width: 270px;
            height: 270px;
            left: 30px;
            top: 30px;
            // background-image: url("@/assets/img/about/card-bg.png");
            background-size: cover;
            transition: transform 0.5s ease-in-out;
            transform: scale(1);
          }
        }
        .card-item:hover .child {
          transform: scale(1.78);
          opacity: 0.3;

          top: 80px;
        }
      }
    }
  }
}
.grid {
  width: 100%;
  height: 96px;
  cursor: pointer;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation: myfirstnone 0.5s alternate 1 forwards;
}
.card-item:hover {
  transform: scale(1.019) translate(0px, -15px);
}
.card-item:hover .grid {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation: myfirst 0.5s alternate 1 forwards;
}

@keyframes myfirst {
  0% {
    height: 96px;
  }
  100% {
    height: 396px;
  }
}
@keyframes myfirstnone {
  0% {
    height: 396px;
  }
  100% {
    height: 96px;
  }
}
@keyframes myfirstcard1 {
  0% {
    left: 30px;
    top: 40px;
    width: 270px;
    height: 270px;
  }
  100% {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}
@keyframes myfirstcard2 {
  100% {
    left: 30px;
    top: 40px;
    width: 270px;
    height: 270px;
  }
  0% {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}
</style>
