<template>

  <q-page class="flex flex-center">
    <div id="map_canvas">
      <button id="button">Click me!</button>
    </div>
    <p>{{center}}</p>
    <gmap-map
      :zoom="7"
      :center="center"
      style="width: 500px; height: 300px"
      ref="map"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
    <q-btn @click="route()">
      route
    </q-btn>
  </q-page>
</template>

<style>
</style>

<script>
/* eslint-disable no-unused-vars */
export default {
  name: 'PageIndex',
  data: () => ({
    markers: [{
      position: {lat: 10.0, lng: 10.0}
    }, {
      position: {lat: 11.0, lng: 11.0}
    }],
    directionsDisplay: {},
    directionsService: {}
  }),
  created () {
    console.log(this.center)
  },
  methods: {
    route () {
      this.directionsService = new this.google.maps.DirectionsService()
      this.directionsDisplay = new this.google.maps.DirectionsRenderer()
      console.log(this.$refs.map.$mapObject)
      this.directionsDisplay.setMap(this.$refs.map.$mapObject)
      console.log(this.directionsDisplay.map)
      this.directionsService.route({
        origin: this.markers[0].position, // Can be coord or also a search query
        destination: this.markers[1].position,
        travelMode: 'DRIVING'
      }, (response, status) => {
        if (status === 'OK') {
          this.directionsDisplay.setDirections(response) // draws the polygon to the map
        } else {
          console.log('Directions request failed due to ' + status)
        }
      })
    }
  },
  asyncComputed: {
    center: {
      get () {
        return new Promise((resolve) => {
          navigator.geolocation.getCurrentPosition(position => {
            resolve({
              lat: position.coords.latitude,
              lng: position.coords.longitude
            })
          })
        })
      },
      default: {lat: 11.0, lng: 11.0}
    }
  }
}
</script>