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

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

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

<style scoped>
.error-content {
    padding: 1em;
    color: red;
    text-align: center;
}
</style>
