import { computed, ref, shallowRef } from "vue";

const latest = shallowRef<PanelSnapshot | null>(null);

// 派生 KPI：依赖（latest）不变就返回缓存，变了自动重算
const avgTemp = computed(() => {
  if (!latest.value) return 0;
  const ds = latest.value.devices;
  return ds.reduce((s, d) => s + d.temperature, 0) / ds.length;
});

import { watch, watchEffect } from "vue";

// 姿势一：明确源 + 回调（生产首选，依赖显式）
watch(latest, (snap, oldSnap) => {
  console.log(`seq: ${oldSnap?.seq} → ${snap.seq}`);
});

// 姿势二：deep（仅 reactive/对象源需要；shallowRef 整体替换天然不需要）
watch(layoutState, () => saveConfig(), { deep: true });

// 姿势三：watchEffect（自动收集依赖，慎用——依赖是隐式的）
watchEffect(() => {
  document.title = `告警 ${alarms.value.length} 条`;
});

onMounted(() => {
  timer = setInterval(tick, 1000);
});
onUnmounted(() => {
  clearInterval(timer);   // 忘了这行 = Day 69 坑 4 的 Vue 复刻
});

// src/composables/useRollingNumber.ts
import { onUnmounted, ref, watch } from "vue";

/**
 * KPI 数字翻牌器（组合式函数版，迁移自 Day 67 的 createRollingNumber）
 * @param source 目标数值的 ref（外部数据驱动）
 * @param opts   动画配置：时长与小数位
 * @returns display —— 可直接用于模板的显示值 ref
 *
 * 设计要点：
 * 1. 源变了才动：watch 源值触发滚动，而非每帧盲跑
 * 2. 组件卸载自动取消 rAF：onUnmounted 兜底（宿主组件不需要知情）
 * 3. 返回 ref 而非操作 DOM：与模板解耦，任何 <span>{{ display }}</span> 可用
 */
export function useRollingNumber(
  source: Ref<number>,
  opts = { duration: 800, decimals: 0 }
): Ref<string> {
  const display = ref("0");   // 显示值（含千分位）
  let rafId = 0;
  let current = 0;            // 动画起始值（上一次的最终值）

  /** 千分位格式化：125800 → "125,800"（Day 67 同款） */
  const fmt = (v: number): string =>
    v.toLocaleString("zh-CN", {
      minimumFractionDigits: opts.decimals,
      maximumFractionDigits: opts.decimals,
    });

  // 源值变化 → 播放插值滚动
  watch(source, (target) => {
    cancelAnimationFrame(rafId);
    const from = current;
    const start = performance.now();

    const frame = (now: number): void => {
      const t = Math.min((now - start) / opts.duration, 1);
      const eased = 1 - Math.pow(1 - t, 3);      // easeOutCubic，全项目统一
      current = from + (target - from) * eased;
      display.value = fmt(current);
      if (t < 1) rafId = requestAnimationFrame(frame);
    };
    rafId = requestAnimationFrame(frame);
  });

  // 宿主组件卸载 → 取消进行中的动画（成对纪律）
  onUnmounted(() => cancelAnimationFrame(rafId));

  return display;
}

<!-- components/KpiTile.vue（简化版，Day 74 补 props） -->
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRollingNumber } from "../composables/useRollingNumber";

const latest = shallowRef<PanelSnapshot | null>(null);   // Day 75 换成全局数据

// 派生：今日产量 KPI
const output = computed(() => latest.value?.kpi.output ?? 0);
// 翻牌显示值：output 变 → 自动滚动
const outputDisplay = useRollingNumber(output, { duration: 800 });
</script>

<template>
  <!-- 等宽字体（Day 66 token）：跳动不移位 -->
  <div class="kpi-tile">
    <span class="kpi-tile__label">今日产量</span>
    <span class="kpi-tile__value">{{ outputDisplay }}</span>
  </div>
</template>

// 告警数据的两层派生：原始列表 → 未确认 → 按时间倒序
const alarms = shallowRef<Alarm[]>([]);

const activeAlarms = computed(() =>
  alarms.value.filter((a) => !a.acked)
);

const sortedAlarms = computed(() =>
  [...activeAlarms.value].sort((a, b) => b.ts - a.ts).slice(0, 50)   // 上限截断（Day 69 排查位 2）
);

// 危险等级计数：状态灯旁边的小徽标
const dangerCount = computed(() =>
  sortedAlarms.value.filter((a) => a.level === "danger").length
);