<template>
  <div class="q-ma-md">
    <p class="text-h5">Neue Station</p>
    <q-editor
      :toolbar="[
        ['bold', 'italic', 'strike', 'underline'],
        ['undo', 'redo']
      ]"
      v-model="station.description" min-height="10rem" />
    <!--<q-input-->
      <!--v-model="description"-->
      <!--filled-->
      <!--type="textarea"-->
    <!--/>-->
    <p class="text-h6 q-mt-md">Location</p>
    <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="row q-col-gutter-md">
      <q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang" label="Längengrad/Breitengrad" />
      <div class="col-shrink">
        <q-btn unelevated color="primary" class="full-height" icon="my_location"/>
      </div>
    </div>
    <p class="text-h6 q-mt-md">Lösung</p>
    <q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung" />
    <q-input class="col q-mt-md" dense stack-label filled v-model="station.code" label="Code" readonly/>
    <div class="row reverse q-mt-md q-gutter-x-md">
      <q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
      <q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
    </div>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  export default {
    name: "Station",

    data() {
      return {
        description: "Rätsel, Aufgabe und Informationen zur Station.",
        latlang: "",
        station: {
          description: "description",
          lattitude: 0.06470,
          longitude: 0.05551,
          solution: "solution",
          code: 357547
        },
        isNewStation: true,
        // stationObject: null,
      }
    },
    // props: [ 'stationObject' ],
    created: function() {
      this.station = this.tempStation;
      console.log(this.station);
    },
    beforeMount: function() {
    },
    mounted: function() {
      this.isNewStation = this.$route.params.pos === undefined;
      console.log("neu: "+this.isNewStation);
      console.log("pos: "+this.$route.params.pos);
      this.concatLatlang();
    },
    computed: {
      ...mapGetters({
        tempStation: 'cacheCollector/GET_TEMPSTATION'
      }),
    },
    methods: {
      separateLatlang() {
        //console.log("separateLatlang()");
        if (this.latlang.includes(',')) {
          this.station.lattitude = this.latlang.substr(0, this.latlang.indexOf(',')).trim();
          this.station.longitude = this.latlang.substr(this.latlang.indexOf(',')+1, this.latlang.length).trim();
          console.log(this.latlang);
          console.log(this.station.lattitude + ", " + this.station.longitude);
        }
      },
      concatLatlang() {
        this.latlang = this.station.lattitude+", "+this.station.longitude;
      },
      saveStation() {
        //this.$parent.swapComponent(null);
        // this.$emit('q-tb');
        console.log("saveStation(): ");
        if (isNewStation) {
          this.$store.commit('cacheCollector/ADD_STATION', this.station);
        } else {
          this.$store.commit('cacheCollector/EDIT_STATION', this.$route.params.pos, this.station);
          this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
        }
        this.$router.push({ path: `/cache` });
        console.log("station saved..");
      },
      dismiss() {
        this.$emit('q-tb');
        this.$router.push({ path: `/cache` });
      }
    }
  }
</script>

<style scoped>

</style>
