<template>
    <DialogWidget ref="dialog" title="message.title" :show-close="true" :buttons="buttons" :modal="true" width="25em"
        height="15em" name="MessageDialog" :isTitleTranslated=true>
        <div class="message-content">
            <p>{{ translatedMessage }}</p>
        </div>
    </DialogWidget>
</template>

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

export default {
    name: 'MessageDialog',
    components: {
        DialogWidget,
    },
    data() {
        return {
            message: '',
            buttons: [
                { text: 'message.close', action: 'close' }
            ]
        };
    },
    computed: {
        translatedMessage() {
            if (this.message.startsWith('tr:')) {
                return this.$t(this.message.substring(3));
            }
            return this.message;
        }
    },
    methods: {
        open(message) {
            this.message = message;
            this.$refs.dialog.open();
        },
        close() {
            this.$refs.dialog.close();
        }
    }
};
</script>

<style scoped>
.message-content {
    padding: 1em;
    color: #000000;
    text-align: center;
}
</style>
