<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>