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

            <!-- 内层对话框 -->
            <el-dialog
                append-to-body
                :title="dialogConfig.innerTitle"
                :width="dialogConfig.innerWidth"
                v-if="dialogConfig.innerVisible"
                :before-close="handleCloseInner"
                :visible.sync="dialogConfig.innerVisible"
                :style="{
                    '--el-dialog-min-height': dialogConfig.innerMinHeight,
                    '--el-dialog-max-height': dialogConfig.innerMaxHeight,
                }"
            >
                <!-- 内层弹框内容 -->
                <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;
    height: var(--el-dialog-max-height) !important;
    min-height: var(--el-dialog-min-height) !important;
    max-height: var(--el-dialog-max-height) !important;
    .el-dialog__body {
        flex: 1 !important;
        overflow-y: scroll !important;
        padding: 20px 20px !important;
        box-sizing: border-box !important;
    }
}
</style>
