Vue.component('activity-location',{
   name: 'ActivityLocation',
   components:{
    'search-locations': SearchLocations
},
   props: ['value'],
   data:()=>({
    domain: 'us'
   }),

    computed: {
        destinationValue: {
          get() {
            return this.value;
          },
          set(val) {
            this.$emit('input', val);
          },
        },
        checkIcon() {
            return 'fas fa-map-marker-alt';
          },
      },

    methods: {
        selectItem(result) {
            this.destinationValue = {
                    selectable: result.selectable,
                    id: result.id,
                    name: result.name,
                    urlName: result.urlName,
                    type: result.type,
                    currency: result.currency,
                    destinationName: result.destinationName,
                    ccName: result.ccName,
                    timeZone: result.timeZone,
                    latitude: result.latitude,
                    longitude: result.longitude,
                    iataCode: result.iataCode
            };
          }
  
      },

      template:
      `
      <div class="single-input">
      <search-locations
        :value="destinationValue"
        @input="selectItem"
        engine="activities"
        :searchParams="{ domain: this.domain, engine: 'uk'}"
        placeholder="E.g. London"
      >

      <template #options="props">
       <v-list-item-icon>
         <v-icon v-text="checkIcon" />
       </v-list-item-icon>
       <v-list-item-content>
         <v-list-item-title v-text="props.name" />
       </v-list-item-content>
     </template>
      </search-locations>
    </div>
    `

});