<!-- src/screens/ScreenA.vue -->
<script setup lang="ts">
import { computed, onActivated } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "../stores/dashboard";
import TechCard from "../components/TechCard.vue";
import KpiTile from "../components/KpiTile.vue";
import AlarmTicker from "../components/AlarmTicker.vue";

defineOptions({ name: "ScreenA" });   // KeepAlive include 匹配（Day 82 坑 2）

const store = useDashboardStore();
const { latest } = storeToRefs(store);

// KPI 派生（getters 已有 avgTemp，屏级再补两个展示派生）
const kpis = computed(() => [
  { label: "今日产量",   value: latest.value?.kpi.output ?? 0, decimals: 0 },
  { label: "平均温度",   value: store.avgTemp,                  decimals: 1 },
  { label: "在线设备",   value: latest.value?.devices.filter((d) => d.state !== "offline").length ?? 0, decimals: 0 },
  { label: "活跃告警",   value: store.activeAlarms.length,      decimals: 0 },
]);

// 激活协议：屏 A 无图表，只需轻校准（Day 82 纪律）
onActivated(() => {
  // 翻牌器在数据驱动下自愈，无需干预——留空也写上钩子，未来加内容有位置
});
</script>

<template>
  <section class="screen screen-a">
    <!-- 布局：上 KPI 带 / 中 厂区图 / 下 告警条（Day 66 grid 原样） -->
    <div class="overview-grid">
      <div class="overview__kpis">
        <TechCard title="关键指标总览">
          <div class="kpi-matrix">
            <!-- v-for + key：KPI 数固定但语义化 key 更稳（设备/指标 id） -->
            <KpiTile
              v-for="k in kpis"
              :key="k.label"
              :label="k.label"
              :value="k.value"
              :decimals="k.decimals"
            />
          </div>
        </TechCard>
      </div>

      <div class="overview__plant">
        <TechCard title="厂区总览">
          <img src="../assets/plant-topo.svg" alt="厂区俯视图" class="plant-img" />
        </TechCard>
      </div>

      <div class="overview__ticker">
        <AlarmTicker />
      </div>
    </div>
  </section>
</template>

❌ 思路：定时器驱 DOM（把原生逻辑原样搬来）
✅ 思路：状态（当前显示第几条）驱动，DOM 是映射

<!-- src/components/AlarmTicker.vue -->
<script setup lang="ts">
/**
 * 告警滚动条：每 4 秒轮换一条活跃告警
 * 设计：一个 index ref 驱动当前显示；数据变化时 index 自动回卷
 * （状态驱动——没有任何定时器直接操作 DOM）
 */
import { computed, onDeactivated, onMounted, onUnmounted, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "../stores/dashboard";

const store = useDashboardStore();
const { activeAlarms } = storeToRefs(store);

const index = ref(0);
let timer = 0;

// 当前告警：越界自动回卷（告警被 ack 后数组变短的容错——Day 74 key 纪律的姊妹坑）
const current = computed(() =>
  activeAlarms.value.length > 0
    ? activeAlarms.value[index.value % activeAlarms.value.length]
    : null
);

const start = (): void => {
  timer = window.setInterval(() => {
    index.value++;
  }, 4000);
};
const stop = (): void => clearInterval(timer);

// 生命周期成对 + 激活协议（KeepAlive 下失活停表——省 CPU 纪律）
onMounted(start);
onUnmounted(stop);
onDeactivated(stop);
onActivated(start);

// 数据源清空时重置（从 0 数起，避免 % 0 的 NaN）
watch(() => activeAlarms.value.length, (len) => {
  if (len === 0) index.value = 0;
});
</script>

<template>
  <div class="ticker">
    <span v-if="current" class="ticker__item" :data-level="current.level" :key="current.id">
      <!-- :key 换人即重播动画：Transition 之外更轻的"key 骤变重渲"技巧 -->
      {{ fmtTime(current.ts) }} · {{ current.text }}
    </span>
    <span v-else class="ticker__empty">所有系统运行正常</span>
  </div>
</template>

<style scoped>
.ticker { overflow: hidden; height: 32px; }
.ticker__item {
  display: inline-block; white-space: nowrap;
  animation: ticker-in 0.5s ease;               /* 每条滚入一次 */
  color: var(--text-body); font-size: var(--fs-axis);
}
.ticker__item[data-level="danger"]  { color: var(--state-danger); }
.ticker__item[data-level="warn"]    { color: var(--state-warn); }

@keyframes ticker-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
</style>

✅ SVG 文件原样拷贝到 src/assets/
✅ <img> 引用（Vite 自动处理资产路径与 hash）
❌ 不"顺手"加点击热区、不加设备点位动画——范围冻结（Week 10 铁律的延续）

<!-- src/components/KpiTile.vue（正式版） -->
<script setup lang="ts">
import { computed, toRef } from "vue";
import { useRollingNumber } from "../composables/useRollingNumber";

const props = defineProps<{
  label: string;
  value: number;
  decimals?: number;
}>();

// toRef：把 props 的某个字段变成 ref——喂给组合式函数（Day 75 坑 3 的正面示范）
const valueRef = toRef(props, "value");
const display = useRollingNumber(valueRef, {
  duration: 800,
  decimals: props.decimals ?? 0,
});
</script>

<template>
  <div class="kpi-tile">
    <span class="kpi-tile__label">{{ label }}</span>
    <span class="kpi-tile__value">{{ display }}</span>
  </div>
</template>

WS 链路（服务层） → store.setSnapshot（actions）
  → latest（state） → kpis computed（屏级派生）
    → KpiTile props → toRef → useRollingNumber watch
      → display ref → 模板插值