import { ref } from "vue";

// 任意类型的单一值：基础类型、对象、Map 都可以
const connState = ref<"connected" | "connecting" | "closed">("closed");
const latest = ref<PanelSnapshot | null>(null);

// script 中读写都要 .value；模板中自动解包
connState.value = "connected";

import { reactive } from "vue";

// reactive：对象的深层代理，适合"结构稳定的组态对象"
const layout = reactive({
  currentScreen: "A",
  autoplay: true,
  dwellSec: { A: 15, B: 20, C: 15 },
});

// ✅ 属性读写直接来，无 .value
layout.autoplay = false;

// ❌ 陷阱一：解构丢响应性——拷贝出了普通值
const { autoplay } = layout;      // autoplay 从此是死数据
// 修复：toRefs 保持响应式连接
const { autoplay } = toRefs(layout);  // 现在是 ref，模板里可用

// ❌ 陷阱二：整体替换断开代理
layout = { ...newLayout };        // 编译报错（const）＋即使 let 也丢响应

const latest = ref<PanelSnapshot | null>(null);
latest.value = newSnap;   // ❌ Vue 会递归遍历整个对象做深层代理
                          //    每秒两次深代理 = 无谓的 GC 压力

import { shallowRef, triggerRef } from "vue";

const latest = shallowRef<PanelSnapshot | null>(null);
latest.value = newSnap;   // ✅ 只追踪 .value 的替换，不深入对象内部
                          //    引用变了 → 通知更新，性能开销 O(1)

<template>
  <!-- 1. 插值：文本（{{ }}）与属性（:attr） -->
  <span>{{ connState }}</span>
  <div :class="{ 'is-danger': connState === 'closed' }">●</div>

  <!-- 2. 列表：v-for + key（key 纪律见 Day 74） -->
  <li v-for="alarm in alarms" :key="alarm.id">{{ alarm.text }}</li>

  <!-- 3. 条件渲染：v-if（真移除）与 v-show（display 切换） -->
  <div v-if="alarms.length === 0" class="empty">暂无告警</div>
  <div v-show="isActive">…</div>

  <!-- 4. 事件：@event，内联或方法名 -->
  <button @click="toggleAutoplay">暂停轮播</button>

  <!-- 5. 双向绑定：表单场景才用（大屏少用，意识到位即可） -->
  <input v-model="dwellSec" />
</template>

<!-- 三屏互斥：v-show 保证三屏始终挂载（ECharts 实例常驻） -->
<ScreenA v-show="current === 'A'" />
<ScreenB v-show="current === 'B'" />
<ScreenC v-show="current === 'C'" />

<!-- 但需要注意：v-show 用的是 display:none，隐藏容器宽高为 0，
     Day 52 坑 1（隐藏态图表）依然存在 → 切屏后 resize 的纪律照样要守 -->

<!-- components/ConnIndicator.vue -->
<script setup lang="ts">
/**
 * 连接状态灯：全屏共享的顶栏组件
 * 迁移自原生版 Day 63 的状态灯——当时是 onState 回调改 classList，
 * 现在是 connState（ref）到 class 的声明式映射
 */
import { computed } from "vue";

// props 由父级传入（Day 74 详讲，今天先用最简形式）
const props = defineProps<{ state: "connected" | "connecting" | "closed" }>();

// 派生状态：文案与配色（computed 详解见 Day 73，这里先感受"状态映射"）
const label = computed(
  () => ({ connected: "已连接", connecting: "连接中…", closed: "连接断开" })[props.state]
);
</script>

<template>
  <span class="conn" :data-state="state">
    <i class="conn__dot" />
    {{ label }}
  </span>
</template>

<style scoped>
.conn { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-dim); }
.conn__dot { width: 8px; height: 8px; border-radius: 50%; }
/* 状态色全部来自 Day 66 token——视觉零变化 */
.conn[data-state="connected"] .conn__dot { background: var(--state-ok); }
.conn[data-state="connecting"] .conn__dot { background: var(--state-warn); }
.conn[data-state="closed"]    .conn__dot { background: var(--state-danger); }
</style>

<script setup lang="ts">
import { ref } from "vue";
import ConnIndicator from "./components/ConnIndicator.vue";
// 暂时手动驱动状态验证组件，Day 75 接入真实数据源
const connState = ref<"connected" | "connecting" | "closed">("connecting");
setTimeout(() => (connState.value = "connected"), 2000);
</script>

<template>
  <header class="top-bar">
    <h1>智慧工厂监控中心</h1>
    <ConnIndicator :state="connState" />
  </header>
</template>