<template>
    <!-- 弹框组件 -->
    <div>
        <el-dialog
            :title="dialogConfig.outerTitle"
            :width="dialogConfig.outerWidth"
            :visible.sync="dialogConfig.outerVisible"
            v-if="dialogConfig.outerVisible"
            :before-close="handleCloseOuter"
            append-to-body
        >
            <!-- 外层弹框内容 -->
            <slot name="outerContent"></slot>

            <!-- 内层对话框 -->
            <el-dialog
                :title="dialogConfig.innerTitle"
                :width="dialogConfig.innerWidth"
                :visible.sync="dialogConfig.innerVisible"
                v-if="dialogConfig.innerVisible"
                :before-close="handleCloseInner"
                append-to-body
            >
                <!-- 内层弹框内容 -->
                <slot name="innerContent"></slot>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            /* 配置项 */
            dialogConfig: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        methods: {
            /* 右上角关闭外层 */
            handleCloseOuter() {
                /* 通知父组件更改弹框显示值 */
                this.$emit('closeDialogOuter', false)
            },
            /* 右上角关闭内层 */
            handleCloseInner() {
                /* 通知父组件更改弹框显示值 */
                this.$emit('closeDialogInner', false)
            },
        },
    }
</script>
