<template>
  <div>
    <b-row>
      <b-col>
        <b-form>
            <b-form-row class="custom-form-row">

              <b-form-group class="col-md-4 col-sm-12">
                <cpf v-model="cpf" :submit="submit"/>
              </b-form-group>

              <b-form-group class="col-md-3 col-sm-12">
                <phone-number v-model="mobilePhone" :submit="submit"/>
              </b-form-group>

              <b-form-group class="col-md-3 col-sm-12">
                <phone-number v-model="residencialPhone" :submit="submit"/>
              </b-form-group>

              <b-col cols="2">
                <label></label>
                <b-button
                  class="mr-2 btn shadow-none border-0 btn-default btn-theme"
                  @click="spcConsult"
                >
                  Consultar
                </b-button>
              </b-col>

            </b-form-row>
        </b-form>
      </b-col>
    </b-row>
      <consults-header :isDisable="!isAnalyst" />
    <b-row>
      <b-col v-if="consultasList.length > 0">
        <div v-for="item in consultasList" :key="item.id">
          <consults-info-card
            :campaign="item.campaign"
            :cpf="item.cpf"
            :dados="item.dados"
            :date="item.created_at"
            :isDisable="!isAnalyst"
            :credit_limit="item.sales_consultant != null ? item.sales_consultant.credit_limit : null"
            @openModal="openModal"
          />
        </div>
      </b-col>
    </b-row>

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

    <message-modal message="Sua consulta foi realizada com sucesso!" title="Consulta realizada" @close="closeMessageModal"></message-modal>
    <consultas-spc-modal v-if="showViewModal" :spc="spc" :viewOnly="true" @close="closeModal" />

  </div>
</template>

<script>
import ConsultasSPCService from "@/services/resources/ConsultasSPCService";
import FilesLoadService from "@/services/resources/FilesLoadService";
import ConsultsInfoCard from "@/components/consults/consults-list/consults/ConsultsInfoCard.vue";
import ConsultsHeader from "@/components/consults/consults-list/consults/ConsultsHeader.vue";
import Paginate from "@/components/shared-components/Paginate";
import Cpf from '@/components/shared-components/inputs/Cpf.vue';
import PhoneNumber from '@/components/shared-components/inputs/PhoneNumber.vue';
import MessageModal from '@/components/modals/MessageModal.vue';
import ConsultasSpcModal from "@/components/consults/consults-list/modals/ViewModal.vue";
import axios from 'axios';


const service = ConsultasSPCService.build();
const serviceFiles = FilesLoadService.build();

export default {
  name: "product-list",
  components: {
    ConsultsInfoCard,
    ConsultsHeader,
    Paginate,
    Cpf,
    PhoneNumber,
    MessageModal,
    ConsultasSpcModal
  },
  data() {
    return {
      consults: [],
      pagination:{
        totalPages: 1,
        currentPage: 1,
        perPage: 10
      },
      submit: false,
      cpf: '',
      mobilePhone: '',
      residencialPhone: '',
      spc: '',
      showViewModal: false
    };
  },
  watch:{
    showViewModal: function (newValue) {
      if(newValue){
        this.$nextTick(function() {
          this.$bvModal.show('consultas-spc-modal');
        });
      } 
    }
  },
  computed: {
    consultasList() {
      return this.consults;
    },
    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;
    }
  },
  methods: {
    closeModal(reload){
      this.showViewModal = false;
      if(reload)
        this.fetchConsults();
    },
    openModal(spc){
      this.showViewModal = true;
      this.spc = spc;
    },
    closeMessageModal(){
      this.fetchConsults();
    },
    toPage(page){
      this.pagination.currentPage = page;
      this.fetchConsults();
    },
    perPage(qtd){
      this.pagination.currentPage = 1;
      this.pagination.perPage = qtd;

      this.fetchConsults();
    },
    fetchConsults() {
      var vm = this;
      this.consults = [];

      let filters = {
        paginate: true,
        current_page: this.pagination.currentPage,
        per_page: this.pagination.perPage
      };
      this.pagination.totalPages = 1;

      service
        .search(filters)
        .then(response => {
          vm.consults = response.data;
          vm.pagination.totalPages = response.last_page;
        })
        .catch(err => {
          console.log(err);
        });
    },
    spcConsult(){

      let data = {
        cpf: this.cpf, 
        cellphone: this.mobilePhone,
        residencial: this.residencialPhone
      }
      service
        .create(data)
        .then(response => {
          this.cpf = '';
          this.mobilePhone = '';
          this.residencialPhone = '';
          this.$bvModal.show('message-modal');
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.fetchConsults();
  }
};
</script>

<style scoped lang="scss">
@import '../../../../assets/css/main.scss';



.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}


.btn-theme{
  background: $theme-color-blue;
}

</style>
