<template>
    <div class="page-loading-me" v-if="showLoading">
        <span :class="'page-loading-icon svg-icon svg-icon-'+color+' svg-icon-lg'">
            <SvgIcon svgid="svg-loading"></SvgIcon>
        </span>
    </div>
</template>

<script>
    import SvgIcon from "@com/coms/icon/svg-icon.vue";
    export default {
        // 名称
        name: "loading",
        // 组件
        components: {
            SvgIcon
        },
        // 传入参数
        props: {
            // 默认选择第几组
            color: {
                type: String,
                default: "gral-l",
            },
        },
        // 自定义事件
        emits: { },
        // 数据
        data() {
            return {
                showLoading: true
            };
        },
        // 函数
        methods: {
            show: function() {
                this.showLoading = true;
            },
            hide: function() {
                this.showLoading = false;
            },
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    };
</script>

<style lang="less">
    .page-loading-me {
        position: absolute;
        z-index: 9999;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .page-loading-icon {
            animation: rotate 3s linear infinite;
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }
    }
</style>
