<template>
  <div class="home">
    <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>
    <Rule v-if="showRule" @RulePage="ruleFn"></Rule>
    <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 Rule from "@/components/Rule";
import { createBGM, getQueryString } from "@/plugins";
import { authorize, getUserInfo } from "@/api";
import { Toast } from "vant";
import { useMainStore } from "@/store";

const userStore = useMainStore();

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

  if (item.action == "showRule") {
    showRule.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(false);
const resultFn = (item) => {
  if (item.action == "hide") {
    showResult.value = false;
  }
  if (item.action == "showDraw") {
    showDraw.value = true;
  }
};

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

onMounted(() => {
  let code = getQueryString("code");
  let url = import.meta.env.VITE_URL;

  let dev = import.meta.env.VITE_MODE;
  if (dev != "dev") {
    if (code) {
      getUserInfo({ code: code }).then((res) => {
        if (res.code == 0) {
          console.log("我的信息：", res.data);
          if (res.data) {
            userStore.updateToken(res.data);
          }
          createBGM();
          // 开始加载组件
          showLoad.value = true;
          return;
        } else {
          authorize({ scopeType: 1, redirectUri: url }).then((res) => {
            if (res.code == 0) {
              console.log("重定向地址：", res.data);
              location.replace(res.data);
            }

            // 活动已结束：6001
            if (res.code == "6001") {
              Toast.fail({
                message: res.msg,
                duration: 0,
                forbidClick: true,
              });
              return;
            }

            // 活动未开启：6002
            if (res.code == "6002") {
              Toast({
                message: res.msg,
                duration: 0,
                icon: "flag-o",
                forbidClick: true,
              });
              return;
            }

            // 其余情况
            Toast({
              message: res.msg,
              duration: 0,
              forbidClick: true,
            });
          });
        }
      });
    } else {
      authorize({ scopeType: 1, redirectUri: url }).then((res) => {
        if (res.code == 0) {
          console.log("重定向地址：", res.data);
          location.replace(res.data);
        }

        // 活动已结束：6001
        if (res.code == "6001") {
          Toast.fail({
            message: "活动已结束",
            duration: 0,
            forbidClick: true,
          });
        }

        // 活动未开启：6002
        if (res.code == "6002") {
          Toast({
            message: "活动未开始",
            duration: 0,
            icon: "flag-o",
            forbidClick: true,
          });
        }
      });
    }
  } else {
    showLoad.value = true;
  }

  fontAdpat();
});

// 字体适配
const fontAdpat = () => {
  if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
  ) {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on("menu:setfont", function () {
      WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
    });
  }
};
</script>

<style lang="scss" >
#app {
  overflow: hidden;
  background: linear-gradient(135deg, #f6d365, #fda085);
}

#musicBtn {
  @include pos(60px, 60px, 650px, 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>
