<template>
  <div class="intermediate-page">
    <iframe
      ref="iframeRef"
      class="iframe-box"
      src="https://screen.bmetech.com/steelmakingScreen/#/ecoDashboard"
      frameborder="0"
    ></iframe>
    <div class="back-btn" :style="backBtnStyle">
      <div class="back" @click="handleBack">
        <img src="@/assets/icons/menu-icon.png" alt="" />
        <span>管理平台</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, computed, onUnmounted } from "vue";

const router = useRouter();
const windowHeight = ref(window.innerHeight);
const windowWidth = ref(window.innerWidth);
const iframeRef = ref(null);

// 设计稿尺寸
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

// 计算缩放比例和位置
const backBtnStyle = computed(() => {
  // 根据高度计算缩放比例
  const scale = windowHeight.value / DESIGN_HEIGHT;
  // 计算实际宽度
  const actualWidth = DESIGN_WIDTH * scale;
  // 计算左侧留白
  const leftMargin = (windowWidth.value - actualWidth) / 2;

  // 按钮在设计稿中的位置
  const designLeft = 500;
  const designTop = 14;

  return {
    transform: `scale(${scale})`,
    transformOrigin: 'left top',
    left: `${leftMargin + designLeft * scale}px`,
    top: `${designTop * scale}px`,
  };
});

// 监听窗口大小变化
const updateWindowSize = () => {
  windowHeight.value = window.innerHeight;
  windowWidth.value = window.innerWidth;
};

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

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

onUnmounted(() => {
  window.removeEventListener("resize", updateWindowSize);
  // 移除消息监听器
  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%;
  }
  .back-btn {
    position: fixed;
    .back {
      width: 140px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      cursor: pointer;
      background: rgba(31, 40, 163, 0.5215686275);
      border: 1px solid #56a7aa;
      border-radius: 10px;
      padding: 0 10px;
      transition: all 0.3s ease;
      &:hover {
        box-shadow: 0 0 10px 0 #56a7aa;
      }
    }

    img {
      display: block;
      width: 32px;
      height: 32px;
      object-fit: contain;
      border-radius: 50%;
    }

    span {
      display: block;
      width: 80px;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
