<template>
  <b-row> 
    <div class="col-2 col-md-1 py-1 ref-tag text-left">
        <span id="sector-visit-label" @click="show('sector')">Setor:</span>
        <b-form-input
          id="sector-visit-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Setor"
          v-model.trim="sector_search_computed"></b-form-input>
    </div>
    <div class="col-2 py-1 ref-tag text-left">
        <span id="name-visit-label" @click="show('name')">Nome:</span>
        <b-form-input
          id="name-visit-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Nome"
          v-model.trim="name_search_computed"></b-form-input>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        <span id="cpf-visit-label" @click="show('cpf')">CPF:</span>
        <the-mask
          id="cpf-visit-input"
          v-show="false"
          class="form-control radius-theme"
          type="search"
          mask="###########"
          placeholder="CPF"
          v-model.trim="cpf_search_computed"></the-mask>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        <span id="uf-visit-label" @click="show('uf')">UF:</span>
        <b-form-input
          id="uf-visit-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="UF"
          v-model.trim="uf_search_computed"></b-form-input>
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        <span id="city-visit-label" @click="show('city')">Cidade:</span>
        <b-form-input
          id="city-visit-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Cidade"
          v-model.trim="city_search_computed"></b-form-input>
    </div>
    <div class="col-2 d-none d-md-block py-1 ref-tag text-left">
        <span id="neighborhood-visit-label" @click="show('neighborhood')">Bairro:</span>
        <b-form-input
          id="neighborhood-visit-input"
          v-show="false"
          class="radius-theme"
          type="search"
          placeholder="Bairro"
          v-model.trim="neighborhood_search_computed"></b-form-input>
    </div>
     <div class="col-2 py-1 ref-tag text-left">
        Criado:
    </div>
    <div class="col-1 py-1 ref-tag text-left">
        Dias aguardando:
    </div>
  </b-row>
</template>

<script>
export default {
  name: 'consultors-list-header',
  props:{
    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:{
    sector_search_computed:{
      get(){
        return this.sector_search;
      },
      set(value){
        if(value.length == 0){
          $('#sector-visit-input').hide();
          $('#sector-visit-label').show();
        }
        this.$emit('update:sector_search', value);
      }
    },
    cpf_search_computed:{
      get(){
        return this.cpf_search;
      },
      set(value){
        if(value.length == 0){
          $('#cpf-visit-input').hide();
          $('#cpf-visit-label').show();
        }
        this.$emit('update:cpf_search', value);
      }
    },
    name_search_computed:{
      get(){
        return this.name_search;
      },
      set(value){
        if(value.length == 0){
          $('#name-visit-input').hide();
          $('#name-visit-label').show();
        }
        this.$emit('update:name_search', value);
      }
    },
    uf_search_computed:{
      get(){
        return this.uf_search;
      },
      set(value){
        if(value.length == 0){
          $('#uf-visit-input').hide();
          $('#uf-visit-label').show();
        }
        this.$emit('update:uf_search', value);
      }
    },
    city_search_computed:{
      get(){
        return this.city_search;
      },
      set(value){
        if(value.length == 0){
          $('#city-visit-input').hide();
          $('#city-visit-label').show();
        }
        this.$emit('update:city_search', value);
      }
    },
    neighborhood_search_computed:{
      get(){
        return this.neighborhood_search;
      },
      set(value){
        if(value.length == 0){
          $('#neighborhood-visit-input').hide();
          $('#neighborhood-visit-label').show();
        }
        this.$emit('update:neighborhood_search', value);
      }
    }
  },
  methods:{
    show(id){
      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 + '-visit-label').hide();
      $('#' + id + '-visit-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>
