<script setup lang="ts">
// 不再需要 props 来接收数据

// 获取 iframe 的 DOM 引用
const iframeRef = ref<HTMLIFrameElement | null>(null);

// iframe 的 src URL，指向 Spectrogram.html
const src = computed(() => import.meta.env.BASE_URL + 'html-page/Spectrogram.html');

// 标记 iframe 是否已加载完成并已发送初始化指令
const isIframeInitialized = ref(false);

// iframe 加载完成后的回调
function onIframeLoad() {
  console.log('[🧩] 组件 (频谱图): iframe 已加载');
  // 发送初始化指令给 iframe
  if (iframeRef.value?.contentWindow) {
    console.log('[🧩] 组件 (频谱图): 向 iframe 发送 INIT_WIDGET 指令');
    // targetOrigin 设置为 '*' 为了简单，生产环境应指定确切来源
    // 可选：如果需要传递配置，可以在 INIT_WIDGET 消息中包含 config
    iframeRef.value.contentWindow.postMessage({ type: 'INIT_WIDGET' /*, config: props.config */ }, '*');
    isIframeInitialized.value = true; // 标记已发送初始化指令

    // 发送初始数据（如果已有）
    // 稍微延迟发送，给 iframe 一点时间处理 INIT_WIDGET
    setTimeout(() => {
      // 初始数据将通过暴露的方法发送，这里不再处理
      console.log('[🧩] 组件 (频谱图): iframe 初始化完成，等待通过 ref 调用发送数据。');
    }, 0);
  } else {
    console.error('[🧩] 组件 (频谱图): 无法访问 iframe 的 contentWindow');
  }
}

// 将数据发送到 iframe 的函数
function sendDataToIframe(payload: Array<number>, time: string) {
  // 添加 time 参数
  // 确保 iframe 存在、其 contentWindow 可访问且已发送初始化指令
  if (iframeRef.value?.contentWindow && isIframeInitialized.value) {
    console.log('[🧩] 组件 (频谱图): 向 iframe 发送数据:', payload, '时间:', time);
    // 使用 toRaw 获取原始数据对象
    // 将时间和数据一起发送
    iframeRef.value.contentWindow.postMessage({ type: 'FEED_DATA', payload: toRaw(payload), time: time }, '*');
  } else {
    console.warn('[🧩] 组件 (频谱图): iframe 未初始化或数据无效，无法发送 FEED_DATA 消息。');
  }
}

// 不再需要监听 props

// 可选：监听来自 iframe 的 WIDGET_READY 消息以实现更精确的控制 (与星座图类似)
// onMounted(() => { ... });
// onUnmounted(() => { ... });
// function handleIframeMessage(event: MessageEvent) { ... }

// 暴露 sendDataToIframe 方法给父组件
defineExpose({
  sendData: sendDataToIframe,
});
</script>

<template>
  <iframe ref="iframeRef" :src="src" frameborder="0" allowfullscreen @load="onIframeLoad"></iframe>
</template>

<style scoped>
iframe {
  border: none; /* 移除边框 */
  width: 100%; /* 默认占满容器 */
  height: 100%; /* 默认占满容器 */
}
</style>
