<!-- 空页面 -->
<template>
  <v-empty-state
    :headline="headline"
    :title="title"
    :text="text"
    :image="image"
    :icon="icon"
    :rounded="rounded"
    :elevation="elevation"
  >
    <!-- 图像插槽 -->
    <template v-if="$slots.media" #media>
      <slot name="media"></slot>
    </template>

    <!-- 标题插槽 -->
    <template v-if="$slots.title" #title>
      <slot name="title"></slot>
    </template>

    <!-- 文本插槽 -->
    <template v-if="$slots.text" #text>
      <slot name="text"></slot>
    </template>

    <!-- 操作按钮插槽 -->
    <template v-if="$slots.actions" #actions>
      <slot name="actions"></slot>
    </template>

    <!-- 底部插槽 -->
    <template v-if="$slots.bottom" #bottom>
      <slot name="bottom"></slot>
    </template>
  </v-empty-state>
</template>

<script setup>
// 定义组件名称
defineOptions({
  name: "VtkEmpty",
  inheritAttrs: false,
});

// 定义 props
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 副标题/文本
  text: {
    type: String,
    default: ''
  },
  // 头部文本（更大字体）
  headline: {
    type: String,
    default: ''
  },
  // 图标
  icon: {
    type: String,
    default: ''
  },
  // 图像
  image: {
    type: String,
    default: ''
  },
  // 圆角
  rounded: {
    type: [Boolean, String, Number],
    default: 'circle'
  },
  // 阴影
  elevation: {
    type: [Number, String],
    default: 0
  }
});
</script>

<style scoped>
/* 可以添加自定义样式 */
:deep(.v-empty-state) {
  padding: 24px;
}

:deep(.v-empty-state__media) {
  margin-bottom: 16px;
}

:deep(.v-empty-state__headline) {
  margin-bottom: 8px;
}

:deep(.v-empty-state__title) {
  margin-bottom: 8px;
}

:deep(.v-empty-state__actions) {
  margin-top: 16px;
}
</style>