<template>
  <!-- <NuxtWelcome /> -->
  <NuxtLayout>
    <keep-alive v-if="shouldCache">
      <NuxtPage />
    </keep-alive>
    <NuxtPage v-else />
  </NuxtLayout>

  <!-- pc -->
</template>
<script setup lang="ts">
const route = useRoute();
const shouldCache =
  route.name === "homePage" ||
  route.name === "searchPage" ||
  route.name === "presalePage" ||
  route.name === "newsPage" ||
  route.name === "categoryPage" ||
  route.name === "freeshippingPage" ||
  route.name === "storehousePage" ||
  route.name === "adminPresalePage" ||
  route.name === "monitorPage";
let pcObj = {
  prod: "https://www.hotking.com",
  dev: "https://hop.fatmoreshop.com",
};
let h5Obj = {
  prod: "https://h5.hotking.com",
  dev: "https://hop-mall-h5.fatmoreshop.com",
};
function getBrowser() {
  return {
    versions: (function () {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      return {
        //移动终端浏览器版本信息
        trident: u.indexOf("Trident") > -1, //IE内核
        presto: u.indexOf("Presto") > -1, //opera内核
        webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
        gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或uc浏览器
        iPhone: u.indexOf("iPhone") > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf("iPad") > -1, //是否iPad
        webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
      };
    })(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase(),
  };
}
onBeforeMount(() => {
  let originName = location.origin;
  let browser = getBrowser();
  const viewportWidth = document.body.clientWidth;
  if (viewportWidth <= 992 && originName == pcObj.prod) {
    //window.location.href = h5Obj.prod;
  } else if (viewportWidth <= 992 && originName == pcObj.dev) {
    //window.location.href = h5Obj.dev;
  } else if (viewportWidth > 992 && originName == h5Obj.prod) {
    //window.location.href = pcObj.prod;
  } else if (viewportWidth > 992 && originName == h5Obj.dev) {
    //window.location.href = pcObj.dev;
  }
  let url = location.href.split("#")[0];
});
watch(
  () => route.path,
  async (first: any, second: any) => {
    setTimeout(() => {}, 1000);
  }
);

const user = useUserStore();
let clubOpen = ref(false);
let clubDialogFalg: any = ref(null);
const isClose: any = useCookie("isClose", {
  maxAge: 60 * 60 * 24,
});
onMounted(async () => {
  clubDialogFalg.value = getLocalStorageWithExpiry("clubDialogFalg");
  if (!clubDialogFalg.value && route.fullPath.indexOf("/login/club") < 0) {
    clubOpen.value = true;
  }
});
function clubDialogClose() {
  clubOpen.value = false;
  setLocalStorageWithExpiry("clubDialogFalg", "true");
  // 公告弹出了才能弹注册
  setTimeout(() => {
    if (!user.value.isLogin && !isClose.value) {
      user.value.regOpen = true;
    }
  }, 10000);
}
function linkToClub() {
  clubDialogClose();
  window.open(useRuntimeConfig().public.clubUrl);
}
</script>
<style lang="scss">
.club-dialog {
  padding: 0 !important;
  border-radius: 10px !important;
  width: 295px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0 !important;
  }
  .club-dialog-con {
    background: url("https://io.house-tk.com/hop/pro/other/images/d86092d5f575c5d9fe0fae312c6d8a9b")
      no-repeat top center;
    background-size: 100% auto;
    padding-top: 1px;
    position: relative;
    padding-bottom: 88px;
    h3 {
      font-size: 16px;
      color: #002055;
      font-weight: 700;
      margin-top: 219px;
      padding: 0 18px;
      line-height: 22px;
      margin-bottom: 8px;
      span {
        background: linear-gradient(91deg, #009dff 15.3%, #0061ff 61.94%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.8px;
      }
    }
    .text {
      padding: 0 18px;
      color: #5f656f;
      font-size: 14px;
      font-style: normal;
      letter-spacing: 0.5px;
      line-height: 20px;
    }
    .btn-wrap {
      position: absolute;
      bottom: 24px;
      width: 100%;
      height: 40px;
      padding: 0 18px;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        font-size: 14px;
        height: 40px !important;
        border-radius: 8px !important;
      }
      .btn_edge {
        width: 92px;
        color: rgba(0, 32, 85, 0.85) !important;
        border-color: rgba(0, 32, 85, 0.85) !important;
      }
      .btn_main {
        width: 154px;
        color: #fff !important;
        border-color: #008cff !important;
        background: linear-gradient(
          268deg,
          #008cff 0%,
          #0061ff 99.8%
        ) !important;
      }
    }
  }
}
</style>
