<template>
  <div class="app-front" :class="$store.state.front.offCanvas ? 'fixedHeight' : null">
    <PreLoader/>
    <SiteHeader/>
    <div class="page">
      <img class="bannerHeightFix" :src="yearBanner.mainCover" alt="">
      <Nuxt/>
    </div>
    <SiteFooter/>
    <OffCanvas/>
  </div>
</template>


<script>
import FingerprintJS from '@fingerprintjs/fingerprintjs'

export default {
  async fetch() {
    try {
      const headerMenuData = await this.$axios.get(`/api/public/getMenu?portal=${this.currentPortal}`)
      const yearBanner = await this.$axios.get(`/api/public/yearBanner`)
      const counterDown = await this.$axios.get('/api/public/counterDay')
      this.$store.commit('front/setHeaderData', headerMenuData.data)
      this.$store.commit('front/setYearBanner', yearBanner.data)
      this.$store.commit('front/setCounterDown', counterDown.data)
    } catch (e) {
      console.log(e)
    }
  },
  mounted() {
    // Initialize an agent at application startup.
    const fpPromise = FingerprintJS.load()

    ;(async () => {
      // Get the visitor identifier when you need it.
      const fp = await fpPromise
      const result = await fp.get()

      // This is the visitor identifier:
      const visitorId = result.visitorId
      // console.log(visitorId)
      this.$store.commit('front/setPollToken', visitorId)
    })()
  },
  computed: {
    yearBanner() {
      return this.$store.state.front.yearBanner
    },
    currentPortal() {
      return this.$route.params.portal
    }
  },
  watch: {
    currentPortal(newVal, oldVal) {
      this.$axios(`/api/public/getMenu?portal=${this.currentPortal}`)
          .then(res => {
            this.$store.commit('front/setHeaderData', res.data)
          })
          .catch(err => {
            console.log(err)
          })
    }
  }
}
</script>

<style>
@import '../node_modules/slick-carousel/slick/slick.css';
@import '../node_modules/slick-carousel/slick/slick-theme.css';

pre{
  direction: ltr !important;
  text-align: left;
  padding: 25px;
  background: #000;
  color: greenyellow;
  font-size: 18px;
}
</style>
