<script setup lang="ts">
definePage({ meta: { title: '频谱图+瀑布图' } });

const iframeSpectrogramRef = useTemplateRef('iframeSpectrogramRef');

// 模拟生成频谱数据的函数
function generateFakeSpectrogramData(len = 30, baseLevel = -90, noiseRange = 30) {
  const data = [];
  for (let i = 0; i < len; i++) {
    // 模拟一些峰值
    let peak = 0;
    if (i > len * 0.2 && i < len * 0.3) {
      peak = 30 * Math.sin(((i - len * 0.2) / (len * 0.1)) * Math.PI); // 第一个峰
    } else if (i > len * 0.6 && i < len * 0.75) {
      peak = 20 * (1 - Math.abs(i - len * 0.675) / (len * 0.075)); // 第二个峰
    }
    data.push(baseLevel + Math.random() * noiseRange + peak);
  }
  return data;
}

// 定时更新数据以模拟实时效果
let intervalId: null | NodeJS.Timeout = null;

onMounted(() => {
  // 模拟: 每x秒更新一次数据并通过 ref 发送
  intervalId = globalThis.setInterval(() => {
    const newData = generateFakeSpectrogramData();
    const newTime = new Date().toLocaleTimeString();

    if (iframeSpectrogramRef.value) {
      console.log('[📄] 页面：通过 ref 发送更新数据'.padEnd(120, '-'));
      iframeSpectrogramRef.value.sendData(newData, newTime); // 传递动态获取的时间
    } else {
      console.warn('[📄] 页面：无法获取 IframeSpectrogram 组件的引用来发送更新数据');
    }
    console.log('[📄] 页面：更新频谱数据带时间');
  }, 1000);
});

onUnmounted(() => {
  // 清除定时器
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<template>
  <div>
    <p>频谱图+瀑布图 (通过 iframe)</p>
    <div style="width: 100%; height: 400px; border: 1px solid #ccc; margin-top: 10px">
      <IframeSpectrogram ref="iframeSpectrogramRef" />
    </div>
  </div>
</template>

<style scoped>
/* 可以添加一些页面级别的样式 */
</style>
