<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 提供键盘可激活且用 aria-pressed 表达选中状态的资源卡片。 -->

<script setup lang="ts">
import type { Component } from "vue";
import StatusBadge from "./StatusBadge.vue";

const props = withDefaults(defineProps<{
  title: string;
  subtitle?: string;
  status?: string;
  statusLabel?: string;
  icon?: Component;
  selected?: boolean;
  disabled?: boolean;
  interactive?: boolean;
}>(), {
  subtitle: "",
  status: "",
  statusLabel: "",
  icon: undefined,
  selected: false,
  disabled: false,
  interactive: true
});

const emit = defineEmits<{ select: [] }>();

function emitSelect(): void {
  if (!props.disabled && props.interactive) emit("select");
}

function onKeydown(event: KeyboardEvent): void {
  if (event.target !== event.currentTarget) return;
  if (event.key !== "Enter" && event.key !== " ") return;
  event.preventDefault();
  emitSelect();
}
</script>

<template>
  <article
    class="entity-card"
    :data-selected="selected ? 'true' : 'false'"
    :data-disabled="disabled ? 'true' : 'false'"
    :data-interactive="interactive ? 'true' : 'false'"
    :role="interactive ? 'button' : undefined"
    :tabindex="interactive && !disabled ? 0 : undefined"
    :aria-pressed="interactive ? selected : undefined"
    :aria-disabled="disabled ? 'true' : undefined"
    @click="emitSelect"
    @keydown="onKeydown"
  >
    <header class="entity-card-header">
      <div class="entity-card-heading">
        <span v-if="icon || $slots.icon" class="entity-card-icon" aria-hidden="true">
          <slot name="icon">
            <component :is="icon" v-if="icon" :size="18" />
          </slot>
        </span>
        <div class="entity-card-title-stack">
          <strong>{{ title }}</strong>
          <small v-if="subtitle">{{ subtitle }}</small>
        </div>
      </div>
      <StatusBadge v-if="status || statusLabel" :status="status" :label="statusLabel" />
    </header>
    <div v-if="$slots.meta" class="entity-card-meta"><slot name="meta" /></div>
    <div v-if="$slots.default" class="entity-card-body"><slot /></div>
    <footer v-if="$slots.footer" class="entity-card-footer" @click.stop><slot name="footer" /></footer>
  </article>
</template>
