<template>
     <b-row>
          <b-form-group class="col-md-6">
            <postal-code title="CEP*" @keyup.native="buscaCEP" v-model="getCurrentValue.postal_code" />

<div class="text-left" v-show="submit && !getCurrentValue.postalCodeIsValid()">
              <small class="pt-2 text-danger">CEP inválido</small>
            </div>

          </b-form-group>

          <b-form-group class="col-md-6 group-type-address" label="Tipo de endereço">
            <b-form-radio-group
              id="radio-group-2"
              name="radio-sub-component"
              v-model=" getCurrentValue.type"
            >
              <b-form-radio
                class="radius-theme btn"
                :class="{'btn-primary':  getCurrentValue.type === 'RESIDENTIAL',
              'btn-outline-danger':  getCurrentValue.type !== 'RESIDENTIAL' }"
                value="RESIDENTIAL"
              >Residêncial</b-form-radio>
              <b-form-radio
                class="radius-theme btn"
                :class="{'btn-primary':  getCurrentValue.type === 'BUSSINESS',
              'btn-outline-danger':  getCurrentValue.type !== 'BUSSINESS'
               }"
                value="BUSSINESS"
              >Comercial</b-form-radio>
            </b-form-radio-group>
          </b-form-group>

          <b-form-group class="col-md-12 col-sm-12">
            <text-input title="Endereço*" place-holder="Rua 1" v-model=" getCurrentValue.street" />
            <div class="text-left" v-show="submit && !getCurrentValue.streetIsValid()">
              <small class="pt-2 text-danger">Digite aqui o logradouro</small>
            </div>
          </b-form-group>

          <b-form-group class="col-md-6">
            <number-input title="Número*" placeHolder="01" v-model=" getCurrentValue.number" />
            <div class="text-left" v-show="submit && !getCurrentValue.numberIsValid()">
              <small class="pt-2 text-danger">O Número é obrigatório</small>
            </div>
          </b-form-group>

          <b-form-group class="col-md-6">
            <text-input title="Complemento*" place-holder="QD e lote" v-model=" getCurrentValue.complement" />
          <div class="text-left" v-show="submit && !getCurrentValue.complementIsValid()">
              <small class="pt-2 text-danger">Adicione QD, LT e/ou Condomínio/Apto</small>
            </div>
          </b-form-group>

          <b-form-group class="col-md-12 col-sm-12">
            <text-input title="Bairro*" place-holder="Centro" v-model=" getCurrentValue.neighborhood" />
          <div class="text-left" v-show="submit && !getCurrentValue.neighborhoodIsValid()">
              <small class="pt-2 text-danger">o bairro é obrigatório</small>
            </div>
          </b-form-group>
          <b-form-group class="col-md-6">
            <text-input title="Cidade*" :disabled="true" place-holder="Goiânia" v-model=" getCurrentValue.city" />
          <div class="text-left" v-show="submit && !getCurrentValue.codeIbgeIsValid()">
              <small class="pt-2 text-danger">Por favor, verifique o CEP para alterar a cidade</small>
            </div>
          </b-form-group>

          <b-form-group class="col-md-6">
            <text-input title="UF*" place-holder="GO" :disabled="true" v-model=" getCurrentValue.uf" />
          <div class="text-left" v-show="submit && !getCurrentValue.ufIsValid()">
              <small class="pt-2 text-danger">or favor, verifique o CEP para alterar a UF</small>
            </div>
          </b-form-group>
        </b-row>
</template>

<script>
import NumberInput from "@/components/shared-components/inputs/NumberInput.vue";
import PostalCode from "@/components/shared-components/inputs/PostalCode.vue";
import TextInput from "@/components/shared-components/inputs/TextInput.vue";
import AddressModel from "@/models/AddressModel.js";

import axios from 'axios'

export default {
    props:{
        address:{
            required: true,
            type: AddressModel
        },
        submit:{
          type: Boolean,
          default: false
        }
    },
    components:{
TextInput,
NumberInput,
PostalCode
    },
    model:{
        prop: 'address',
        event: 'change'
    },
    computed:{
         getCurrentValue: {
      get() {
        return this.address;
      },
      set(value) {
        this.$emit('change', value);
      },
    }
    },

    methods:{
          buscaCEP() {
   
      if (this.getCurrentValue.postal_code.length >= 8) {
        let vm = this;

        axios
          .get(
            "https://viacep.com.br/ws/" +
              this.getCurrentValue.postal_code +
              "/json"
          )
          .then(response => {
            console.log(response);
            if (
              typeof response.data.erro != "undefined" &&
              response.data.erro
            ) {
              //  vm.marketDefinitions.push("NÃO ENCONTRADO");
            } else {
              console.log("ok");
              vm.getCurrentValue.code_ibge = response.data.ibge;
                vm.getCurrentValue.street = response.data.logradouro;
                vm.getCurrentValue.city = response.data.localidade;

                vm.getCurrentValue.neighborhood = response.data.bairro;

                vm.getCurrentValue.uf = response.data.uf;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    }
}
</script>