<template>
  <div>
    <q-img transition="fade"
           class="q-mb-md "
           :ratio="16/9"
           src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
    ></q-img>
    <div class="q-ma-md">
      <p class="text-h4">{{ data.cacheName }}</p>
      <p class="text-h5">Station {{ showCacheProgress }}</p>
<!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
      <p>{{ data.station.description }}</p>
      <!--<q-input-->
      <!--v-model="description"-->
      <!--filled-->
      <!--type="textarea"-->
      <!--/>-->
      <!--<p class="text-h5 q-mt-md">Location</p>-->
      <div class="column q-gutter-y-md">
        <q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/>
        <q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/>
        <q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
        <q-btn unelevated color="primary" label="Code scannen (absenden)"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Station",

    data() {
      return {
        code: "",
        cache: null,
        data: {
          cacheId: 22,
          cacheName: "Wasserfall Cache",
          station: {
            id: 22,
            description: "Ein kleines winterliches Schlaginstrument. Welche Blume ist damit gemeint?",
            longitude: 9.206628,
            lattitude: 49.147734,
            code: 213812,
            solution: "Schneeglöckchen"
          }
        }
      }
    },
    created: function () {
      console.log("StationView: ")
      console.log("'id' from url: " + this.$route.params.id)
      console.log("'cache' from url: " + this.$route.params.cache)
      this.fetchData();
    },
    beforeMount: function () {
    },
    mounted: function () {
    },
    computed: {
      showCacheProgress() {
        let stationCount = this.cache.stationen.length;
        let stationPos = 1 + this.cache.stationen.findIndex(station => station.id === Number(this.$route.params.id));
        return `${stationPos} von ${stationCount}`;
      }
    },
    methods: {
      fetchData() {
        this.$axios.get('/api/allCaches')
          .then((response) => {
            console.log("/api/allCaches");
            console.log(JSON.stringify(this.data));
            console.log(this.data);
            console.log(response.data);
            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
            this.data.cacheId = cache.id;
            this.data.cacheName = cache.name;
            this.cache = cache;
            console.log(JSON.stringify(this.data));
            this.$axios.get('/api/getAllStations')
              .then((response) => {
                console.log("/api/getAllStations");
                console.log(response.data);
                const stationView = response.data.find(station => station.id === Number(this.$route.params.id));
                console.log(JSON.stringify(stationView));
                this.data.station = stationView;
              });
          });
      }
    }
  }
</script>

<style scoped>

</style>
