<template>
  <view class="empty-container">
    <view class="empty-icon">{{ icon }}</view>
    <text class="empty-text">{{ text }}</text>
    <text class="empty-desc" v-if="description">{{ description }}</text>
    <slot name="action"></slot>
  </view>
</template>

<script setup lang="ts">
interface Props {
  icon?: string
  text?: string
  description?: string
}

withDefaults(defineProps<Props>(), {
  icon: '📦',
  text: '暂无数据',
  description: ''
})
</script>

<style lang="scss" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 60rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: $uni-text-color-grey;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: $uni-text-color-placeholder;
  text-align: center;
  line-height: 1.6;
}
</style>
