<template>
  <q-layout view="hHh LpR fFf">
    <q-page-container style="min-height: 100vh">
      <router-view :key="$route.path" />
    </q-page-container>
  </q-layout>
</template>

<script>
import { ref } from 'vue';
import { useCurrentUserStore } from 'src/stores/current-user';
import { mapState, mapActions } from 'pinia';
import { createMetaMixin } from 'quasar';
import { LocalStorage } from 'quasar';
import meta from '../utils/meta';

export default {
  setup() {
    const leftDrawerOpen = ref(false);

    return {
      acceptCookies: ref(false),
      acceptCookiesMessage:
        'Мы используем файлы cookies. <br/> Чтобы улучшить работу сайта и предоставить вам больше возможностей.',
      // loginButton,
      // menuList
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      },
    };
  },

  mixins: [
    createMetaMixin(function () {
      return meta(this.metaTags);
    }),
  ],
  computed: {
    ...mapState(useCurrentUserStore, ['getUserId']),
    button() {
      return this.getUserId ? this.loginButton.logout : this.loginButton.login;
    },
    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);
    }
    if (LocalStorage.getItem('jwt_token')) {
      this.getMe();
    }
  },
  methods: {
    ...mapActions(useCurrentUserStore, ['getMe', 'logout']),
    onLogout() {
      this.logout()
        .then((res) => {
          console.log('result', res);
          this.$router.push({ name: 'start' });
        })
        .catch((res) => {
          console.log('error', res);
        });
    },
  },
};
</script>
