<template>
  <div class="margin-x-small">
    <div class="row col-xs-12 col-md-12 top-margin-xx-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="alphanumeric"
            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="../../../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="{hidden: !postcode_visible}">
      <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 class="col-xs-width-auto">
              <span>{{ address.postcode }}</span>
            </div>
          </div>
        </base-modal>
      </template>
    </base-modal>
  </div>
</template>
<style src="../../identity.css"></style>
<script src="./scripts.js"></script>