<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->

<script setup lang="ts">
import LoadingState from "./LoadingState.vue";
import EmptyState from "./EmptyState.vue";

withDefaults(defineProps<{
  state: "initial-loading" | "refreshing" | "partial" | "empty" | "error" | "ready";
  label?: string;
  emptyTitle?: string;
  emptyDescription?: string;
  errorTitle?: string;
  error?: string;
  hasContent?: boolean;
}>(), {
  label: "加载中",
  emptyTitle: "暂无内容",
  emptyDescription: "当前查询没有返回记录。",
  errorTitle: "加载失败",
  error: "请求未完成，请稍后重试。",
  hasContent: false
});

defineEmits<{ retry: [] }>();
</script>

<template>
  <section class="console-async-boundary" :data-state="state" :aria-busy="state === 'initial-loading' || state === 'refreshing' ? 'true' : 'false'">
    <slot v-if="hasContent || state === 'ready' || state === 'refreshing' || state === 'partial'" />
    <slot v-else-if="state === 'initial-loading'" name="loading"><LoadingState :label="label" /></slot>
    <slot v-else-if="state === 'empty'" name="empty"><EmptyState :title="emptyTitle" :description="emptyDescription" /></slot>
    <slot v-else-if="state === 'error'" name="error"><EmptyState :title="errorTitle" :description="error" action-label="重试" @action="$emit('retry')" /></slot>
    <span v-if="state === 'refreshing' || state === 'partial'" class="console-async-indicator" :data-state="state" role="status">
      {{ state === 'refreshing' ? '正在刷新' : '部分数据' }}
    </span>
  </section>
</template>
