<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="images/logo.png" />
          </q-avatar>
          Universo
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-page-container
      class="flex flex-center"
      style="
        background: center / cover no-repeat url(images/background.jpg)
          rgb(10, 10, 10);
        min-height: 100vh;
      "
    >
      <div class="flex flex-center column">
        <q-img src="images/logo.png" width="233px" />
        <q-btn
          class="q-my-xl"
          color="primary"
          label="В будущее"
          :to="{ name: 'login' }"
        />
        <div
          class="text-center text-white"
          style="
            font-family: Jura;
            font-size: 26px;
            font-weight: 700;
            line-height: 34px;
            letter-spacing: 0em;

            max-width: 800px;
          "
        >
          Погрузитесь через РВМ Универсо в гипервселенную — бесконечное
          пространство исследований, цифровизации и социального взаимодействия.
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
// @ts-nocheck

import { defineComponent, ref } from 'vue';
import { LocalStorage } from 'quasar';
import { createMetaMixin } from 'quasar';
import meta from '../utils/meta';

export default defineComponent({
  name: 'IndexLayout',
  mixins: [
    createMetaMixin(function () {
      return meta(this.metaTags);
    }),
  ],
  setup() {
    return {
      acceptCookies: ref(false),
      acceptCookiesMessage:
        'Мы используем файлы cookies. <br/> Чтобы улучшить работу сайта и предоставить вам больше возможностей.',
    };
  },
  computed: {
    title: function () {
      return this.$route?.meta?.title;
    },

    metaTags() {
      return {
        title: this.title,
        description:
          'Погрузитесь через РВМ Универсо в гипервселенную — бесконечное пространство исследований, цифровизации и социального взаимодействия в метавселенных. Функционал Общественного КиберГосплана поможет управлять вашими проектами и организациями, объединиться в рамках Омского Международного Плана, создавать в любой точке мира новые Народные предприятия, Профсоюзы, Советы и любые проекты по интересам.',
        keywords:
          'гипервселенная, метавселенные, госплан, кибергосплан, проекты, народные, предприятия, профсоюзы, советы, холсты, карточки, игры, работа',
        url: process.env.APP_HOST + this.$route.path,
        image: '',
        robots: '',
      };
    },
  },
  mounted() {
    this.acceptCookies = !!LocalStorage.getItem('acceptCookies');

    if (!this.acceptCookies) {
      setTimeout(() => {
        this.$q.notify({
          //progress: true,
          message: this.acceptCookiesMessage,
          color: 'red',
          multiLine: true,
          timeout: 0,
          html: true,
          actions: [
            {
              label: 'Согласен',
              color: 'white',
              handler: () => {
                this.acceptCookies = true;
                LocalStorage.set('acceptCookies', true);
              },
            },
          ],
        });
      }, 2000);
    }
  },
});
</script>
