<script setup>
import { store } from '../store/controllerStore';
</script>

<template>
  <div class="stats-bar">
    <span>分辨率: <b>{{ store.stats ? store.stats.width + '×' + store.stats.height : '-' }}</b></span>
    <span>帧率: <b>{{ store.stats ? store.stats.fps : '-' }}</b></span>
    <span>编码: <b>{{ store.stats ? store.stats.codec : '-' }}</b></span>
    <span>延迟: <b>{{ store.stats ? store.stats.latency : '-' }}</b></span>
    <span>抖动: <b>{{ store.stats ? store.stats.jitter : '-' }}</b></span>
    <span>丢帧: <b>{{ store.stats ? store.stats.framesDropped : '-' }}</b></span>
    <span>解码耗时: <b>{{ store.stats ? store.stats.decodeMs : '-' }}</b></span>
    <span>↑上传: <b>{{ store.stats ? store.stats.upSpeed : '-' }}</b></span>
    <span>↓下载: <b>{{ store.stats ? store.stats.downSpeed : '-' }}</b></span>
    <span>丢包: <b>{{ store.stats ? store.stats.packetLoss : '-' }}</b></span>
    <span>时长: <b>{{ store.stats ? store.stats.duration : '-' }}</b></span>
    <span>控制通道: <b>{{ store.dataChannelOpen ? '已连接' : '未连接' }}</b></span>
    <span>目标: <b>{{ store.targetDeviceId || '-' }}</b></span>
  </div>
</template>

<style scoped>
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.stats-bar span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* 每个统计项固定宽度，避免文字多少导致整体跳动 */
.stats-bar span:nth-child(1)  { width: 140px; } /* 分辨率 */
.stats-bar span:nth-child(2)  { width: 90px; }  /* 帧率 */
.stats-bar span:nth-child(3)  { width: 110px; } /* 编码 */
.stats-bar span:nth-child(4)  { width: 100px; } /* 延迟 */
.stats-bar span:nth-child(5)  { width: 100px; } /* 抖动 */
.stats-bar span:nth-child(6)  { width: 100px; } /* 丢帧 */
.stats-bar span:nth-child(7)  { width: 120px; } /* 解码耗时 */
.stats-bar span:nth-child(8)  { width: 120px; } /* 上传 */
.stats-bar span:nth-child(9)  { width: 120px; } /* 下载 */
.stats-bar span:nth-child(10) { width: 100px; } /* 丢包 */
.stats-bar span:nth-child(11) { width: 120px; } /* 时长 */
.stats-bar span:nth-child(12) { width: 140px; } /* 控制通道 */
.stats-bar span:nth-child(13) { width: 160px; } /* 目标 */
</style>
