<script setup lang="ts">
defineProps<{
  label: string;
  /** 占满整行 */
  full?: boolean;
  /** 跨列数（默认 1） */
  span?: 2 | 3;
}>();
</script>

<template>
  <div
    class="admin-detail-item"
    :class="{
      'admin-detail-item--full': full,
      'admin-detail-item--span-2': span === 2,
      'admin-detail-item--span-3': span === 3,
    }"
  >
    <div class="admin-detail-item__label">{{ label }}</div>
    <div class="admin-detail-item__value">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.admin-detail-item {
  display: grid;
  grid-template-columns: minmax(5.5em, max-content) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: baseline;
  min-width: 0;
}

.admin-detail-item--span-2 {
  grid-column: span 2;
}

.admin-detail-item--span-3,
.admin-detail-item--full {
  grid-column: 1 / -1;
}

.admin-detail-item__label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.admin-detail-item__value {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
}

.admin-detail-item__value :deep(.field-hint),
.admin-detail-item__value :deep(.admin-detail-hint) {
  display: inline;
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.admin-detail-item--full .admin-detail-item__value :deep(.admin-detail-hint),
.admin-detail-item--span-2 .admin-detail-item__value :deep(.admin-detail-hint),
.admin-detail-item--span-3 .admin-detail-item__value :deep(.admin-detail-hint) {
  display: inline;
}
</style>
