<template>
    <div>
        <!-- 觸發主流程 -->
        <el-button type="primary" @click="sendMessage">發送</el-button>

        <!-- 確認對話框 -->
        <el-dialog v-model="dialogVisible" title="發送確認" width="400" align-center>
            <div>
                您即將發送訊息，此操作 <strong>不可逆</strong>。請再次確認是否繼續？
            </div>
            <template #footer>
                <el-button @click="cancelConfirm">取消</el-button>
                <el-button type="primary" @click="confirmDialog">我已確認</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { ElMessage } 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
        })
    }

    // 使用者點「確認」
    function confirmDialog() {
        dialogVisible.value = false
        dialogResolve()  // 繼續後續流程
    }

    // 使用者點「取消」
    function cancelConfirm() {
        dialogVisible.value = false
        dialogReject('使用者取消')
    }

    // 主流程
    async function sendMessage() {
        
        try {
            await waitForConfirm()
            // 使用者已確認
            console.log('✅ 確認後執行發送邏輯')
            ElMessage.success('訊息已送出')
        } catch (err) {
            console.log('❌ 使用者取消發送', err)
            ElMessage.info('已取消發送')
        }
    }
</script>

dialogResolve = resolve
dialogReject = reject