<template>
    <div class="loading-container" :style="{'background': !hideMask ? bgColor : 'transparent'}">
        <div id="loadingBox" :style="{'margin-top':top+'px'}">
            <v-icon class="upload-loading-icon" :style="{'width':width+'px','height':width+'px'}" :iconClass="imgSrc" />
            <p style="color: #aaaaaa;">{{$t('system.loading')}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'loadingBox',
        props: {
            top: {
                type: Number,
                default: 200
            },
			hideMask: {
				type: Boolean,
				default: false
			},
            bgColor: {
                type: String,
                default: 'rgba(103,103,103,.27)'
            },
            type: {
                type: String,
                default: '1'
            },
            width: {
                type: String,
                default: '100'
            }
        },
        data() {
            return {
                imgSrc: ''
            }
        },
        created() {
            switch (this.type) {
                case '1':
                    require('@/icons/svg/loading.svg')
                    this.imgSrc = 'loading'
                    break
                case '2':
                    require('@/icons/svg/loading2.svg')
                    this.imgSrc = 'loading2'
                    break
                case '3':
                    require('@/icons/svg/loading3.svg')
                    this.imgSrc = 'loading3'
                    break
                case '4':
                    require('@/icons/svg/loading4.svg')
                    this.imgSrc = 'loading4'
                    break
                default:
                    break
            }
        },
        methods: {

        }
    }
</script>
<style>
    .loading-container {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        top:0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        /*background: rgba(103, 103, 103, 0.27);*/
        z-index: 1000;
    }

    #loadingBox {
        border-radius: 50%;
        width: 100px;
        height: 100px;
        display:flex;
		flex-direction: column;
        justify-content:center;
        align-items:center;
    }
</style>
