<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 {}
            },
        },
        height: {
            type: String,
            default: '500px',
        },
    },
    methods: {
        /* 右上角关闭外层 */
        handleCloseOuter() {
            /* 通知父组件更改弹框显示值 */
            this.$emit('closeDialogOuter', false)
        },
        /* 右上角关闭内层 */
        handleCloseInner() {
            /* 通知父组件更改弹框显示值 */
            this.$emit('closeDialogInner', false)
        },
    },
}
</script>
