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

<template>
  <section class="panel">
    <div class="section-header">
      <h2>设备状态</h2>
      <div class="actions">
        <button class="primary" :disabled="store.statusLoading" @click="actions.refreshStatus()">
          {{ store.statusLoading ? '刷新中...' : '刷新状态' }}
        </button>
      </div>
    </div>
    <template v-if="store.status">
      <div class="metrics">
        <div class="metric"><div class="label">自检</div><div class="value">{{ store.status.self_check }}</div></div>
        <div class="metric"><div class="label">网口1</div><div class="value">{{ store.status.net1 }}</div></div>
        <div class="metric"><div class="label">网口2</div><div class="value">{{ store.status.net2 }}</div></div>
        <div class="metric"><div class="label">串口1</div><div class="value">{{ store.status.uart1 }}</div></div>
        <div class="metric"><div class="label">串口2</div><div class="value">{{ store.status.uart2 }}</div></div>
      </div>
      <p class="hint">最后刷新：{{ store.statusUpdatedAt || '--' }}</p>
    </template>
    <p v-else>正在加载状态...</p>
  </section>
</template>
