<script setup lang="ts">
defineProps<{ store: any; actions: any }>()
</script>

<template>
  <section class="panel">
    <h2>实时数据</h2>
    <div class="metrics" style="margin-bottom: 12px">
      <div class="metric">
        <div class="label">数据源</div>
        <div class="value">{{ store.realtimeSource }}</div>
      </div>
      <div class="metric">
        <div class="label">连接状态</div>
        <div class="value">{{ store.realtimeConnected ? 'WebSocket 已连接' : 'HTTP 轮询回退' }}</div>
      </div>
      <div class="metric">
        <div class="label">最后更新时间</div>
        <div class="value">{{ store.realtimeUpdatedAt || '--' }}</div>
      </div>
    </div>
    <div v-if="store.realtime" class="grid">
      <div v-for="line in store.realtime.line_list" :key="line.line_no" class="panel">
        <h3>线路 {{ line.line_no }}</h3>
        <div class="metrics">
          <div class="metric"><div class="label">一次电压 Ua</div><div class="value">{{ line.pri_val.Ua }}</div></div>
          <div class="metric"><div class="label">一次电流 Ia</div><div class="value">{{ line.pri_val.Ia }}</div></div>
          <div class="metric"><div class="label">总有功 Pt</div><div class="value">{{ line.pri_val.Pt }}</div></div>
          <div class="metric"><div class="label">频率</div><div class="value">{{ line.pri_val.frq }}</div></div>
        </div>
      </div>
    </div>
    <p v-else>正在等待实时数据...</p>
  </section>
</template>
