<template>
  <div>
    <b-row v-if="!isSalesConsultant">
      <p>&nbsp;</p>

      <b-col md="4">
        <sales-consultant-search @change="SalesConsultantSelected" v-model="salesConsultant" />
      <p>&nbsp;</p>
      </b-col>
    </b-row>
    <b-row>
      <finance-header />
    </b-row>

<b-row>

<p class="col-md-12 text-center" v-if="loading">
  <b-spinner type="grow" label="Loading..."></b-spinner>
</p>

</b-row>

    <b-row>
      <b-col v-if="invoiceList.length > 0">
        <div v-for="invoice in invoiceList" :key="invoice.id">
          <div style="cursor:pointer;" @click="showInvoice(invoice)">
            <finance-info-card
              :number="invoice.NUNDOC"
              :bank="invoice.NOMEBANCO"
              :installment="invoice.PARCELA"
              :created_at="invoice.EMISSAO"
              :due_date="invoice.VENCREA"
              :amount="invoice.VALORTOTAL"
              :campaign="invoice.YCAMP"
            />
          </div>
        </div>
      </b-col>
      <b-col md="12" v-else-if="!loading">
        <p>&nbsp;</p>
        <b-alert variant="warning" show>Não há titulos para mostrar.</b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import InvoiceService from "@/services/resources/InvoiceService";
import FinanceInfoCard from "@/components/finance/finance-list/FinanceInfoCard.vue";
import FinanceHeader from "@/components/finance/finance-list/FinanceHeader.vue";
import SalesConsultantSearch from "@/components/shared-components/searchs/SalesConsultant";
const service = InvoiceService.build();

export default {
  name: "invoice-list",
  components: {
    FinanceInfoCard,
    FinanceHeader,
    SalesConsultantSearch
  },
  data() {
    return {
      invoices: [],
      salesConsultant: null,
      pagination: {
        totalPages: 1,
        currentPage: 1,
        perPage: 10
      },
      loading: false
    };
  },
  computed: {
    invoiceList() {
      return this.invoices;
    },
    isSalesConsultant(){
      return this.$store.getters.isSalesConsultant;
    }
  },
  methods: {
    toPage(page) {
      this.pagination.currentPage = page;
      this.fetchProducts();
    },
    perPage(qtd) {
      this.pagination.currentPage = 1;
      this.pagination.perPage = qtd;

      this.fetchProducts();
    },
    fetchInvoices() {
      var vm = this;
      this.loading = true;
      this.invoices = [];
      let filters = {
        campaign_id: 20,
        paginate: true,
        current_page: this.pagination.currentPage,
        per_page: this.pagination.perPage
      };

if(!this.isSalesConsultant && this.salesConsultant !=null){

  filters.sales_consultant_code = this.salesConsultant.code;

}

      service
        .search(filters)
        .then(response => {
          if (response.data.Boleto) {
            if (Array.isArray(response.data.Boleto)) {
              vm.invoices = response.data.Boleto;
            } else {
              vm.invoices = [response.data.Boleto];
            }
          } else {
            vm.invoices = [];
          }
          vm.loading = false;
        })
        .catch(err => {
          vm.$fire({
            title: "Falha ao buscar Faturas"
          });
          vm.loading = false;
        });
    },
    showInvoice(invoice) {
      window.open(
        process.env.VUE_APP_API_HOST +
          "/api/invoice/0?data=" +
          JSON.stringify(invoice),
        "_blank"
      );
      window.focus();
    },

    SalesConsultantSelected(){
      if(this.salesConsultant != null){
        this.fetchInvoices();

      }
    }
  },
  mounted() {
    if(this.isSalesConsultant){
      this.fetchInvoices();

    }
  }
};
</script>

<style scoped>
</style>
