<template>
  <div>
    <solicitations-visit-header 
      :sector_search.sync="sector_search"
      :name_search.sync="name_search"
      :cpf_search.sync="cpf_search"
      :city_search.sync="city_search"
      :uf_search.sync="uf_search"
      :neighborhood_search.sync="neighborhood_search"/>

    <b-row v-if="salesConsultantsList.length > 0">
      <b-col >
        <div v-for="item in salesConsultantsList" :key="item.id">
          <solicitations-visit-info-card
            :cpf="item.cpf"
            :name="item.name"
            :state="item.shipping_address.city.state.uf"
            :city="item.shipping_address.city.name"
            :neighborhood="item.shipping_address.neighborhood"
            :address="item.shipping_address.street"
            :sector="item.sector.code"
            :created_at="item.created_at"
          />
         
        </div>
      </b-col>
    </b-row>

    <b-row v-show="loading" class="py-3 justify-content-center">
      <b-spinner type="grow" ></b-spinner>
    </b-row>

    <b-row class="justify-content-center" v-show="salesConsultantsList.length > 0">
      <paginate
      :totalPages="pagination.totalPages"
      :activePage="pagination.currentPage"
      @to-page="toPage"
      @per-page="perPage"
      />
    </b-row>

    <b-alert :show="salesConsultantsList.length == 0 && !loading" variant="primary">Sem consultoras para visita no momento.</b-alert>


  </div>
</template>

<script>
import SolicitationsVisitInfoCard from "@/components/solicitations/solicitations-list/visit/SolicitationsInfoCard.vue";
import SolicitationsVisitHeader from "@/components/solicitations/solicitations-list/visit/SolicitationsHeader.vue";
import Paginate from "@/components/shared-components/Paginate";
import SalesConsultantService from "@/services/resources/SalesConsultantsWebService";
const service = SalesConsultantService.build();

export default {
  name: "product-list",
  components: {
    SolicitationsVisitInfoCard,
    SolicitationsVisitHeader,
    Paginate
  },
  props:{
    active:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      sales_consultants: [],
      pagination:{
        totalPages: 1,
        currentPage: 1,
        perPage: 20
      },
      sector_search: '',
      cpf_search: '',
      name_search: '',
      uf_search: '',
      city_search: '',
      neighborhood_search: '',
      filters:{
        search: false
      }

    };
  },
  computed: {
    salesConsultantsList() {
      return this.sales_consultants;
    }
  },
   watch:{
    active(newValue){
      if(newValue){
        this.filters = {
          search: false
        };
      
        this.fetchSalesConsultants();
      }
    },
    cp_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          cp: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    sector_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          sector: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    cpf_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          cpf: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    name_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          name: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    uf_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          uf: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    city_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          city: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    },
    neighborhood_search(value){
      if(value.length > 0){
        this.filters = {
          search: true,
          neighborhood: value
        };
      }else{
        this.filters = {
          search: false
        };
      }
      this.fetchSalesConsultants();
    }
  },
  methods: {
    toPage(page){
      this.pagination.currentPage = page;
      this.fetchSalesConsultants();
    },
    perPage(qtd){
      this.pagination.currentPage = 1;
      this.pagination.perPage = qtd;
      this.fetchSalesConsultants();
    },
    fetchSalesConsultants() {
      var vm = this;
      this.sales_consultants = [];

      let defaultFilters = {
        status: 'WAITING_APPROVATION',
        paginate: true,
        current_page: this.pagination.currentPage,
        per_page: this.pagination.perPage
      };
      this.loading = true;

      this.pagination.totalPages = 1;
      var data = Object.assign(defaultFilters, this.filters);

      service
        .search(data)
        .then(response => {
          vm.sales_consultants = response.data;
          vm.pagination.totalPages = response.last_page;
          vm.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.fetchSalesConsultants();
  }
};
</script>

<style scoped>
</style>
