<template>
<section>
      <b-field
        label="Collection Address (Optional: Location of art if to be transported)"
        :type="{ 'is-danger': errors.has('addressdeliver') }"
        :message="errors.first('addressdeliver')"
      >
        <input
          ref="addressdeliver"
          v-model="addressdeliver"
          v-validate="{ required: true, regex: /^\s*\S+(?:\s+\S+){2}/ }"
          class="input search-location"
          onfocus="value = ''"
          name="addressdeliver"
          :disabled="
            servreq == 'Install Only' || servreq == 'General Consultation'
          "
        />
      </b-field>
</section>
</template>

<script>
mounted() {
    // eslint-disable-next-line no-undef
    const defaultBounds = new google.maps.LatLngBounds(
      // eslint-disable-next-line no-undef
      new google.maps.LatLng(-33.8474, 151.2631)
    )

    // eslint-disable-next-line no-undef
    this.adautocomplete = new google.maps.places.Autocomplete(
      this.$refs.addressdeliver,
      {
        bounds: defaultBounds,
        types: ['geocode'],
        componentRestrictions: { country: 'au' }
      }
    )
    this.adautocomplete.addListener('place_changed', () => {
      const placead = this.adautocomplete.getPlace()
      const acad = placead.formatted_address

      this.addressdeliver = acad
    })
  }
</script>