<template>
  <div class="form">
    <div id="sendmessage">Your details has been sent. Thank you!</div>
    <div id="errormessage"></div>
    <form method="post" role="form" class="contactForm">
      <div class="form-row">
        <div class="form-group col-md-12">
          <AutoComplete @GoogleAddress="UpdateAddress" />
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="street-nr"
            class="form-control"
            id="street-nr"
            placeholder="Street Number"
            data-rule="minlen:4"
            data-msg="Please enter your street number"
            v-model="address.streetNumber"
            disabled
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="street"
            id="street"
            placeholder="Street Name"
            data-msg="Please enter your street name"
            v-model="address.street"
            disabled
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="province"
            class="form-control"
            id="province"
            placeholder="Province"
            data-rule="minlen:4"
            data-msg="Please enter your province"
            v-model="address.province"
            disabled
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="city"
            id="city"
            placeholder="City"
            data-rule="minlen:4"
            data-msg="Please enter your city"
            v-model="address.city"
            disabled
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="suburb"
            class="form-control"
            id="suburb"
            placeholder="Suburb"
            data-rule="minlen:4"
            data-msg="Please enter your suburb"
            v-model="address.suburb"
            disabled
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="postal"
            id="postal"
            placeholder="Postal Code"
            data-msg="Please enter your postal code"
            v-model="address.postalCode"
            disabled
          />
          <div class="validation"></div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
/* eslint-disable */
import propField from "../property/propertyFieldEditor.vue";
import AutoComplete from "../shared/addressAutoComplete.vue";

export default {
  components: {
    propField,
    AutoComplete,
  },
  data() {
    return {
      propertyType: "Residential",
    };
  },
  props: {
    address: {},
  },
  methods: {
    UpdateAddress(place) {
      this.address.streetNumber = place.streetNumber;
      this.address.street = place.streeName;
      this.address.province = place.province;
      this.address.city = place.city;
      this.address.suburb = place.suburb;
      this.address.postalCode = place.postalCode;
    },
  },
};
</script>

<style lang="scss" scoped></style>
