<template>
    <transition name="fade">
        <div :class="classes" v-if="fullscreenVisible">
            <div :class="boxClasses">
                <svg class="circular" viewBox="25 25 50 50">
                    <circle class="path" cx="50" cy="50" r="20" fill="none"/>
                </svg>
                <div :class="textClasses"><slot></slot></div>
            </div>
        </div>
    </transition>
</template>

<script>
    import { oneOf } from '../../utils/assist';
    const prefixClass = 'loading';
    export default {
        name: 'Loading',
        props: {
            fix: {
                type: Boolean,
                default: false
            },
            fullscreen: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                showText: false,
                visible: false
            };
        },
        computed: {
            classes () {
                return [
                    `${prefixClass}`,
                    {
                        [`fix`]: this.fix,
                        [`show-text`]: this.showText,
                        [`fullscreen`]: this.fullscreen
                    }
                ];
            },
            boxClasses () {
                return `${prefixClass}-box`;
            },
            textClasses () {
                return `${prefixClass}-text`;
            },
            fullscreenVisible () {

                if (this.fullscreen) {
                    return this.visible;
                }
                else {
                    return true;
                }
            }
        },
        watch: {
        },
        mounted () {
            this.showText = this.$slots.default !== undefined;
        }
    };
</script>

<style scoped>

</style>