<template>
  <div class="empty-state">
    <div class="empty-icon">
      <van-empty 
        :image="image" 
        :image-size="imageSize"
        :description="description"
      >
        <template v-if="$slots.image" #image>
          <slot name="image" />
        </template>
        
        <template v-if="$slots.description" #description>
          <slot name="description" />
        </template>
        
        <template v-if="showAction" #default>
          <van-button 
            :type="actionType" 
            :size="actionSize"
            round
            @click="handleAction"
          >
            {{ actionText }}
          </van-button>
        </template>
      </van-empty>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'

const props = defineProps({
  // 图片类型
  image: {
    type: String,
    default: 'default'
  },
  // 图片大小
  imageSize: {
    type: [Number, String],
    default: 160
  },
  // 描述文字
  description: {
    type: String,
    default: '暂无数据'
  },
  // 是否显示操作按钮
  showAction: {
    type: Boolean,
    default: false
  },
  // 按钮文字
  actionText: {
    type: String,
    default: '重新加载'
  },
  // 按钮类型
  actionType: {
    type: String,
    default: 'primary'
  },
  // 按钮大小
  actionSize: {
    type: String,
    default: 'normal'
  }
})

const emit = defineEmits(['action'])

const handleAction = () => {
  emit('action')
}
</script>

<style scoped>
.empty-state {
  padding: 40px 20px;
  text-align: center;
}
</style>