<template>
  <div>
    <div class="q-ma-md">
      <p class="text-h4">{{ cacheName }}</p>
      <p class="text-h5">Herzlichen Glückwunsch!</p>
      <p class="">Du hast alle Stationen gefunden und diesen Cache damit erfolgreich abgeschlossen!</p>
      <p class="">Dir wurden <b>{{ rankingPoints }} Punkte</b> gutgeschrieben.</p>
      <p class="text-h5">Deine Belohnung:</p>
      <p v-html="cache.reward.rewardDescription"></p>

      <div class="column q-gutter-y-md">
        <q-btn unelevated color="primary" label="Rangliste" to="/ranking"/>
        <q-btn unelevated color="primary" label="Zur Übersicht" to="/overview"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cacheID: "",
        cacheName: "",
        cache: {
          reward: "",
        },
        rankingPoints: "",
      }
    },
    computed: {
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.$axios.get('/api/allCaches')
          .then((response) => {
            console.log("/api/allCaches");
            console.log(JSON.stringify(response.data));
            console.log(response.data);
            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
            this.cache = cache;
            this.cacheName = cache.name;
            this.rankingPoints = cache.rankingPoints;
            this.cacheID = this.$route.params.cache;
          })
      },
    }
}
</script>
