<el-dialog
    :title="title"
    :before-close="function() {visible = false}"
    :visible="visible"
    :modal-append-to-body="false"
    width="30%">
    <span v-html="message" style="word-break: normal;"></span>
    <span slot="footer" class="dialog-footer">
        <el-button v-if="!isAlert" type="primary" @click="onSuccessWrap">{{yes}}</el-button>
        <el-button v-if="!isAlert" @click="visible = false">{{no}}</el-button>
        <el-button v-if="isAlert" @click="onSuccessWrap">{{ok}}</el-button>
    </span>
</el-dialog> 
<script type="application/javascript">
    function confirmDialog_Init(me){
        me.VueConfig.methods.defaultInit = function() {
            me.VueConfig.data = Object.assign(me.VueConfig.data, {
                title: WorkflowDesignerConstants.DialogConfirmText,
                message: WorkflowDesignerConstants.CloseWithoutSaving,
                isAlert: false,
                visible: true,
                yes: WorkflowDesignerConstants.ButtonTextYes,
                no: WorkflowDesignerConstants.ButtonTextNo,
                ok: WorkflowDesignerConstants.ButtonTextOk,
            });
        };
        
        me.VueConfig.methods.defaultInit();      

        me.VueConfig.methods.onSuccessWrap = function(){       
            if(me.VueConfig.data.onSuccess) me.VueConfig.data.onSuccess();          
            me.VueConfig.data.visible = false;
        };

        me.VueConfig.methods.onHideEvent = function(){
            me.VueConfig.data.visible = false;
        };

        /** @param {title=default, message=default, isAlert=false, onSuccess=default} value */
        me.VueConfig.methods.onUpdate = function(value){
            me.VueConfig.methods.defaultInit();
            Object.assign(me.VueConfig.data, value);            
            if (!value.title && value.isAlert)
                me.VueConfig.data.title = WorkflowDesignerConstants.AlertTitle;
        };

    };
</script>