<template>
  <div class="edit-status-bar">
    <span class="seg">
      选中 <b>{{ selectedCount }}</b> 个
    </span>
    <span class="seg">
      鼠标 ({{ formatXY(mouseX) }}, {{ formatXY(mouseY) }}) mm
    </span>
    <span class="seg">
      当前工具：<b>{{ toolLabel }}</b>
    </span>
    <span class="seg">
      吸附：<b :class="{ on: snapOn, off: !snapOn }">{{ snapOn ? '开' : '关' }}</b>
    </span>
    <span class="spacer" />
    <span class="seg">历史 {{ undoSize }} / {{ redoSize }}</span>
    <span v-if="connected" class="seg ok">● 实时通道在线</span>
    <span v-else class="seg warn">● 实时通道断开</span>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  selectedCount: number
  mouseX: number
  mouseY: number
  toolLabel: string
  snapOn: boolean
  undoSize: number
  redoSize: number
  connected: boolean
}>()

function formatXY(v: number) {
  if (!Number.isFinite(v)) return '--'
  return v.toFixed(0)
}
</script>

<style scoped>
.edit-status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 14px;
  background: rgba(20, 8, 40, 0.85);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(232,215,245,0.85);
  font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  height: 28px;
}
.spacer { flex: 1; }
.seg b { color: var(--mg-accent, #c4a4ff); }
.seg .on { color: #67c23a; }
.seg .off { color: #a0a0a0; }
.seg.ok { color: #67c23a; }
.seg.warn { color: #f56c6c; }
</style>
