<template>
  <div class="w-full h-100">
    <v-chart v-if="true" class="w-full h-full" :option="option" autoresize />
    <div
      v-else
      class="w-full h-full flex items-center justify-center text-gray-500"
    >
      暂无数据
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, withDefaults } from "vue";
import { forEach } from "lodash";
import VChart from "vue-echarts";
import { type WaveformDataType } from "./index";

// Echarts
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import type { ComposeOption } from "echarts/core";
import type { LineSeriesOption } from "echarts/charts";
import type {
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
  DataZoomComponentOption,
  GridComponentOption,
} from "echarts/components";

use([
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
]);

type EChartsOption = ComposeOption<
  | TooltipComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
  | DataZoomComponentOption
  | GridComponentOption
  | LineSeriesOption
>;

const props = withDefaults(
  defineProps<{
    data?: WaveformDataType;
  }>(),
  {
    data: () => ({
      x: [],
      y: [],
      xUnit: "s",
      yUnit: "V",
    }),
  },
);

const hasData = computed(() => {
  return (
    props.data &&
    props.data.x &&
    props.data.y &&
    props.data.x.length > 0 &&
    props.data.y.length > 0 &&
    props.data.y.some((channel) => channel.length > 0)
  );
});

const option = computed((): EChartsOption => {
  const series: LineSeriesOption[] = [];

  forEach(props.data.y, (yData, index) => {
    // 将 x 和 y 数据组合成 [x, y] 格式
    const seriesData = props.data.x.map((xValue, i) => [xValue, yData[i] || 0]);

    series.push({
      type: "line",
      name: `通道 ${index + 1}`,
      data: seriesData,
      smooth: false, // 示波器通常显示原始波形
      symbol: "none", // 不显示数据点标记
      lineStyle: {
        width: 2,
      },
    });
  });

  return {
    grid: {
      left: "10%",
      right: "10%",
      top: "15%",
      bottom: "25%",
    },
    tooltip: {
      trigger: "axis",
      formatter: (params: any) => {
        let result = `时间: ${params[0].data[0].toFixed(2)} ${props.data.xUnit}<br/>`;
        params.forEach((param: any) => {
          result += `${param.seriesName}: ${param.data[1].toFixed(3)} ${props.data.yUnit}<br/>`;
        });
        return result;
      },
    },
    legend: {
      top: "5%",
      data: series.map((s) => s.name) as string[],
    },
    toolbox: {
      feature: {
        restore: {},
        saveAsImage: {},
      },
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
      },
    ],
    xAxis: {
      type: "value",
      name: `时间 (${props.data.xUnit})`,
      nameLocation: "middle",
      nameGap: 30,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: `电压 (${props.data.yUnit})`,
      nameLocation: "middle",
      nameGap: 40,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    series: series,
  };
});
</script>
