<!-- src/components/VChart.vue -->
<script setup lang="ts">
/**
 * ECharts 基座组件：任何图表 = 传 option
 * 解决三个老大难（详见第三节）：
 *   1. 0 尺寸容器 → nextTick + ResizeObserver 双保险
 *   2. 数据驱动   → watch props.option，引用变化即 setOption
 *   3. 内存泄漏   → ResizeObserver/图表实例 在 onUnmounted 成对销毁
 *
 * 约定：
 *   - option 每次更新必须是"新对象"（父级 computed 天然满足）
 *   - 组件不持业务状态：不认识"温度"也不认识"告警"，只认识 option
 */
import { onMounted, onUnmounted, ref, watch } from "vue";
import * as echarts from "echarts";   // Week 8 已按需注册，这里从注册模块导出

const props = defineProps<{
  option: echarts.EChartsOption;
  /** 空状态占位（断线且无数据时显示） */
  empty?: boolean;
}>();

const el = ref<HTMLDivElement>();            // 模板引用（容器 DOM）
let chart: echarts.ECharts | null = null;    // 非 responsive：实例无需响应式包裹
let ro: ResizeObserver | null = null;        // 容器尺寸观察器

onMounted(() => {
  // 老大难 1：等 DOM 上屏后再 init（v-show 的 display:none 已解除，
  // 若仍为 0 尺寸，由 ResizeObserver 兜底——见第三节）
  chart = echarts.init(el.value!, "industrial-dark");   // Day 55 主题
  chart.setOption(props.option);

  // 容器尺寸变化自动 resize（scale 壳、窗口变化、屏切换全覆盖）
  ro = new ResizeObserver(() => chart?.resize());
  ro.observe(el.value!);
});

// 老大难 2：option 引用变化 → 增量更新
watch(
  () => props.option,
  (opt) => chart?.setOption(opt),   // setOption 默认 merge：只打差异补丁（第五节）
);

// 老大难 3：成对销毁（Day 69 排查位 3 的结构性解法）
onUnmounted(() => {
  ro?.disconnect();       // 观察器摘除
  chart?.dispose();       // 实例销毁（内部 canvas/事件监听一并释放）
  chart = null;
});
</script>

<template>
  <div class="vchart">
    <div ref="el" class="vchart__canvas" />
    <div v-if="empty" class="vchart__empty">暂无数据</div>
  </div>
</template>

<style scoped>
.vchart { position: relative; width: 100%; height: 100%; }
.vchart__canvas { width: 100%; height: 100%; }
.vchart__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: var(--fs-axis);
}
</style>

时机 A：组件首次挂载时父级还是 display:none（v-show 隐藏屏）
   → onMounted 里 el 已在 DOM，但 offsetWidth = 0
时机 B：scale 壳动画进行中（transform 未稳定）
时机 C：布局抖动（grid 尚未完成分配）

onMounted(() => {
  const tryInit = (): void => {
    if (!el.value || el.value.offsetWidth === 0) return;   // 0 尺寸：不 init
    chart = echarts.init(el.value, "industrial-dark");
    chart.setOption(props.option);
    ro = new ResizeObserver(() => chart?.resize());
    ro.observe(el.value!);
  };
  nextTick(tryInit);                       // 保险 1：DOM 上屏后
  // 保险 2：尺寸出现时（ResizeObserver 捕获任何 0→非0）
  const boot = new ResizeObserver(() => { if (!chart) tryInit(); });
  boot.observe(el.value!);
  onUnmounted(() => boot.disconnect());    // 引导观察器也要清理
});

// watch 源用 getter：() => props.option
// 追踪的是"props.option 的引用变化"——父级每次 computed 重算产生新对象即触发
watch(() => props.option, (opt) => chart?.setOption(opt));

<!-- components/TempLineChart.vue：温度曲线（业务壳，薄薄一层） -->
<script setup lang="ts">
/**
 * 温度曲线：Day 56/69 曲线模块的 Vue 版
 * 职责只剩"把 Store 窗口翻译成 option"——init/resize/dispose 全部外包给 VChart
 */
import { computed } from "vue";
import VChart from "./VChart.vue";
import type { PanelSnapshot } from "../core/types";

const props = defineProps<{
  windows: Map<string, { ts: number; v: number }[]>;
  deviceIds: string[];        // 曲线对应的设备
  names: string[];            // 图例名
  threshold?: number;         // 告警阈值（markLine）
}>();

// 派生 option：windows 变 → computed 重算 → 新引用 → VChart 自动 setOption
const option = computed(() => ({
  grid: { left: 50, right: 20, top: 40, bottom: 30 },
  tooltip: { trigger: "axis" },
  legend: { top: 5 },
  xAxis: { type: "time" },
  yAxis: { type: "value", min: 60, max: (v: { max: number }) => Math.max(100, v.max + 5) },
  series: props.deviceIds.map((id, i) => ({
    type: "line" as const,
    name: props.names[i],
    showSymbol: false,
    smooth: true,
    animation: false,                      // Day 54 性能纪律原样保留
    data: (props.windows.get(id) ?? []).map((p) => [p.ts, p.v] as [number, number]),
    markLine: props.threshold
      ? { silent: true, symbol: "none", lineStyle: { color: "#ff4d4f", type: "dashed" },
          data: [{ yAxis: props.threshold }] }
      : undefined,
  })),
}));
</script>

<template>
  <VChart :option="option" />
</template>

<TechCard title="实时温度监控">
  <TempLineChart :windows="tempWindows" :device-ids="['f1','f2']" :names="['1号炉','2号炉']" :threshold="92" />
</TechCard>