<template>
  <div class="g-data-panel" :class="{'g-card': card}">
    <slot v-if="loading" name="loading">
      <d-skeleton v-if="skeleton" class="p-20" :rows="skeletonRow"/>
      <Animation v-else-if="animation" class="w-full h-full flex-center" />
    </slot>
    <slot v-else-if="empty" name="empty">
      <EmptyData class="h-full flex-1" :hide-icon="hideIcon" :title="emptyText" :desc="emptyDetail" />
    </slot>
    <slot v-else></slot>
  </div>
</template>

<script setup lang="ts">
import Animation from '@/components/Animation/index.vue';

interface IProps {
  loading?: boolean,
  empty?: boolean,
  emptyText?: string,
  emptyDetail?: string,
  skeleton?: boolean,
  hideIcon?: boolean,
  skeletonRow?:number,
  card?: boolean,
  animation?: boolean
}
withDefaults(defineProps<IProps>(), {
  emptyText: '暂无数据',
  skeletonRow: 5,
  card: true,
  animation: false
});
</script>

<style lang="scss" scoped>
@import 'devui-theme/styles-var/devui-var.scss';
</style>
