<template>
  <div class="section">
    <h1>Restos</h1>

    une carte présentant des restaurants sur Leaflet. Demande sur overpass api

    <p>
      <a :href="requestData">
        {{ requestData }}
      </a>
    </p>
    <div v-if="RestosPoints.elements" style="height: 75vh; width: 50vw">
      <!--      <l-map v-model="zoom" :zoom="zoom" :center="[BBOX.X, BBOX.Y]">-->
      <!--        <l-tile-layer-->
      <!--          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"-->
      <!--        ></l-tile-layer>-->

      <!--      </l-map>-->
    </div>
    <ul v-if="RestosPoints.elements">
      <span v-for="elem in RestosPoints.elements" class="button is-info marged">
        <div v-if="elem.tags">
          {{ elem.tags.name }} -
          <!--          <div v-if="elem.tags.cuisine">cuisine: {{ elem.tags.cuisine }}</div>-->
        </div>
        <!--        {{ elem.lat }}-->
        <!--        {{ elem.lon }}-->
      </span>
      <div>
        <h2>{{ RestosPoints.elements.length }} Restaurants dans le secteur</h2>
      </div>
      <li v-for="elem in RestosPoints.elements">
        <div v-if="elem.tags">
          nom: {{ elem.tags.name }}
          <br />
          ville: {{ elem.tags['addr:city'] }}
          <div v-if="elem.tags.cuisine">cuisine: {{ elem.tags.cuisine }}</div>
        </div>

        <br />lat:
        {{ elem.lat }}
        <br />lon: {{ elem.lon }}
      </li>
    </ul>
  </div>
</template>
<script>
import { LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet'
import 'leaflet/dist/leaflet.css'
import RestosPoints from '../mocks/restos_overpass.json'

const BBOX = {
  X: 48.6605988,
  Y: 2.2420476,
}
const baseApi = 'https://overpass-api.de/api/'
const requestData = `https://overpass-api.de/api/interpreter?data=%2F*%0AThis+has+been+generated+by+the+overpass-turbo+wizard.%0AThe+original+search+was%3A%0A%E2%80%9Crestaurant%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F+gather+results%0A(%0A++%2F%2F+query+part+for%3A+%E2%80%9Crestaurant%E2%80%9D%0A++node%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A++way%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A++relation%5B%22amenity%22%3D%22restaurant%22%5D(48.62088169353486%2C2.13134765625%2C48.6817808659474%2C2.312450408935547)%3B%0A)%3B%0A%2F%2F+print+results%0Aout+body%3B%0A%3E%3B%0Aout+skel+qt%3B`
const url = baseApi + requestData

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      RestosPoints,
      BBOX,
      iconWidth: 25,
      iconHeight: 40,
      zoom: 14,
      baseApi,
      requestData,
      requestUrl: url,
    }
  },
  callOverpass() {},
}
</script>

<style>
.marged {
  margin: 0.5em;
}
.button {
  padding: 1em;
}
</style>
