<template>
  <div>
    <div class="margin-x-small" v-if="is_address_user == false">
      <div class="row col-xs-12 col-md-12 top-margin-x-small">

        <!--adicionar Titulo/Apelido-->
        <div class="col-xs-4 col-md-4">
          <validation-provider name="apelido" rules="required" v-slot="{ errors, valid, passed }">
            <base-input label="Apelido" placeholder="Digite o apelido" name="apelido" v-model="module.apelido"
              :required="true" mask="alphanumericNoSpecial" maxlength="35" :error="errors[0]" :valid="valid && passed"
              :disabled="disableForm">
            </base-input>
          </validation-provider>
        </div>

        <!--CEP-->
        <div class="col-xs-4 col-md-4">
          <validation-provider rules="required" name="postcode" v-slot="{ errors, valid, passed }">
            <base-input type="text" name="postcode" label="CEP" placeholder="Digite o CEP" v-model="module.postcode"
              maxlength="10" required mask="cep" :error="errors[0]" :valid="valid && passed" :disabled="disableForm"
              @input.native="onPostcode(module.postcode)">
            </base-input>
            <span class="vertical-middle">
              <img :class="{ hidden: !postcode_loading }" :src="is_catalog == false ? '../../assets/img/loading-black.svg' : 'assets/img/loading-black.svg' " width="14" height="14" />
            </span>
            <a class="text-primary text-small text-decoration-none cursor-pointer" @click="onShowDontKnow()">Não sei meu
              cep
            </a>
          </validation-provider>
        </div>

        <!--Numero-->
        <div class="col-xs-4 col-md-4">
          <validation-provider rules="required" name="numero" v-slot="{ errors, valid }">
            <base-input ref="numero" type="text" name="numero" label="Número" placeholder="Digite o número"
              v-model="module.numero" mask="number" :error="errors[0]" :valid="valid" :disabled="disableForm"
              maxlength="6" required>
            </base-input>
          </validation-provider>
        </div>
      </div>

      <div :class="!postcode_visible && readonly == false ? 'hidden' : ''">
        <div class="row col-xs-12 col-md-12 top-margin-xx-small">
          <!--Logradouro-->
          <div class="col-xs-4 col-md-4">
            <validation-provider rules="required" name="address_1" v-slot="{ errors, valid, passed }">
              <base-input type="text" name="address_1" label="Logradouro" placeholder="Rua exemplo"
                v-model="module.address_1" maxlength="60" required mask="alphanumeric" :error="errors[0]"
                :valid="valid && passed" :disabled="disableForm" :readonly="postcode_readonly.address_1">
              </base-input>
            </validation-provider>
          </div>

          <!--Bairro-->
          <div class="col-xs-4 col-md-4">
            <validation-provider rules="required" name="address_2" v-slot="{ errors, valid, passed }">
              <base-input type="text" name="address_2" label="Bairro" placeholder="Bairro exemplo"
                v-model="module.address_2" required maxlength="50" mask="alphanumeric" :error="errors[0]"
                :valid="valid && passed" :disabled="disableForm" :readonly="postcode_readonly.address_2">
              </base-input>
            </validation-provider>
          </div>

          <!--Complemento-->
          <div class="col-xs-4 col-md-4">
            <validation-provider rules="" name="complemento" v-slot="{ errors, valid, passed }">
              <base-input type="text" name="complemento" label="Complemento" placeholder="Ex.: Ap. 105, bloco 2 etc."
                mask="alphanumeric" :error="errors[0]" :valid="valid && passed" :disabled="disableForm"
                v-model="module.complemento" maxlength="35">
              </base-input>
            </validation-provider>
          </div>
        </div>

        <div class="row col-xs-12 col-md-12 top-margin-xx-small">
          <!--Estado-->
          <div class="col-xs-4 col-md">
            <validation-provider rules="required" name="zone_id" v-slot="{ errors, valid, passed }">
              <base-select name="zone_id" label="Estado" v-model="module.zone_id" required
                :readonly="postcode_readonly.zone_id" :error="errors[0]" :valid="valid && passed" :disabled="disableForm"
                @input="onChangeZone()">
                <option value="">Seleção</option>
                <option v-for="state in states" :key="state.zone_id" :value="state.zone_id"> {{ state.name }}
                </option>
              </base-select>
            </validation-provider>
          </div>

          <!--Cidade-->
          <div class="col-xs-4 col-md">
            <validation-provider rules="required" name="codigo_municipio" v-slot="{ errors, valid, passed }">
              <base-select name="codigo_municipio" label="Cidade" placeholder="Selecione" required
                v-model="module.codigo_municipio" :error="errors[0]" :valid="valid && passed" :key="city"
                :readonly="postcode_readonly.codigo_municipio" :disabled="disableForm">
                <option value="">Seleção</option>
                <option v-for="city in cities" :key="city.codigo_municipio" :value="city.codigo_municipio"> {{
                  city.municipio }}
                </option>
              </base-select>
            </validation-provider>
          </div>
        </div>
      </div>
      <!--Modal showDontKnow-->
      <base-modal v-if="showDontKnow" title="Não sei meu CEP" size="medium"
        @close="() => { showDontKnow = false; bPostCode = false; postcodeListAddress = [] }">
        <div v-if="error_postcode_search"
          class="full-width text-center top-padding-medium bottom-padding-x-large background-warning js-postcode-message ">
          <i class="fas fa-exclamation-triangle text-warning bigger-text-x-large bottom-margin-small"></i>
          <span class="text-medium text-warning visible-block">Não foi encontrado nenhum endereço compatível. Verifique as
            informações!</span>
        </div>

        <div class="padding-medium">
          <validation-provider tag="div" rules="" name="postcodesearch" v-slot="{ errors, valid, passed }">
            <base-input ref="postcodesearch" type="text" name="postcodesearch" label="Busca"
              placeholder="Digite seu endereço. Ex: Rua minha rua" v-model="postcodesearch" maxlength="32"
              :error="errors[0]" :valid="valid && passed" :disabled="disableForm"
              @keydown.native="(e) => e.code === 'Enter' ? e.preventDefault() : ''">
            </base-input>
          </validation-provider>
        </div>

        <template #footer>
          <div class="padding-small">
            <div
              class="content-box text-center top-padding-medium bottom-padding-x-large bottom-margin-small background-gray border-radius-small">
              <i class="fas fa-map-marker-alt text-error bigger-text-x-large bottom-margin-small"></i>
              <span class="text-medium text-dark visible-block">Encontre seu CEP usando<br> a busca acima.</span>
            </div>
            <base-button ref="postcodesearchButton" type="button" :disabled="disableForm" :loading="btnSubmitLoading"
              @click.native="postcodeSearch()">
              Buscar
            </base-button>
          </div>
        </template>

        <template #modal>
          <base-modal v-if="postcodeListAddress.length" title="Escolha seu CEP" size="medium" slot-default-overflow-auto
            @close="() => { showDontKnow = false; bPostCode = false; postcodeListAddress = [] }">
            <div v-for="address in postcodeListAddress"
              class="content-box visible-block bottom-border-gray padding-medium cursor-pointer">
              <div class="text-small text-dark row no-space-xs nowrap-xs between-xs middle-xs"
                @click="() => selectAddress(address)">
                <div class="col-xs">
                  <span>{{ address.address_1 }}</span>
                  <span class="visible-block">{{ address.address_2 }}</span>
                  <span>{{ address.city }} </span>
                </div>
                <span>{{ address.postcode }}</span>
              </div>
            </div>
          </base-modal>
        </template>
      </base-modal>
    </div>

    <div v-if="is_address_user == true">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="row">

            <!--CEP-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium" style="position: relative;">
              <div class="padding-leftColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[postcode]' : 'postcode'"
                  v-slot="{ errors, valid, passed }">
                  <base-input type="text" :name="name ? name + '[postcode]' : 'postcode'" label="CEP"
                    placeholder="Digite o CEP" v-model="module.postcode" maxlength="10" required mask="cep"
                    :error="data_errors['error_address_postcode'][index]" :valid="valid && passed" :disabled="disableForm"
                    @input.native="onPostcode(module.postcode)" :readonly="readonly">
                  </base-input>
                  <div class="dontKnowCep">
                    <span class="vertical-middle">
                      <img :class="{ hidden: !postcode_loading }" :src="is_catalog == false ? '../../assets/img/loading-black.svg' : 'assets/img/loading-black.svg' " width="14" height="14" />
                    </span>
                    <a class="text-primary text-small text-decoration-none cursor-pointer" @click="onShowDontKnow()">
                      Não sei meu cep
                    </a>
                  </div>
                </validation-provider>
              </div>
            </div>

            <!--Adicionar Titulo/Apelido-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-rightColumn responsive-padding">
                <validation-provider :name="name ? name + '[apelido]' : 'apelido'" rules="required"
                  v-slot="{ errors, valid, passed }">
                  <base-input label="Local" placeholder="Digite o Local" :name="name ? name + '[apelido]' : 'apelido'"
                    v-model="module.apelido" :required="true" mask="alphanumericNoSpecial" maxlength="35"
                    :error="data_errors['error_address_apelido'][index]" :valid="valid && passed" :disabled="disableForm"
                    :readonly="readonly">
                  </base-input>
                </validation-provider>
              </div>
            </div>

          </div>
        </div>
      </div>


      <div :class="!postcode_visible && readonly == false && show_fields == false ? 'hidden' : 'col-xs-12'">
        <div class="content-box">
          <div class="row">
            <!--Numero-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-leftColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[numero]' : 'numero'"
                  v-slot="{ errors, valid }">
                  <base-input ref="numero" type="text" :name="name ? name + '[numero]' : 'numero'" label="Número"
                    placeholder="Digite o número" v-model="module.numero" mask="number"
                    :error="data_errors['error_address_numero'][index]" :valid="valid" :disabled="disableForm" maxlength="6"
                    required :readonly="readonly">
                  </base-input>
                </validation-provider>
              </div>
            </div>
            <!--Complemento-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-rightColumn responsive-padding">
                <validation-provider rules="" :name="name ? name + '[complemento]' : 'complemento'"
                  v-slot="{ errors, valid, passed }">
                  <base-input type="text" :name="name ? name + '[complemento]' : 'complemento'" label="Complemento"
                    placeholder="Ex.: Ap. 105, bloco 2 etc." mask="alphanumeric"
                    :error="data_errors['error_address_complemento'][index]" :valid="valid && passed"
                    :disabled="disableForm" v-model="module.complemento" maxlength="35" :readonly="readonly">
                  </base-input>
                </validation-provider>
              </div>
            </div>
            <!--Logradouro-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-leftColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[address_1]' : 'address_1'"
                  v-slot="{ errors, valid, passed }">
                  <base-input type="text" :name="name ? name + '[address_1]' : 'address_1'" label="Endereço"
                    placeholder="Rua exemplo" v-model="module.address_1" maxlength="60" required mask="alphanumeric"
                    :error="data_errors['error_address_address_1'][index]" :valid="valid && passed" :disabled="disableForm"
                    :readonly="postcode_readonly.address_1">
                  </base-input>
                </validation-provider>
              </div>
            </div>
            <!--Bairro-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-rightColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[address_2]' : 'address_2'"
                  v-slot="{ errors, valid, passed }">
                  <base-input type="text" :name="name ? name + '[address_2]' : 'address_2'" label="Bairro"
                    placeholder="Bairro exemplo" v-model="module.address_2" required maxlength="50" mask="alphanumeric"
                    :error="data_errors['error_address_address_2'][index]" :valid="valid && passed" :disabled="disableForm"
                    :readonly="postcode_readonly.address_2">
                  </base-input>
                </validation-provider>
              </div>
            </div>
            <!--Estado-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-leftColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[zone_id]' : 'zone_id'"
                  v-slot="{ errors, valid, passed }">
                  <base-select :name="name ? name + '[zone_id]' : 'zone_id'" label="Estado" v-model="module.zone_id"
                    required :readonly="postcode_readonly.zone_id" :error="data_errors['error_address_zone'][index]"
                    :valid="valid && passed" :disabled="disableForm" @input="onChangeZone()">
                    <option value="">Seleção</option>
                    <option v-for="state in states" :key="state.zone_id" :value="state.zone_id"> {{ state.name }}
                    </option>
                  </base-select>
                </validation-provider>
              </div>
            </div>
            <!--Cidade-->
            <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
              <div class="padding-rightColumn responsive-padding">
                <validation-provider rules="required" :name="name ? name + '[codigo_municipio]' : 'codigo_municipio'"
                  v-slot="{ errors, valid, passed }">
                  <base-select :name="name ? name + '[codigo_municipio]' : 'codigo_municipio'" label="Cidade"
                    placeholder="Selecione" required v-model="module.codigo_municipio"
                    :error="data_errors['error_address_city'][index]" :valid="valid && passed" :key="city"
                    :readonly="postcode_readonly.codigo_municipio" :disabled="disableForm">
                    <option value="">Seleção</option>
                    <option v-for="city in cities" :key="city.codigo_municipio" :value="city.codigo_municipio"> {{
                      city.municipio }}
                    </option>
                  </base-select>
                </validation-provider>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!--Modal showDontKnow-->
      <base-modal v-if="showDontKnow" title="Não sei meu CEP" size="medium"
        @close="() => { showDontKnow = false; bPostCode = false; postcodeListAddress = [] }">
        <div v-if="error_postcode_search"
          class="full-width text-center top-padding-medium bottom-padding-x-large background-warning js-postcode-message ">
          <i class="fas fa-exclamation-triangle text-warning bigger-text-x-large bottom-margin-small"></i>
          <span class="text-medium text-warning visible-block">Não foi encontrado nenhum endereço compatível.
            Verifique as
            informações!</span>
        </div>

        <div class="padding-medium">
          <validation-provider tag="div" rules="" name="postcodesearch" v-slot="{ errors, valid, passed }">
            <base-input ref="postcodesearch" type="text" name="postcodesearch" label="Busca"
              placeholder="Digite seu endereço. Ex: Rua minha rua" v-model="postcodesearch" maxlength="32"
              :error="errors[0]" :valid="valid && passed" :disabled="disableForm"
              @keydown.native="(e) => e.code === 'Enter' ? e.preventDefault() : ''">
            </base-input>
          </validation-provider>
        </div>

        <template #footer>
          <div class="padding-small">
            <div
              class="content-box text-center top-padding-medium bottom-padding-x-large bottom-margin-small background-gray border-radius-small">
              <i class="fas fa-map-marker-alt text-error bigger-text-x-large bottom-margin-small"></i>
              <span class="text-medium text-dark visible-block">Encontre seu CEP usando<br> a busca acima.</span>
            </div>
            <base-button class="top-margin-medium" ref="postcodesearchButton" type="button" :disabled="disableForm"
              :loading="btnSubmitLoading" @click.native="postcodeSearch()">
              Buscar
            </base-button>
          </div>
        </template>

        <template #modal>
          <base-modal v-if="postcodeListAddress.length" title="Escolha seu CEP" size="medium" slot-default-overflow-auto
            @close="() => { showDontKnow = false; bPostCode = false; postcodeListAddress = [] }">
            <div v-for="address in postcodeListAddress"
              class="content-box visible-block bottom-border-gray padding-medium cursor-pointer">
              <div class="text-small text-dark row no-space-xs nowrap-xs between-xs middle-xs"
                @click="() => selectAddress(address)">
                <div class="col-xs">
                  <span>{{ address.address_1 }}</span>
                  <span class="visible-block">{{ address.address_2 }}</span>
                  <span>{{ address.city }} </span>
                </div>
                <span>{{ address.postcode }}</span>
              </div>
            </div>
          </base-modal>
        </template>
    </base-modal>
  </div>

</div></template>
<style src="../../identity.css"></style>
<script src="./scripts.js"></script>