<template>
<main class="container">
  <h2 class="text-center mb-5 font-weight-light">En préparation</h2>
  <div class="alert alert-danger">En développement</div>
  <NavigationLoader :isLoading="$apollo.queries.previsions.loading" />
  <transition name="fade">
    <div class="alert alert-danger" v-if="error">{{ error }}</div>
  </transition>
  <transition name="fade">
    <div v-if="previsions">
      {{ previsions }}
    </div>
  </transition>
</main>
</template>

<script>
import {PREVISIONS} from '@/graphql/queries'

export default {
  data() {
    return {
      breadcrumb: [
        {
          text: this.$t('accueil'),
          to: '/'
        },
        {
          text: this.$t('previsions.title'),
          active: true
        }
      ],
      display: 'forecastsByNames',
      error: null
    }
  },
  apollo: {
    previsions : {
      query: PREVISIONS,
      update (data) {
        return {
          // now: data.now,
          // sigQty: data.parameter.sigQty,
          // certifs_dossiers: data.wwFile.certifs_dossiers
          data
        }
      },
      error (err) {this.error = err.message}
    }
  },
  nuxtI18n: {
    paths: {
      fr: '/previsions',
      en: '/forecasts',
      es: '/pronosticos'
    }
  },
  mounted () {
    // Mise à jour du fil d'ariane au chargement
    $nuxt.$emit('changeRoute',this.breadcrumb)
  }
}
</script>