<template>
  <view class="wl-empty" :style="baseStyle">
    <image class="empty_icon" :src="`/static/images/${props?.iconName || 'empty_icon'}.png`" mode="heightFix" />
    <view class="label">
      {{ props?.text || '暂无数据' }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
  mode?: string
  text?: string // 可选，提示文字
  height?: string
  iconSize?: string | number
  textSize?: string | number
  baseStyle?: any
  iconName?: string
}>()

const baseStyle = {
  height: props.height || '30vh',
  ...props.baseStyle
}
</script>

<style scoped lang="scss">
.wl-empty {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  padding-top: 15%;
  text-align: center;

  .empty_icon {
    width: 310rpx;
    height: 155rpx;
  }

  .label {
    font-size: 25rpx;
    color: #999;
  }
}
</style>
