<template>
    <DialogWidget ref="dialog" :title="title" :icon="icon" :show-close="true" :buttons="dialogButtons" :modal="true"
        :isTitleTranslated="false" width="30em" height="15em" name="ChooseDialog">
        <div class="dialog-body">
            <p>{{ message }}</p>
        </div>
    </DialogWidget>
</template>

<script>
import DialogWidget from "@/components/DialogWidget.vue";

export default {
    name: "ChooseDialog",
    components: {
        DialogWidget,
    },
    data() {
        return {
            title: "Bestätigung",
            message: "Sind Sie sicher?",
            icon: null,
            resolve: null,
            dialogButtons: []
        };
    },
    methods: {
        open(options = {}) {
            this.title = options.title || "Bestätigung";
            this.message = options.message || "Sind Sie sicher?";
            this.icon = options.icon || null;
            this.dialogButtons = [
                { text: this.$t("yes"), action: this.confirmYes },
                { text: this.$t("no"), action: this.confirmNo },
            ];
            return new Promise((resolve) => {
                this.resolve = resolve;
                this.$refs.dialog.open();
            });
        },
        close() {
            this.$refs.dialog.close();
        },
        confirmYes() {
            console.log('ja');
            this.resolve(true);
            this.close();
        },
        confirmNo() {
            console.log('nein');
            this.resolve(false);
            this.close();
        },
    },
};
</script>

<style scoped>
.dialog-body {
    padding: 20px;
    text-align: center;
}
</style>
