<template>
  <div class="intermediate-page">
    <iframe
      ref="iframeRef"
      class="iframe-box"
      :src="url"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, computed, onUnmounted } from "vue";
import { getToken } from "@/utils/auth";

const router = useRouter();

const iframeRef = ref(null);

const url = `https://screen.bmetech.com/steelmakingScreen/#/ecoDashboard?token=${getToken("TOKEN")}`


// 处理iframe消息
const handleMessage = (event) => {
  console.log(event);
  // 确保消息来源是我们的iframe
  if (iframeRef.value && event.source === iframeRef.value.contentWindow) {
    try {
      // 如果消息是字符串，尝试解析JSON
      const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
      console.log(data)
      // 根据消息类型处理
      if (data.type === 'navigation' && data.target === 'dashboard') {
        handleBack();
      }
    } catch (error) {
      console.error('Error processing iframe message:', error);
    }
  }
};

onMounted(() => {
  // 添加消息监听器
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  // 移除消息监听器
  window.removeEventListener('message', handleMessage);
});
  
const handleBack = () => {
  router.push("/dashboard");
};
</script>

<style lang="scss" scoped>
.intermediate-page {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  .iframe-box {
    width: 100%;
    height: 100%;
  }
}
</style>
