<template>
  <div class="home">
    <Index v-if="showIndex" @IndexPage="indexFn"></Index>
    <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
  </div>
  <div id="transition" class="transition">
    <div class="t-i" v-for="i in 8">
      <div class="i" :class="'i-' + i % 2">LOADING</div>
      <div class="i" :class="'i-' + i % 2">LOADING</div>
    </div>
  </div>
</template>

<script setup>
import gsap from 'gsap'
import Loading from "@/components/Loading";
import Index from "@/components/Index";
import Question from "@/components/Question";

const showLoad = ref(false);
const loadFn = (item) => {
  if (item.action == "hide") {
    showLoad.value = false;
    showIndex.value = true;
  }
};

const showIndex = ref(false);
const indexFn = (item) => {
  if (item.action == "hide") {
    showIndex.value = false;
  }
};

const showQuestion = ref(true);
const questionFn = (item) => {
  if (item.action == "hide") {
    showQuestion.value = false;
  }
};


onMounted(() => {
  gsap.to('.i-0', { duration: 5, x: "100%", repeat: -1 })
  gsap.to('.i-1', { duration: 5, x: "-100%", repeat: -1 })
});
</script>

<style lang="scss" >
#app {
  overflow: hidden;
  background-color: rgb(255, 255, 255);
}

.home {
  @include box(750px, 100vh);
  // position: relative;
  overflow: hidden;
  margin: 0 auto;
}

#transition {
  @include fixed();
  background-color: rgba($color: #000000, $alpha: .7);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  // transform: rotate(-45deg);
  // transform: translateX(-25%) translateY(15%) rotate(-45deg);

  .t-i {
    width: 100%;
    height: calc(100% / 8);
    text-align: center;
    font-size: 120px;
    display: flex;
    align-items: center;
    font-weight: 700;

    .i {
      width: 750px;
      margin-left: 5%;
    }
  }

  .t-i:nth-child(odd) {
    background-color: #feed01;
    color: #07b8ba;
  }

  .t-i:nth-child(even) {
    background-color: #07b8ba;
    color: #feed01;

    .i {
      transform: translateX(-80%);
    }
  }
}
</style>
