<template>
  <div>
    <h2 class="has-text-danger">Your Address</h2>

    <vue-google-autocomplete
      ref="address"
      id="map"
      class="form-control"
      placeholder="Please type your address"
      v-on:placechanged="getAddressData"
      country="fr"
    p></vue-google-autocomplete>
    <h2>Date</h2>

    <timeselector v-model="timeMonday"></timeselector>
    <VueCtkDateTimePicker v-model="yourValue"></VueCtkDateTimePicker>

    <h1 class="title">DEBUG :</h1>
    <ul>
      <li>address field value : {{address}}</li>
      <li>dateTime value : {{yourValue}}</li>
    </ul>
  <dispoTime/>
  </div>
</template>

<script>
import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
import VueGoogleAutocomplete from "vue-google-autocomplete";
import Timeselector from 'vue-timeselector';
import dispoTime from './components/dispoTime'

export default {
  components: { VueGoogleAutocomplete,dispoTime, VueCtkDateTimePicker,Timeselector},

  data: function() {
    return {
      address: "",
      yourValue: null,
      timeMonday:null
    };
  },

  mounted() {
    // To demonstrate functionality of exposed component functions
    // Here we make focus on the user input
    this.$refs.address.focus();
  },
  computed: {},
  methods: {
    /**
     * When the location found
     * @param {Object} addressData Data of the found location
     * @param {Object} placeResultData PlaceResult object
     * @param {String} id Input container ID
     */
    getAddressData: function(addressData, placeResultData, id) {
      this.address = addressData;
    }
  }
};
</script>

<style lang="scss">
@charset "utf-8";

// Import Bulma core
@import "bulma";
@import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker";
</style>