<el-dialog
  :before-close="function() {visible = false}"
  :modal-append-to-body="false"
  :title="title"
  :visible="visible"
  width="30%">
  <span v-html="message"></span>
  <span slot="footer" class="dialog-footer">
        <template v-if="typeof actions !== 'undefined' && actions.length > 0">
            <el-button v-for="(action, index) in actions" :key="index" :type="action.type" @click="funcWrapper(action.onClick)">
                {{ action.label }}
            </el-button>
        </template>
        <template v-else>
            <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>
        </template>
    </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,
        actions: undefined,
        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.funcWrapper = function (func) {
      if (func) func();
      me.VueConfig.data.visible = false;
    };

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

    /**
     * @param {Object} value
     * @param {string} value.title
     * @param {string} value.message
     * @param {bool} value.isAlert
     * @param {function} value.onSuccess - Used as default action if data.actions is empty
     * @param {Object[]} value.actions
     * @param {string} value.actions[].label
     * @param {string} value.actions[].type
     * @param {function} value.actions[].onClick
     */
    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>
