<template>
  <div class="home" @click.once="firstClick">
    <div class="home-container">
      <Index v-if="showIndex" @IndexPage="indexFn"></Index>
      <QuestionList v-if="showQuestionList" ref="QuestionListRef" @QuestionList="questionListFn"
        @showResult="onShowResult"></QuestionList>
      <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 class="music_icon" @click="musicPlay">
        <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="musicUrl"
          loop="loop"></audio>
      </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";
import QuestionList from "@/components/QuestionList";
import MyPrize from "@/components/MyPrize";
import Draw from "@/components/Draw";
import Result from "@/components/Result";
import Rule from "@/components/Rule";
import {
  getQueryString,
  screenOrientation,
  fontAdpat,
} from "@/plugins";
import { authorize, getUserInfo } from "@/api";
import { Toast } from "vant";
import { useMainStore } from "@/store";


const userStore = useMainStore();

const musicUrl = new URL(`@/assets/media/bgm.mp3`, import.meta.url).href

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") {
    showQuestionList.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 QuestionListRef = ref(null)
const showQuestionList = ref(false);
const questionListFn = (item) => {
  if (item.action == "hide") {
    showQuestionList.value = false;
  }
};
const posterId = ref(1)
const onShowResult = (item) => {
  // posterId.value = item.pid || 1
  posterId.value = 1
  showResult.value = true;
}


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;
    console.log('hide', showResult.value);
  }
  if(item.action == "showQuestion"){
    showQuestionList.value = true;
    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(() => {
  fontAdpat(); //字体适配
  screenOrientation(); //横竖屏检测

  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);
          userStore.updateToken(res.data);
          // 开始加载组件
          showLoad.value = true;
          iosMusic() //自动播放音乐
          gsap.set('.music_icon', { autoAlpha: 1 })
          return;
        } else {
          authorize({ scopeType: 1, redirectUri: url }).then((res) => {
            if (res.code == 0) {
              console.log("重定向地址：", res.data);
              location.replace(res.data);
            } else {
              // 活动已结束：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);
        } else {
          // 活动已结束：6001
          if (res.code == "6001") {
            Toast.fail({
              message: "活动已结束",
              duration: 0,
              forbidClick: true,
            });
            return;
          }

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

          Toast.fail({
            message: "活动已结束",
            duration: 0,
            forbidClick: true,
          });
        }
      });
    }
  } else {
    showLoad.value = true;
    iosMusic() //自动播放音乐
    gsap.set('.music_icon', { autoAlpha: 1 })
  }
});



// ios端音乐自动播放
const iosMusic = () => {
  // ios自动播放音乐
  document.addEventListener("DOMContentLoaded", function () {
    function audioAutoPlay() {
      var audio = document.getElementById("bg-music");
      audio.play();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
            audio.play();
          });
        },
        false
      );
    }
    audioAutoPlay();
  });

  musicBtnAni.fromTo(
    ".music_icon",
    { rotation: "0" },
    { rotation: "+=360", repeat: -1, duration: 7, ease: "none" }
  );
  musicBtnAni.play();
};


// 音乐播放
const musicBtnAni = gsap.timeline();
const playStatu = ref(true);
const musicPlay = () => {
  let audio = document.getElementById("bg-music");
  if (playStatu.value == true) {
    musicBtnAni.pause();
    audio.pause();
    playStatu.value = false;
    console.log("暂停");
  } else {
    musicBtnAni.play();
    audio.play();
    playStatu.value = true;
    console.log("播放");
  }
};

const firstClick = () => {
  let audio = document.getElementById("bg-music");

  musicBtnAni.play();
  audio.play();
  playStatu.value = true;
  console.log("播放");
}

</script>

<style lang="scss">
#app {
  overflow: hidden;
  background: linear-gradient(135deg, #d6d1ca, #e5dccf);
  font-family: "HarmonyOS_Sans_SC_Regular";
}

#__vconsole {
  visibility: hidden;
}


.music_icon {
  @include pos(60px, 60px, 50px, 245px);
  @include bg_pos("music-on.png");
  z-index: 99;
  visibility: hidden;
}

.home {
  @include pos(100%, 100vh, 0px, 0px);
  overflow: hidden;

  .home-container {
    @include pos(750px, 1624px, 0px, 50%);
    transform: translateY(-50%);
  }

}


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

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

.orientationPop {
  @include fixed();
  @include flexCen();
  background-color: rgba($color: #000000, $alpha: 1);
  visibility: hidden;
}

.orientation-icon {
  @include box(60px, 60px);
  @include bg_pos("orientation-icon.png");
  margin-bottom: 20px;
}

.orientation-text {
  color: #fff;
  font-size: 30px;
  margin-top: 10px;
}
</style>
