<script setup lang="ts">
import { computed } from "vue";
import LoadingState from "@/components/common/LoadingState.vue";

const props = withDefaults(defineProps<{
  loading: boolean;
  mode?: "persistent" | "blocking";
  hasContent?: boolean;
  label?: string;
  compact?: boolean;
}>(), {
  mode: "blocking",
  hasContent: true,
  label: "加载中",
  compact: false
});

const showBlockingLoading = computed(() => props.loading && (props.mode === "blocking" || !props.hasContent));
const showContent = computed(() => props.hasContent && !showBlockingLoading.value);
const showEmpty = computed(() => !props.hasContent && !showBlockingLoading.value);
</script>

<template>
  <div class="refresh-boundary" :data-loading="loading ? 'true' : 'false'" :data-mode="mode" :aria-busy="loading ? 'true' : 'false'">
    <template v-if="showBlockingLoading">
      <slot name="loading">
        <LoadingState :label="label" :compact="compact" />
      </slot>
    </template>
    <template v-else-if="showContent">
      <slot />
    </template>
    <template v-else-if="showEmpty">
      <slot name="empty" />
    </template>
  </div>
</template>

<style scoped>
.refresh-boundary { min-width: 0; min-height: 0; }
</style>
