<template>
    <div class="ht-base-empty">
        <div class="ht-base-empty-image">
            <template v-if="!image">
                <img :src=imgName />
                <slot name="desc"><p>{{emptyDesc}}</p></slot>
            </template>
            <template v-else>
                <img :style="styles" :src="image"/>
                <slot name="desc"></slot>
            </template>
        </div>
    </div>
</template>

<script>
    import {oneOf} from '../../../libs/utils/util';
    import noData from '../../../../themes/default/src/images/SuCo_no-data.svg';
    import noCollection from '../../../../themes/default/src/images/SuCo_no-collection.svg';
    import noNetwork from '../../../../themes/default/src/images/SuCo_no-network.svg';
    import noMessage from '../../../../themes/default/src/images/SuCo_no-message.svg';
    import noComment from '../../../../themes/default/src/images/SuCo_no-comment.svg';
    import examine from '../../../../themes/default/src/images/SuCo_examine.svg';

    export default {
        name: 'HtBaseEmpty',
        props: {
            type: {
                validator(value) {
                    return oneOf(value, ['noData', 'noCollection', 'noNetwork', 'noMessage', 'noComment', 'examine']);
                },
                default: 'noData'
            },
            image: {
                type: String
            },
            width: {
                type: [String, Number],
                default: 'auto'
            },
            height: {
                type: [String, Number],
                default: 'auto'
            }
        },
        computed: {
            imgName() {
                let name = '';
                switch (this.type) {
                    case 'noData':
                        name = noData;
                        break;
                    case 'noCollection':
                        name = noCollection;
                        break;
                    case 'noNetwork':
                        name = noNetwork;
                        break;
                    case 'noMessage':
                        name = noMessage;
                        break;
                    case 'noComment':
                        name = noComment;
                        break;
                    case 'examine':
                        name = examine;
                        break;
                }
                return name;
            },
            emptyDesc() {
                let desc = '';
                switch (this.type) {
                    case 'noData':
                        desc = '暂无数据';
                        break;
                    case 'noCollection':
                        desc = '暂无收藏';
                        break;
                    case 'noNetwork':
                        desc = '暂无网络';
                        break;
                    case 'noMessage':
                        desc = '暂无消息';
                        break;
                    case 'noComment':
                        desc = '暂无评论';
                        break;
                    case 'examine':
                        desc = '审核中';
                        break;
                }
                return desc;
            },
            styles() {
                let width = this.width.toString();
                if (width.charAt(width.length - 1) === '%') {
                    width = this.width;
                } else {
                    width = this.width + 'px';
                }
                let height = this.height.toString();
                if (height.charAt(height.length - 1) === '%') {
                    height = this.height;
                } else {
                    height = this.height + 'px';
                }
                return {
                    width: width,
                    height:height
                }
            }
        }
    }
</script>
<style>
    .ht-base-empty {

    }
</style>

