<template>
  <div>
      <solicitations-pending-header 
        :cp_search.sync="cp_search"
        :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-pending-info-card
            :id="item.id"
            :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"
            :credit_limit="item.credit_limit"
            :campaign_register="item.campaign_register"
            :sector="item.sector.code"
            :status="item.status"
            @open="openModal"
          />

        </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 pendentes no momento.</b-alert>

    <view-modal :sales_consultant_id="sales_consultant_id" v-if="showViewModal" @close="closeModal" :isDisable="!isAnalyst" />

  </div>
</template>

<script>
import SolicitationsPendingInfoCard from "@/components/solicitations/solicitations-list/pending/SolicitationsInfoCard.vue";
import SolicitationsPendingHeader from "@/components/solicitations/solicitations-list/pending/SolicitationsHeader.vue";
import ViewModal from '@/components/solicitations/solicitations-list/pending/modals/ViewModal.vue';
import Paginate from "@/components/shared-components/Paginate";
import SalesConsultantService from "@/services/resources/SalesConsultantsWebService";

const service = SalesConsultantService.build();

export default {
  name: "product-list",
  props:{
    active:{
      type: Boolean,
      default: false
    }
  },
  components: {
    SolicitationsPendingInfoCard,
    SolicitationsPendingHeader,
    ViewModal,
    Paginate
  },
  data() {
    return {
      loading: true,
      sales_consultants: [],
      sales_consultant_id: null,
      pagination:{
        totalPages: 1,
        currentPage: 1,
        perPage: 20
      },
      showViewModal: false,
      cp_search: '',
      sector_search: '',
      cpf_search: '',
      name_search: '',
      uf_search: '',
      city_search: '',
      neighborhood_search: '',
      filters:{
        search: false
      }
    };
  },
  computed: {
    salesConsultantsList() {
      return this.sales_consultants;
    },
    isAnalyst(){
      var roles = this.$store.state.user.user.roles;
      for(var i = 0; i < roles.length; i++) {
        if(roles[i].name == 'Analyst'){
          return true;
        }
      }

      return false;
    }
  },
   watch:{
    active(newValue){
      if(newValue){
        this.filters = {
          search: false
        };
        this.fetchSalesConsultants();
      }
    },
    showViewModal: function (newValue) {
      if(newValue){
        this.$nextTick(function() {
          this.$bvModal.show('sales-consultant-info');
        });
      } 
    },
    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: {
    closeModal(reload){
      this.showViewModal = false;
      if(reload){
        this.filters = {
          search: false
        };
      
        this.fetchSalesConsultants();
      }
    },
    openModal(id){
      this.showViewModal = true;
      this.sales_consultant_id = id;  
    },
    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: 'PENDING',
        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);
        });
    }
  }
};
</script>

<style scoped>
</style>
