<template>
  <div class="q-ma-md">
    <p class="text-h4">QR-Generator</p>
    <p class="text-h5">Cache: {{ cacheName }}</p>
    <div class="row q-col-gutter-md">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 items-start" v-for="(station, index) in stationen" :key="index">
          <p class="text-h6 q-my-sm">Station {{ index + 1 }}</p>
        <q-card class="">
          <img class="full-width q-pa-md bg-white" :src="imgBaseURL + cacheId +'/'+ station.id" alt="">
        </q-card>
          <p class="q-my-sm">{{ cacheId }}/{{ station.id }}</p>
      </div>
    </div>
      <q-btn to="/overview" unelevated color="primary" stack
             label="Schließen" class="full-width"/>
  </div>
</template>

<script>
  export default {
    // name: 'PageName',
    data() {
      return {
        cacheName: "",
        cacheId: 0,
        stationen: [],
        imgBaseURL: "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="
      };
    },

    created() {
      this.fetchData();
    },

    methods: {
      fetchData() {
        this.$axios.get('/api/allCaches')
          .then((response) => {
            console.log("/api/allCaches");
            console.log(response.data);
            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
            this.cacheName = cache.name;
            this.cacheId = cache.id;
            this.stationen = cache.stationen;
          })
      },

    },

    beforeRouteUpdate(to, from, next) {
      this.fetchData();
      next()
    },

  }
</script>

<style>
</style>
