<template>
  <div class="counts-card" v-if="hasCounts">
    <div class="counts-header">检测计数</div>
    <div class="counts-body">
      <div class="count-item" v-for="(item, index) in counts" :key="index">
        <span class="count-label">{{ item.name }}</span>
        <span class="count-value">{{ item.count }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

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

const hasCounts = computed(() => props.counts.length > 0)
</script>

<style lang="scss" scoped>
.counts-card {
  background: $bg-white;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
  overflow: hidden;

  .counts-header {
    padding: 10px 16px;
    background: #e3f2fd;
    font-size: 14px;
    font-weight: 600;
    color: #1565c0;
  }

  .counts-body {
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    .count-item {
      flex: 1 1 calc(50% - 6px);
      display: flex;
      justify-content: space-between;
      padding: 6px 10px;
      background: #f5f5f5;
      border-radius: 6px;
      font-size: 13px;

      .count-label {
        color: $text-secondary;
      }

      .count-value {
        font-weight: 700;
        color: $primary-color;
      }
    }
  }
}
</style>
