<template>
  <section class="metric-strip" aria-label="指标概览">
    <article v-for="metric in normalizedMetrics" :key="metric._key" class="metric-strip-item">
      <span class="metric-strip-label">{{ metric.label }}</span>
      <strong class="metric-strip-value">{{ metric.value }}</strong>
      <span v-if="metric.hint" class="metric-strip-hint">{{ metric.hint }}</span>
    </article>
  </section>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  metrics: {
    type: Array,
    default: () => []
  }
});

const normalizedMetrics = computed(() =>
  props.metrics
    .filter((metric) => metric && typeof metric === "object")
    .map((metric, index) => ({
      ...metric,
      label: metric.label || "未命名指标",
      value: metric.value ?? "-",
      _key: metric.key || `${metric.label || "metric"}-${index}`
    }))
);
</script>
