<template>
  <!-- 加载图 -->
  <img
    :src="getAssets('base/loading-page.gif')"
    class="loading-page"
    v-if="showLoadingPage"
  />
  <Suspense>
    <template v-slot:default>
      <router-view v-slot="{ Component, route }">
        <transition
          :name="transitionName"
          @before-enter="beforEnter"
          @before-leave="afterLeave"
        >
          <template v-if="route.meta.keepAlive">
            <keep-alive>
              <component
                :is="Component"
                :key="route.fullPath"
                class="fixed-layout"
                :style="{ zIndex: isAnimation ? '1' : '0' }"
              />
            </keep-alive>
          </template>
          <component
            v-else
            :is="Component"
            :key="route.fullPath"
            class="fixed-layout"
            :style="{ zIndex: isAnimation ? '1' : '0' }"
          />
        </transition>
      </router-view>
    </template>
    <template v-slot:fallback>
      <img
        :src="getAssets('base/loading.gif')"
        class="loading-page"
        v-if="showLoadingPage"
      />
    </template>
  </Suspense>
  <!-- 游戏加载页面 -->
  <h-start-game />
  <!-- 三合一礼包 -->
  <three-in-one
    :info="giftStore.threeInOneInfo"
    @handle="giftStore.getThreeInOneInfo()"
  />
  <game-details />
  <!-- 添加主屏幕 -->
  <add-to-home />
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed, ref, onMounted, inject, onBeforeUnmount } from "vue";
import storage, { actions } from "./utils/storage";
import { useUserStore } from "./stores/modules/user";
import { useBaseStore } from "./stores/modules/base";
import { useGiftStore } from "./stores/modules/gift";
import gameDetails from "@/views/game-details/index.vue";
import { gameListStore } from "./stores/modules/game-list";
import { getAssets } from "./utils";
import NoSleep from "nosleep.js/dist/NoSleep.min.js";
import googleLogin from "@/common/google-login";
import https from "./https";
import AddToHome from "./views/home/add-to-home/index.vue";
const userGame = gameListStore();
const socket: any = inject("socket");
const App: any = inject("app");
const userStore = useUserStore();
const baseStore = useBaseStore();
const giftStore = useGiftStore();
const router = useRouter();
const showLoadingPage = ref(true);
const transitionName = ref("push");
const token = computed(() => storage.getStorage(actions.USER_TOEKN));

router.beforeEach((to: any, from: any) => {
  if (to.meta.index > from.meta.index) {
    transitionName.value = "push"; // 向左滑动
  } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    transitionName.value = "back";
  } else {
    transitionName.value = ""; //同级无过渡效果
  }
});

// 控制动画
const isAnimation = ref(false);
/**
 * 动画开始
 */
const beforEnter = () => {
  isAnimation.value = true;
};
/**
 * 动画结束
 */
const afterLeave = () => {
  isAnimation.value = false;
};

// 屏幕常亮
const noSleep = () => {
  let nosleep = new NoSleep();
  document.addEventListener(
    "click",
    function enableNoSleep() {
      console.log("------no sleep------");
      nosleep.enable();
      document.removeEventListener("click", enableNoSleep, false);
    },
    false
  );
};
onMounted(async () => {
  // userGame.setOriginalList();
  if (token.value) {
    socket.connect().then(async () => {
      await userStore.getUserInfo();
      await giftStore.getThreeInOneInfo();
      await baseStore.getHelpTurntable();
    });
  } else {
    socket.connectMsg();
    await baseStore.getHelpTurntable();
  }
  const app: any = document.getElementById("app");
  app.style.height = window.innerHeight + "px";
  app.style.overflow = "hidden";
  baseStore.setInnerInfo(window.innerHeight, window.innerWidth);
  // window.addEventListener("load", loadFn, false);
  loadFn();
  storage.setStorage(actions.SHOW_NOTICE, 1);
});

const loadFn = async () => {
  console.log("pageload");
  noSleep();
  const app: any = document.getElementById("app");
  app.style.height = window.innerHeight + "px";
  app.style.overflow = "";
  window.onresize = () => {
    baseStore.setInnerInfo(window.innerHeight, window.innerWidth);
    app.style.height = window.innerHeight + "px";
  };
  /**
   * 加载三合一
   * 注册google登录
   * 获取配置信息
   */
  googleLogin(App);
  await baseStore.getCustomerGroup();
  // window.removeEventListener("load", loadFn, false);
  setTimeout(() => {
    showLoadingPage.value = false;
  }, 2000);
};

onBeforeUnmount(() => {
  socket.disconnect();
  storage.clearStorage();

  // window.removeEventListener("load", loadFn, false);
});
</script>

<style lang="scss">
@import "./assets/styles/fade.scss";
@import "./assets/styles/scrollbar.scss";
@import "./assets/styles/iconfont.css";

.fixed-layout {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.loading-page {
  height: 100%;
  width: 100vw;
  position: fixed;
  z-index: 10000000000000;
  top: 0;
  @include pc {
    width: 10rem;
  }
}

html {
  height: 100%;
  @include pc {
    font-size: 50px !important;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

body {
  background: #fff;
  height: 100%;
  // height: 100vh;
  .van-toast {
    z-index: 2147483641 !important;
  }
  @include pc {
    .van-toast {
      background: rgba(0, 0, 0, 0.7) !important;
    }
    .van-overlay {
      width: 10rem;
      left: calc(50% - 5rem);
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

#app {
  margin: 0 auto;
  background: url("./assets/img/base/bg.png");
  background-size: 100% auto;
  position: relative;
  &::-webkit-scrollbar {
    display: none;
  }
  .van-toast {
    z-index: 2147483641 !important;
  }
  @include pc {
    width: 10rem;
    overflow: auto;
    .van-popup {
      width: 10rem;
      left: calc(50% - 5rem);
    }
    .van-toast {
      background: rgba(0, 0, 0, 0.7) !important;
      z-index: 2147483641;
    }
    .van-overlay {
      width: 10rem;
      left: calc(50% - 5rem);
    }
  }
}

.page {
  height: 100%;
  overflow: auto;
  background: url("./assets/img/base/bg.png");
  background-size: 100% auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .page-body {
    padding: 0.2rem;
    text-align: center;
    background: url("./assets/img/base/bg.png");
    background-size: 100% auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

html::-webkit-scrollbar {
  width: 0;
}
body::-webkit-scrollbar {
  width: 0;
}
/* 隐藏 IE 和 Edge 浏览器的滚动条 */
::-ms-scrollbar {
  width: 0;
}
</style>
