<template>
    <!-- 全局empty -->
    <view class="global-empty" :class="class">
        <image :src="getImageSrc" :style="getImageStyle" />
        <text :style="getTextStyle">
            <slot>暂无内容</slot>
        </text>
    </view>
</template>

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

const ps = defineProps({
    class: {
        type: String,
        default: ''
    },
    size: {
        type: Number,
        default: 160
    },
    type: {
        type: String,
        default: 'default'
    },
    color: {
        type: String,
        default: '#86909C'
    }
})
const getImageStyle = computed(() => {
    return {
        width: ps.size + 'rpx',
        height: ps.size + 'rpx'
    }
})
const getImageSrc = computed(() => {
    return `/static/mocp/image/empty/${ps.type}.png`
})
const getTextStyle = computed(() => {
    return {
        color: ps.color
    }
})
</script>
<style lang="scss" scoped>
.global-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex: none;
    image {
        margin-bottom: 40rpx;
    }
}
</style>
