<template>
    <el-dialog :close-on-click-modal="false"
               :show-close="false"
               :visible="loading" :width="width"
               append-to-body center
               class="dialog-loading"
               custom-class="dialog-loading-custom"
    >
        <div v-loading="loading"
             :element-loading-text="content"
             :style="{height: height}"
             element-loading-spinner="el-icon-loading"
        ></div>
    </el-dialog>
</template>

<script>
export default {
    name: 'AutoLoading',
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        content: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '300px'
        },
        height: {
            type: String,
            default: '200px'
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-loading {

    ::v-deep {
        .el-dialog__header {
            display: none;
        }

        .el-loading-mask {
            border-radius: 16px;
            background-color: transparent;
        }

        .dialog-loading-custom {
            border-radius: 16px;
            background-color: rgba(255, 255, 255,1);
        }

        .el-dialog__body {
            padding: 0;
        }
    }
}

</style>
