<template>
    <div :class="['yy-empty', `yy-empty-${vertical}`]">
        <div class="yy-empty-content">
            <div v-if="showImage" :class="`yy-empty-img yy-empty-img-${type}`">
            </div>
            <slot v-if="showSlot"></slot>
            <p v-else>{{text||typeList[type].text}}</p>
        </div>
    </div>
</template>
<script>
    import { t } from '../../../locale/'
    import { oneOf } from '../../../utils/assist'
    const types = ['data', 'search', 'develop', 'network', 'server', '404', 'approve']

    export default {
        name: "YYEmpty",
        props: {
            showImage: {
                type: Boolean,
                default: true
            },
            type: {
                validator: function(value) {
                    return oneOf(value, types)
                },
                default: 'data'
            },
            vertical: {
                validator: function(value) {
                    return oneOf(value, ['top', 'middle'])
                },
                default: 'middle'
            },
            text: {
                type: String
            }
        },
        data() {
            let typeList = {}
            types.forEach((item) => {
                typeList[item] = {
                    src: require(`../../../assets/images/tip_${item}.png`),
                    text: t(`empty.${item}`)
                }
            })
            return {
                showSlot: false,
                typeList
            }
        },
        created() {
            this.showSlot = !!this.$slots.default
        }
    }
</script>
