<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import LoadingPage from "./loadog.vue";
const route = useRoute();
const srcUrl = ref("");
const pc = ref("");
const loadingShow = ref(true);
onMounted(() => {
  document.domain = "hzinsights.com";
  const iframe = document.querySelector("#iframe");
  srcUrl.value = decodeURIComponent(route.query.url);
  pc.value = route.query.pc || "";
  if (iframe.attachEvent) {
    iframe.attachEvent("onload", () => {
      setTimeout(() => {
        loadingShow.value = false;
      }, 300);
    });
  } else {
    iframe.onload = () => {
      setTimeout(() => {
        loadingShow.value = false;
      }, 500);
    };
  }
});
</script>

<template>
  <div :class="[pc ? 'container-strategy-pc' : 'container-strategy']">
    <iframe :src="srcUrl" class="strategy-iframe" frameborder="0" id="iframe" />
    <LoadingPage :loadingShow="loadingShow" />
  </div>
</template>

<style lang="scss" scoped>
.container-strategy {
  height: 100vh;
  padding-bottom: 100px;
  padding-bottom: calc(100px + constant(safe-area-inset-bottom));
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  .strategy-iframe {
    width: 100%;
    height: calc(100% + 70px);
    margin-top: -70px;
  }
}
.container-strategy-pc {
  height: 100vh;
  padding-bottom: 10px;
  .strategy-iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
