<template>
    <div>
    <h2>Enter Address</h2>
    <div  v-for="(address, akey) in registration.address" :key="address.key">
      <div id="input-group-1">
        <Address
          id="address"
          name="address"
          :tabindex="0"
          placeholder="Address"
          :index="akey"
          :is-multiple="true"
          :is-show-plus="registration.address.length - 1 === akey"
          :on-multiple-address-add="onMultipleAddressAdd"
          :address-value="registration.address"
          :hide="false"
          :disabled="false"
          :selected-countries="['in']"
          @change="onChange"
          :isShowStreetField="true"
        />
         <span v-if="address.isDuplicate">
            <p
              :class="{
                control: true,
                'text-center': true,
                'error-msg': true,
              }"
            >
              <span>
                <span>Do not enter the same address</span>
              </span>
            </p>
          </span>
      </div>
    </div>
</template>

<script>
    import Address from 'vue-weblineindia-address'
    export default {
        components: { Address },
        data(){
           return{
            registration: {
            address: [
                {
                address: "",
                geolocation: { x: 0, y: 0 },
                country: "",
                locality: "",
                postalcode: "",
                state: "",
                province: "",
                fulladdress: "",
                streetaddress: "",
                isDuplicate: false,
              }
            ]
            }
           }
        },
        methods: {
            /**
            * This method used for multiple address 
            */
            onMultipleAddressAdd(){
                let value =  this.registration.address
                this.registration.address.push({value})
            },
        }
    }
</script>