<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = withDefaults(
  defineProps<{
    content?: string;
    width?: number | string;
    height?: number | string;
    delay?: number | string;
    marginTop?: number | string;
  }>(),
  {
    content: '暂无内容',
    width: 300,
    height: 300,
    delay: 0,
    marginTop: 100,
  },
);

const show = ref(false);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
onMounted(() => {
  setTimeout(() => (show.value = true), Number(props.delay));
});
</script>

<template>
  <div v-if="show" class="empty" :style="{ marginTop: `${marginTop}rpx` }">
    <slot>
      <image
        :src="`${OSS_URL}/empty.png`"
        :style="{
          width: `${width}rpx`,
          height: `${height}rpx`,
        }"
      />
      <div class="empty-content">
        {{ content }}
      </div>
    </slot>
  </div>
</template>

<style lang="scss" scoped>
.empty {
  width: 100%;
  height: inherit;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;

  .empty-content {
    width: 100%;
    color: #666666;
    font-size: 28rpx;
    line-height: 42rpx;
    margin-top: 50rpx;
  }
}
</style>
