<template>
  <div>
    <div class="" v-if="is_address_user == false">
      <div class="flex col-xs-12 col-md-12 no-padding">
        <!--adicionar Titulo/Apelido-->
        <div class="col-xs-4 col-md-4">
          <validation-provider 
            name="apelido" 
            rules="required|min: 3" 
            v-slot="{ errors, valid, passed }"
          >
            <base-input 
              label="Apelido" 
              placeholder="Digite o apelido" 
              name="apelido" 
              v-model="module.apelido"
              mask="alphanumericNoSpecial" 
              maxlength="35" 
              minlength="3"
              required 
              :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|cep" 
            name="postcode" 
            v-slot="{ errors, valid, passed }"
          >
            <base-input 
              type="text" 
              name="postcode" 
              label="CEP" 
              mask="cep"
              placeholder="Digite o CEP" 
              maxlength="10" 
              required 
              v-model="module.postcode"
              :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()" v-text="'Não sei meu cep'"></a>
          </validation-provider>
        </div>

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

      <div :class="!postcode_visible && readonly == false ? 'hidden' : ''">
        <div class="flex col-xs-12 col-md-12 no-padding">
          <!--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"
                maxlength="60" 
                required 
                mask="alphanumeric" 
                v-model="module.address_1" 
                :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"
                required 
                maxlength="50" 
                mask="alphanumeric" 
                v-model="module.address_2"
                :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="min: 3" 
              name="complemento" 
              v-slot="{ errors, valid, passed }"
            >
              <base-input 
                type="text" 
                name="complemento" 
                label="Complemento" 
                placeholder="Ex.: Ap. 105, bloco 2 etc."
                mask="alphanumeric" 
                maxlength="35"
                v-model="module.complemento" 
                :error="errors[0]" 
                :valid="valid && passed" 
                :disabled="disableForm"
              >
              </base-input>
            </validation-provider>
          </div>
        </div>

        <div class="flex col-xs-12 col-md-12 no-padding">
          <!--Estado-->
          <div class="col-xs-6 col-md">
            <validation-provider 
              rules="required" 
              name="zone_id" 
              v-slot="{ errors, valid, passed }"
            >
              <base-select 
                name="zone_id" 
                label="Estado" 
                required
                v-model="module.zone_id"
                :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-6 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 flex middle-xs padding-medium rounded-small background-warning js-postcode-message">
          <i class="fas fa-exclamation-triangle text-medium text-warning"></i>
          <span class="left-padding-small text-medium text-warning ">Não foi encontrado nenhum endereço compatível!</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" 
              mask="alphanumeric"
              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-medium">
            <div class="content-box text-center background-gray rounded-small vertical-padding-medium">
              <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" 
              class="top-margin-medium"
              :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" 
            class=""
            slot-default-overflow-auto
            @close="() => { showDontKnow = false; bPostCode = false; postcodeListAddress = [] }"
          >
            <div v-for="address, index in postcodeListAddress" :key="index" class="content-box visible-block bottom-border-gray padding-medium cursor-pointer">
              <div class="text-small text-dark-opacity flex no-space-xs nowrap-xs between-xs middle-xs" @click="() => selectAddress(address)">
                <div class="col-xs no-padding">
                  <span class="visible-block">{{ address.address_1 }}</span>
                  <span class="visible-block">{{ address.address_2 }}</span>
                  <span class="visible-block">{{ 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 
                  :name="name ? name + '[postcode]' : 'postcode'"
                  rules="required|cep" 
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input 
                    type="text" 
                    :name="name ? name + '[postcode]' : 'postcode'" 
                    label="CEP"
                    placeholder="Digite o CEP" 
                    maxlength="10" 
                    required 
                    mask="cep"
                    v-model="module.postcode"
                    :error="errors[0]" 
                    :valid="valid && passed" :disabled="disableForm"
                    :readonly="readonly"
                    @input.native="onPostcode(module.postcode)"
                  >
                  </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="min: 3|required"
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input 
                    label="Local" 
                    placeholder="Digite o Local" 
                    mask="alphanumericNoSpecial" 
                    maxlength="35" 
                    minlength="3"
                    required 
                    v-model="module.apelido" 
                    :name="name ? name + '[apelido]' : 'apelido'"
                    :error="errors[0]" 
                    :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 
                  :name="name ? name + '[numero]' : 'numero'"
                  rules="required|numeric" 
                  v-slot="{ errors, valid }"
                >
                  <base-input 
                    ref="numero" 
                    mask="number"
                    type="text" 
                    label="Número"
                    placeholder="Digite o número" 
                    maxlength="6"
                    required 
                    v-model="module.numero"
                    :name="name ? name + '[numero]' : 'numero'" 
                    :error="errors[0]"
                    :valid="valid" 
                    :disabled="disableForm" 
                    :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 
                    :name="name ? name + '[complemento]' : 'complemento'"
                    rules="min: 3" 
                    v-slot="{ errors, valid, passed }"
                  >
                  <base-input 
                    type="text" 
                    label="Complemento"
                    placeholder="Ex.: Ap. 105, bloco 2 etc." 
                    mask="alphanumeric"
                    maxlength="35" 
                    minlength="3"
                    v-model="module.complemento"
                    :name="name ? name + '[complemento]' : 'complemento'"
                    :error="errors[0]" 
                    :valid="valid && passed"
                    :disabled="disableForm" 
                    :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 
                  :name="name ? name + '[address_1]' : 'address_1'"
                  rules="required" 
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input 
                    type="text" 
                    label="Endereço"
                    placeholder="Rua exemplo" 
                    maxlength="60" 
                    required 
                    mask="alphanumeric"
                    v-model="module.address_1"
                    :name="name ? name + '[address_1]' : 'address_1'" 
                    :error="errors[0]" 
                    :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 
                  :name="name ? name + '[address_2]' : 'address_2'"
                  rules="required" 
                  v-slot="{ errors, valid, passed }"
                >
                  <base-input 
                    type="text" 
                    label="Bairro"
                    placeholder="Bairro exemplo" 
                    required 
                    maxlength="50" 
                    mask="alphanumeric"
                    v-model="module.address_2" 
                    :name="name ? name + '[address_2]' : 'address_2'" 
                    :error="errors[0]" 
                    :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 
                  :name="name ? name + '[zone_id]' : 'zone_id'"
                  rules="required" 
                  v-slot="{ errors, valid, passed }"
                >
                  <base-select 
                    required
                    label="Estado" 
                    v-model="module.zone_id"
                    :name="name ? name + '[zone_id]' : 'zone_id'" 
                    :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>
            </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 
                    label="Cidade"
                    placeholder="Selecione" 
                    required 
                    v-model="module.codigo_municipio"
                    :name="name ? name + '[codigo_municipio]' : '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>
        </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 flex middle-xs padding-medium rounded-small background-warning js-postcode-message">
          <i class="fas fa-exclamation-triangle text-medium text-warning"></i>
          <span class="left-padding-small text-medium text-warning ">Não foi encontrado nenhum endereço compatível!</span>
        </div>

        <div class="padding-medium">
          <validation-provider 
            tag="div" 
            name="postcodesearch"
            rules="" 
            v-slot="{ errors, valid, passed }"
          >
            <base-input 
              ref="postcodesearch" 
              type="text" 
              name="postcodesearch" 
              label="Busca"
              placeholder="Digite seu endereço. Ex: Rua minha rua" 
              maxlength="32"
              v-model="postcodesearch"
              :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-medium">
            <div class="content-box text-center background-gray rounded-small vertical-padding-medium">
              <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 class="" style="height: 540px;">
              <div v-for="address, index in postcodeListAddress" :key="index" class="content-box visible-block bottom-border-gray padding-medium cursor-pointer">
                <div class="text-small text-dark flex no-space-xs nowrap-xs between-xs middle-xs" @click="() => selectAddress(address)">
                  <div class="col-xs no-padding">
                    <span class="visible-block">{{ address.address_1 }}</span>
                    <span class="visible-block">{{ address.address_2 }}</span>
                    <span class="visible-block">{{ address.city }} </span>
                  </div>
                  <span>{{ address.postcode }}</span>
                </div>
              </div>
            </div>
          </base-modal>
        </template>
    </base-modal>
  </div>

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