<template>
    <!-- 通用弹框组件（支持外层 + 内层） -->
    <div class="com-dialog">
        <!-- 外层弹框 -->
        <el-dialog
            v-if="dialogConfig.outerVisible"
            v-model="dialogConfig.outerVisible"
            :title="dialogConfig.outerTitle"
            :width="dialogConfig.outerWidth || '720px'"
            :before-close="handleCloseOuter"
            :append-to-body="true"
            :close-on-click-modal="false"
            :style="{
                '--com-dialog-min-height': dialogConfig.minHeight || '320px',
                '--com-dialog-max-height': dialogConfig.maxHeight || '80vh',
            }"
            class="com-dialog__outer"
        >
            <!-- 外层弹框内容插槽 -->
            <slot name="outerContent" />

            <!-- 内层弹框 -->
            <el-dialog
                v-if="dialogConfig.innerVisible"
                v-model="dialogConfig.innerVisible"
                :title="dialogConfig.innerTitle"
                :width="dialogConfig.innerWidth || '640px'"
                :before-close="handleCloseInner"
                :append-to-body="true"
                :close-on-click-modal="false"
                :style="{
                    '--com-dialog-min-height': dialogConfig.innerMinHeight || '260px',
                    '--com-dialog-max-height': dialogConfig.innerMaxHeight || '70vh',
                }"
                class="com-dialog__inner"
            >
                <!-- 内层弹框内容插槽 -->
                <slot name="innerContent" />
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script setup>
const props = defineProps({
    // 弹框配置对象
    dialogConfig: {
        type: Object,
        default: () => ({}),
    },
})

const emit = defineEmits(['closeDialogOuter', 'closeDialogInner'])

// 右上角关闭外层
const handleCloseOuter = () => {
    emit('closeDialogOuter', false)
}

// 右上角关闭内层
const handleCloseInner = () => {
    emit('closeDialogInner', false)
}
</script>

<style lang="scss">
/* 全局样式：仅作用于带 com-dialog__outer / com-dialog__inner 类名的弹框 */

/* 外层 + 内层弹框通用外观 */
.el-dialog:not(.is-fullscreen) {
    margin-top: 0 !important;
}
.com-dialog__outer,
.com-dialog__inner {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    min-height: var(--com-dialog-min-height);
    max-height: var(--com-dialog-max-height);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.35);
    background: #ffffff;
}

/* 头部区域：浅色背景 + 左侧色条 */
.com-dialog__outer .el-dialog__header,
.com-dialog__inner .el-dialog__header {
    position: relative;
    padding: 12px 18px;
    margin: 0;
    border-bottom: 1px solid #edf0f5;
    background: #f8f9fd;
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.com-dialog__outer .el-dialog__header::before,
.com-dialog__inner .el-dialog__header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #1677ff 0%, #69b1ff 100%);
}

.com-dialog__outer .el-dialog__title,
.com-dialog__inner .el-dialog__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
}

.com-dialog__outer .el-dialog__headerbtn,
.com-dialog__inner .el-dialog__headerbtn {
    top: 4px;
    right: 16px;

    .el-dialog__close {
        color: #4b5563; /* 默认深灰，保证在浅色标题背景下清晰可见 */
        transition: transform 0.2s ease, color 0.2s ease;
    }

    &:hover .el-dialog__close {
        color: #111827;
        transform: scale(1.05);
    }
}

/* 内容区域 */
.com-dialog__outer .el-dialog__body,
.com-dialog__inner .el-dialog__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 20px;
    box-sizing: border-box;
    background-color: #fafbff;
}

/* 底部区域 */
.com-dialog__outer .el-dialog__footer,
.com-dialog__inner .el-dialog__footer {
    padding: 12px 20px 16px;
    border-top: 1px solid #eef1f6;
    background-color: #ffffff;
}
</style>
