<template>
        
    <el-button type="primary" @click="handleSend">發送訊息</el-button>
    
    <!-- 自訂第一層確認對話框 -->
    <el-dialog v-model="dialogVisible"
                title="發送確認"
                align-center
                custom-class="my-tiny-dialog"
                :close-on-click-modal="false">
        
        <div style="font-size: large; line-height:2; margin:30px;">
            
            <p>語系批量發送會寄送訊息給
                <strong style="color:red">所有使用該語系的使用者！</strong>
            </p>
            
            <p>確定真的要繼續？</p>
        </div>

        <template #footer>
            <el-button type="danger" @click="confirmDialog">我已確認</el-button>
            <el-button @click="cancelConfirm">取消</el-button>
        </template>
    </el-dialog>
    
</template>

<script setup>
    import { ref } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'

    // 狀態控制
    const dialogVisible = ref(false)

    let dialogResolve, dialogReject

    // 顯示第一層自訂 Dialog 並等待使用者點擊
    function waitForConfirm() {
        dialogVisible.value = true
        return new Promise((resolve, reject) => {
            dialogResolve = resolve
            dialogReject = reject
        })
    }

    // 第一層 Dialog 的「我已確認」
    function confirmDialog() {
        dialogVisible.value = false
        dialogResolve()
    }

    // 第一層 Dialog 的「取消」
    function cancelConfirm() {
        dialogVisible.value = false
        dialogReject('使用者取消')
    }

    // 模擬發送流程（包含兩層確認）
    async function handleSend() {
        const langNow = 'zh-TW' // 模擬語系（你可換成變數）

        try {
            await waitForConfirm() // 第一層自訂 Dialog

            await ElMessageBox.confirm(
                "您已選擇語系批量發送，寄送的語系為<strong>${langNow}</strong>。<br />真的確定要送出嗎？",
                "最終確認",
                {
                    type: 'warning',
                    confirmButtonText: '確定發送',
                    cancelButtonText: '取消',
                    customClass: 'wide-message-box',
                    dangerouslyUseHTMLString: true,
                }
            )

            console.log('✅ 使用者最終確認')
            ElMessage.success('訊息已送出')
        } catch (err) {
            console.log('❌ 使用者取消發送', err)
            ElMessage.info('已取消發送')
        }
    }
</script>

<style>
    /* 對話框樣式 */
    .my-tiny-dialog {
        width: 650px;
    }

    .my-tiny-dialog .el-dialog__headerbtn {
        position: absolute;
        top: 20px;
        right: 10px;
        padding: 0;
        border: none;
    }

    .my-tiny-dialog .el-dialog__header {
        padding-top: 10px;
        padding-left: 15px;
    }

    .my-tiny-dialog .el-dialog__footer {
        padding-bottom: 20px;        
    }

    /* 第二層的寬訊息框 */
    .wide-message-box {
        width: 500px !important;
        max-width: 90vw !important;
    }
</style>