<template>
  <router-view></router-view>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, provide, computed } from "vue";
import emitter from "@/mitt/index";
import { useRoute } from "vue-router";
import browser from '@/utils/browser'
import wxShare from "@/utils/wxshare";

const isMobile = computed(() => browser.isMobile())
const detectIPad = computed(() => browser.detectIPad())

const isLandscape = ref(window.orientation === 90 || window.orientation === -90)
watch(isLandscape, ()=>{
  if (isLandscape.value) {
    window.location.reload()
  }
});

onMounted(() => {
  nextTick(()=>{
    wxShare({
        title: `香山湖酒店`,
        desc: ``,
        link: window.location.href.split("#")[0],
        imgUrl: "https://culture.4dage.com/demo/xiangshanhu/sharelogo.png",
      });
  })
  if (isMobile.value || detectIPad.value) {
    // window.orientation：获取屏幕旋转方向
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
      // 正常方向或屏幕旋转180度
      if (window.orientation === 180 || window.orientation === 0) {
        isLandscape.value = false
      }

      // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
      if (window.orientation === 90 || window.orientation === -90) {
        isLandscape.value = true
      }
    });
  }
});
</script>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.landscape_tips {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  z-index: 9999;

  .lcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.4);
    border-radius: 11px 11px 11px 11px;
    width: 80%;
    padding: 20px;

    >p {
      text-align: center;
      font-size: 18px;
      line-height: 2;
    }
  }
}
</style>
