<template>
    <v-app>
        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
            <v-card :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
                <v-card-title></v-card-title>
                <v-card-text class="h-100 d-flex flex-column align-center justify-center">
                    <div class="d-flex flex-column align-center justify-center main-text">
                        <p class="text-h1 ma-10">Юрий говорит:</p>
                        <p class="text-h2 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
                    </div>
                    <div class="d-flex align-center justify-center">
                        <v-btn
                            variant="elevated"
                            color="#94BBE9FF"
                            @click="reloadPhrase"
                            class="ma-10">
                            Другая фраза
                        </v-btn>
                        <a
                            v-if="currentPhrase === phrases[23]"
                            href="/download/basya_answer.docx"
                            class="ma-10">
                            <v-btn variant="elevated">Инструкция</v-btn>
                        </a>
                    </div>
                </v-card-text>
            </v-card>
        </v-sheet>
    </v-app>
</template>

<script>
import {ref} from 'vue';
export default {
    name: "Basya",
    data: () => ({
        phrases: [
            'Доброе утро. С проблемой боремся.',
            'Авария у провайдера, сроков на данный момент нет, разбираются',
            'Перегрузите страницу, все должно работать',
            'Доброе утро, смотрим',
            'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
            'Коллеги, пробуйте',
            'Коллеги, проблема массовая, разбираемся',
            'Попробуйте сейчас',
            'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
            'Коллеги, занимаемся проблемой',
            'По срокам пока сказать не могу',
            'Добрый день. Разбираемся',
            'Перепроверьте услуги',
            'Обновите страницу ctrl+f5',
            'Коллеги минуту, разбираемся',
            'скиньте скриншот',
            'Коллеги, проблема массовая, решается',
            'Подождите еще',
            'Коллеги, разбираемся',
            'Работаем',
            'Коллеги, проблема массовая. Ожидайте сигнала.',
            'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
            'Коллеги, проблема общая. Сейчас решаем вопрос.',
            'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
        ],
        currentPhrase: ref()
    }),
    methods: {
        reloadPhrase(){
            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
            if (newPhrase === this.currentPhrase){
                this.reloadPhrase();
            } else {
                this.currentPhrase = newPhrase;
            }
        }
    },
    mounted() {
        this.reloadPhrase();
    }
}
</script>

<style scoped>

.bg-gradient {
    background: rgb(238, 174, 202)!important;
    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;;
    /*
    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
    height: 100vh;
    */
}

.main-sheet-bg {
    background-color: #424242;
    color: #E0E0E0;
    text-decoration-color: #E0E0E0;
}

.main-text {
    text-align: center;
}

.vertical-center {
    justify-content: center;
    /* -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    transform: translateY(-50%);
    */
}

</style>
