<template>
    <div>
        <el-dialog
            :width="width"
            :title="title"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            append-to-body
        >
            <slot></slot>
            <slot name="preview"></slot>
            <slot name="handleBtn"></slot>

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

<script>
    export default {
        props: {
            title: {
                type: String,
                default: () => {
                    return ''
                },
            },
            innerTitle: {
                type: String,
                default: () => {
                    return ''
                },
            },
            dialogVisible: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
            innerDialogVisible: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
            width: {
                type: String,
                default: () => {
                    return '70%'
                },
            },
            innerWidth: {
                type: String,
                default: () => {
                    return '30%'
                },
            },
        },
        methods: {
            /* 右上角关闭外层 */
            handleClose() {
                /* 通知父组件更改弹框显示值 */
                this.$emit('closeDialog', false)
            },
            /* 右上角关闭内层 */
            handleCloseInner() {
                /* 通知父组件更改弹框显示值 */
                this.$emit('closeDialogInner', false)
            },
        },
    }
</script>

<style></style>
