<template>
  <view class="empty-container" :style="style">
    <image :style="iconStyle" src="/static/empty.svg" />
    <text class="empty-text"> {{ text }}</text>
    <slot></slot>
  </view>
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps({
  height: {
    type: String,
    default: '80vh'
  },
  size: {
    type: Array,
    default: () => [300, 150]
  },
  text: {
    type: String,
    default: '暂无数据'
  }
})
const style = computed(() => {
  return {
    height: props.height
  }
})
const iconStyle = computed(() => ({
  width: props.size[0] + 'rpx',
  height: props.size[1] + 'rpx'
}))


</script>
<style lang="scss" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.empty-text {
  margin-top: 24rpx;
  font-size: 28rpx;
  color: #999;
}
</style>
