<template>
  <b-row>
    <div class="col-2 col-md-1 py-1 ref-tag text-left" >
      <span id="cp-pending-label" @click="show('cp')">Campanha:</span>
        <b-form-input
          id="cp-pending-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-pending-label" @click="show('sector')">Setor:</span>
        <b-form-input
          id="sector-pending-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-pending-label" @click="show('name')">Nome:</span>
        <b-form-input
          id="name-pending-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-1 py-1 ref-tag text-left" >
        <span id="cpf-pending-label" @click="show('cpf')">CPF:</span>
        <the-mask
          id="cpf-pending-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-pending-label" @click="show('uf')">UF:</span>
        <b-form-input
          id="uf-pending-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 py-1 ref-tag text-left">
        <span id="city-pending-label" @click="show('city')">Cidade:</span>
        <b-form-input
          id="city-pending-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-1 d-none d-lg-block py-1 ref-tag text-left">
        <span id="neighborhood-pending-label" @click="show('neighborhood')">Bairro:</span>
        <b-form-input
          id="neighborhood-pending-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-1 py-1 ref-tag text-left">
        Pgto:
    </div>
    <div class="col-1 d-none d-md-block py-1 ref-tag text-left">
        Pendência(s):
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        Anexo:
    </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
    }
  },
  computed:{
    cp_search_computed:{
      get(){
        return this.cp_search;
      },
      set(value){
        if(value.length == 0){
          $('#cp-pending-input').hide();
          $('#cp-pending-label').show();
        }
        this.$emit('update:cp_search', value);
      }
    },
    sector_search_computed:{
      get(){
        return this.sector_search;
      },
      set(value){
        if(value.length == 0){
          $('#sector-pending-input').hide();
          $('#sector-pending-label').show();
        }
        this.$emit('update:sector_search', value);
      }
    },
    cpf_search_computed:{
      get(){
        return this.cpf_search;
      },
      set(value){
        if(value.length == 0){
          $('#cpf-pending-input').hide();
          $('#cpf-pending-label').show();
        }
        this.$emit('update:cpf_search', value);
      }
    },
    name_search_computed:{
      get(){
        return this.name_search;
      },
      set(value){
        if(value.length == 0){
          $('#name-pending-input').hide();
          $('#name-pending-label').show();
        }
        this.$emit('update:name_search', value);
      }
    },
    uf_search_computed:{
      get(){
        return this.uf_search;
      },
      set(value){
        if(value.length == 0){
          $('#uf-pending-input').hide();
          $('#uf-pending-label').show();
        }
        this.$emit('update:uf_search', value);
      }
    },
    city_search_computed:{
      get(){
        return this.city_search;
      },
      set(value){
        if(value.length == 0){
          $('#city-pending-input').hide();
          $('#city-pending-label').show();
        }
        this.$emit('update:city_search', value);
      }
    },
    neighborhood_search_computed:{
      get(){
        return this.neighborhood_search;
      },
      set(value){
        if(value.length == 0){
          $('#neighborhood-pending-input').hide();
          $('#neighborhood-pending-label').show();
        }
        this.$emit('update:neighborhood_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', '');

      $("input[id*='input']").each(function (i, el) {
        $(this).hide();
      });
      $("span[id*='label']").each(function (i, el) {
        $(this).show();
       
      });
      $('#' + id + '-pending-label').hide();
      $('#' + id + '-pending-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>
