<template>
  <b-row>
    <div class="col-2 col-md-1 py-1 ref-tag text-left">
        <span id="cp-approved-label" @click="show('cp')">Campanha:</span>
        <b-form-input
          id="cp-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Campanha"
          autocomplete="off"
          v-model.trim="cp_search_computed"></b-form-input>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        <span id="sector-approved-label" @click="show('sector')">Setor:</span>
        <b-form-input
          id="sector-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Setor"
          autocomplete="off"
          v-model.trim="sector_search_computed"></b-form-input>
    </div>
    <div class="col-2 py-1 ref-tag text-left">
        <span id="name-approved-label" @click="show('name')">Nome:</span>
        <b-form-input
          id="name-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Nome"
          autocomplete="off"
          v-model.trim="name_search_computed"></b-form-input>
    </div>
    <div class="col-2 col-lg-1 py-1 ref-tag text-left">
        <span id="cpf-approved-label" @click="show('cpf')">CPF:</span>
        <the-mask
          id="cpf-approved-input"
          v-show="false"
          class="form-control radius-theme"
          type="search"
          mask="###########"
          placeholder="CPF"
          autocomplete="off"
          v-model.trim="cpf_search_computed"></the-mask>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        <span id="uf-approved-label" @click="show('uf')">UF:</span>
        <b-form-input
          id="uf-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="UF"
          autocomplete="off"
          v-model.trim="uf_search_computed"></b-form-input>
    </div>
    <div class="col-2 col-lg-1 py-1 ref-tag text-left">
        <span id="city-approved-label" @click="show('city')">Cidade:</span>
        <b-form-input
          id="city-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Cidade"
          autocomplete="off"
          v-model.trim="city_search_computed"></b-form-input>
    </div>
    <div class="col-2 d-none d-lg-block py-1 ref-tag text-left">
        <span id="neighborhood-approved-label" @click="show('neighborhood')">Bairro:</span>
        <b-form-input
          id="neighborhood-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Bairro"
          autocomplete="off"
          v-model.trim="neighborhood_search_computed"></b-form-input>
    </div>
    <div class="col-2 col-md-1 d-none d-lg-block py-1 ref-tag text-left">
       <span id="address-approved-label" @click="show('address')">Endereço:</span>
        <b-form-input
          id="address-approved-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Endereço"
          autocomplete="off"
          v-model.trim="address_search_computed"></b-form-input>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        Pgto:
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        Visualizar:
    </div>
    
  </b-row>
</template>

<script>
export default {
  name: 'consultors-list-header',
  props:{
    cp_search:{
      type: String
    },
    sector_search:{
      type: String
    },
    cpf_search:{
      type: String
    },
    name_search:{
      type: String
    },
    uf_search:{
      type: String
    },
    city_search:{
      type: String
    },
    neighborhood_search:{
      type: String
    },
    address_search:{
      type: String
    }
  },
  computed:{
    cp_search_computed:{
      get(){
        return this.cp_search;
      },
      set(value){
        if(value.length == 0){
          $('#cp-approved-input').hide();
          $('#cp-approved-label').show();
        }
        this.$emit('update:cp_search', value);
      }
    },
    sector_search_computed:{
      get(){
        return this.sector_search;
      },
      set(value){
        if(value.length == 0){
          $('#sector-approved-input').hide();
          $('#sector-approved-label').show();
        }
        this.$emit('update:sector_search', value);
      }
    },
    cpf_search_computed:{
      get(){
        return this.cpf_search;
      },
      set(value){
        if(value.length == 0){
          $('#cpf-approved-input').hide();
          $('#cpf-approved-label').show();
        }
        this.$emit('update:cpf_search', value);
      }
    },
    name_search_computed:{
      get(){
        return this.name_search;
      },
      set(value){
        if(value.length == 0){
          $('#name-approved-input').hide();
          $('#name-approved-label').show();
        }
        this.$emit('update:name_search', value);
      }
    },
    uf_search_computed:{
      get(){
        return this.uf_search;
      },
      set(value){
        if(value.length == 0){
          $('#uf-approved-input').hide();
          $('#uf-approved-label').show();
        }
        this.$emit('update:uf_search', value);
      }
    },
    city_search_computed:{
      get(){
        return this.city_search;
      },
      set(value){
        if(value.length == 0){
          $('#city-approved-input').hide();
          $('#city-approved-label').show();
        }
        this.$emit('update:city_search', value);
      }
    },
    neighborhood_search_computed:{
      get(){
        return this.neighborhood_search;
      },
      set(value){
        if(value.length == 0){
          $('#neighborhood-approved-input').hide();
          $('#neighborhood-approved-label').show();
        }
        this.$emit('update:neighborhood_search', value);
      }
    },
    address_search_computed:{
      get(){
        return this.address_search;
      },
      set(value){
        if(value.length == 0){
          $('#address-approved-input').hide();
          $('#address-approved-label').show();
        }
        this.$emit('update:address_search', value);
      }
    }
  },
  methods:{
    show(id){
      this.$emit('update:cp_search', '');
      this.$emit('update:sector_search', '');
      this.$emit('update:cpf_search', '');
      this.$emit('update:name_search', '');
      this.$emit('update:city_search', '');
      this.$emit('update:uf_search', '');
      this.$emit('update:neighborhood_search', '');
      this.$emit('update:address_search', '');

      $("input[id*='input']").each(function (i, el) {
        $(this).hide();
      });
      $("span[id*='label']").each(function (i, el) {
        $(this).show();
      });

      $('#' + id + '-approved-label').hide();
      $('#' + id + '-approved-input').show().focus();
    }
  }
};
</script>

<style scoped lang="scss">
@import '../../../../assets/css/main.scss';


.ref-tag {
  font-size: 0.8em;
  color: #5A5A5A;
  letter-spacing: 0.35px;
}
</style>
