<template>
  <div class="home" @touchmove.prevent>
    <Index v-if="showIndex" @IndexPage="indexFn"></Index>
    <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
    <Result v-if="showResult" @ResultPage="resultFn"></Result>
    <MyPrize v-if="showMyPrize" @MyPrizePage="myPrizeFn"></MyPrize>
    <Draw v-if="showDraw" @DrawPage="drawFn"></Draw>
    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
  </div>
</template>

<script setup>
import gsap from "gsap";
import Loading from "@/components/Loading";
import Index from "@/components/Index";
import Question from "@/components/Question";
import MyPrize from "@/components/MyPrize";
import Draw from "@/components/Draw";
import Result from "@/components/Result";
import { createBGM } from "@/plugins";

const showLoad = ref(true);
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;
  }
  if (item.action == "showMyPrize") {
    showMyPrize.value = true;
  }
  if (item.action == "start") {
    showQuestion.value = true;
  }
};

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

  if (item.action == "showResult") {
    showResult.value = true;
    showQuestion.value = false;
  }
};

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

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

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

onMounted(() => {
  createBGM();
});
</script>

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

#musicBtn {
  @include pos(60px, 60px, 80px, 40px);
  z-index: 99;
}

// 音乐-on样式
.music-on {
  @include bg_pos("music-on.png");
}

// 音乐-off样式
.music-off {
  @include bg_pos("music-off.png");
}

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