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

            <!-- 内层对话框 -->
            <el-dialog
                append-to-body
                :title="dialogConfig.innerTitle"
                :width="dialogConfig.innerWidth"
                :visible.sync="dialogConfig.innerVisible"
                v-if="dialogConfig.innerVisible"
                :before-close="handleCloseInner"
            >
                <!-- 内层弹框内容 -->
                <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>

<style scoped lang="scss">
::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;
    min-height: 100vh;
    .el-dialog__body {
        flex: 1;
        overflow-y: scroll !important;
    }
    .dialog-content {
        padding: 20px;
    }
}
</style>
