<script setup lang="ts">
const src = computed(() => `${import.meta.env.BASE_URL}iframe/for-plotly.html`);

type I数据 = number[];
type WindowWithPlotly = Window & {
  Plotly: typeof import('plotly.js-dist-min');
};

const iframeRef = useTemplateRef<HTMLIFrameElement>('iframeRef');
let contentWindow: null | WindowWithPlotly = null;

let 频谱图Element: import('plotly.js-dist-min').PlotlyHTMLElement | null = null;
// let 瀑布图Element: import('plotly.js-dist-min').PlotlyHTMLElement | null = null;

let _readyPromiseReslove = () => {};
const readyPromise = new Promise<void>((resolve) => {
  _readyPromiseReslove = resolve;
});

const 频谱瀑布图Layout = {
  title: '频谱瀑布图',
  xaxis: {
    title: '频率 (Hz)',
    // range: [0, 22_050],
    showgrid: false,
  },
  yaxis: {
    title: '时间步',
    showgrid: false,
  },
  margin: { l: 60, r: 40, b: 40, t: 60 },
};

const 频谱图Layout = {
  title: '频谱图',
  xaxis: {
    title: '频率 (Hz)',
    // range: [0, 22_050],
    showgrid: true,
    gridcolor: '#eee',
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
  },
  yaxis: {
    title: '幅度 (dB)',
    showgrid: true, // 显示网格线
    gridcolor: '#eee',
    tickformat: ',d', // 设置为带逗号的整数格式 (推荐，更易读)
  },
  margin: { l: 60, r: 40, b: 40, t: 60 },
} satisfies Partial<import('plotly.js-dist-min').Layout>;

defineExpose({
  添加数据: async (DB数据: I数据, FFT大小: number /* 也叫快速傅里叶变换大小 */, 采样率: number) => {
    const 频率分辨率 = 采样率 / FFT大小;

    {
      // 频谱图
      console.debug('[添加数据被调用]', `数据.length :>> `, DB数据.length);
      await readyPromise;
      // 先清空之前的数据
      await contentWindow!.Plotly.react(频谱图Element!, [], 频谱图Layout);
      const x频率数据 = Array.from({ length: DB数据.length }, (_, i) => i * 频率分辨率);
      await contentWindow!.Plotly.addTraces(频谱图Element!, {
        x: x频率数据,
        y: DB数据,
        type: 'scatter',
        line: { color: 'blue' },
      });
    }

    {
      // 瀑布图
    }
  },
});

async function onIframeLoad() {
  console.debug('[onIframeLoad] iframe 加载完成');
  contentWindow = iframeRef.value!.contentWindow as WindowWithPlotly;
  频谱图Element = await contentWindow.Plotly.newPlot('PLOTLY_CHART_spectrogram', [], 频谱图Layout);
  瀑布图Element = await contentWindow.Plotly.newPlot('PLOTLY_CHART_waterfall', [], 频谱瀑布图Layout);
  _readyPromiseReslove();
}
onMounted(() => {
  console.debug('[onMounted] comp 加载完成');
});
</script>

<template>
  <iframe ref="iframeRef" @load="onIframeLoad" :src style="width: 100%; height: 100%; border: none" />
</template>
