<template>
  <modal
    name="alert-limit-exceeded"
    :scrollable="true"
    height="auto"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="exclamation-triangle" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Alerta de Sistema </div>
          <div class="akkurat-bold max-header-text title">Limite de Crédito Excedido</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>
    <div class="custom-body">

<div class="alert-msg">

<b-row >

<b-col md='12'>

<p class="text-center akkurat-bold">
      Seu limite de crédito foi excedido! 
</p>
<p class="text-center akkurat-bold">
Seu limite foi excedido. Exclua alguns itens, altere a forma de pagamento para cartão de crédito ou solicite aumento de limite.
</p>

</b-col>

</b-row>
</div>
    <b-row class="buttons">

<b-col md="3" class="text-center">

<b-button :disabled="loading" class="btn btn-go-to-back  radius-theme btn-primary" @click="closeModal">
           Voltar
            </b-button>
</b-col>

<b-col md="4" class="text-right">

<b-button :disabled="loading" class="btn  radius-theme btn-primary" @click='setPaymentMethod'>
              Pagar com Cartão de Crédito
            </b-button>

</b-col>


<b-col md="5" class="text-left">

<b-button style="margin-left:0px !important;" :disabled="loading" class="btn  btn-request-change-credit-limit radius-theme btn-primary" @click="requestIncreaseCreditLimit">
            <b-spinner v-if="loading" small type="grow"></b-spinner> Solicitar aumento de Limite
            </b-button>
</b-col>



    </b-row>

    <success-request-after-limit-exceeded-modal @closed="closeModal"/>
    </div>

  </modal>
</template>

<script>
import RequestIncreaseCreditLimitService from "@/services/resources/RequestIncreaseCreditLimitService";
import SuccessRequestAfterLimitExceededModal from '@/components/modals/Order/SuccessRequestAfterLimitExceeded'
 var service = RequestIncreaseCreditLimitService.build();
export default {
    name: 'alert-limit-exceeded',
    components:{
SuccessRequestAfterLimitExceededModal
    },
    data: () => {
        return {
            quantity: 1,
            currentOfferIndex: 0,
            offers: [],
            loading: false
        }
    },
    computed:{
      orderCampaign(){
        return this.$store.state.orderCreate.calendar;
      },
      orderSalesConsultantId(){
        return this.$store.state.orderCreate.salesConsultantId;
      }
    },
    methods:{
       setPaymentMethod(){
         var vm = this;
           this.$store.dispatch('setPaymentMethod', { payment_method: "CREDIT_CARD"})
           .catch(err => {
             vm.$fire({
               title: "Erro",
               type: "warning",
               text: err.msg
             });
           });
           this.closeModal();
       },
       requestIncreaseCreditLimit(){
           var vm = this;
         
         
           vm.loading = true;
           service.create({
               sales_consultant_id: this.orderSalesConsultantId,
               campaign_id: this.orderCampaign.campaign_id
           })
            .then(resp => {

          vm.$modal.show('success-request-after-limit-exceeded');
                   
                   vm.loading = false;
                })
                .catch(err => {
                
                  let resp = JSON.parse(err.response.data);
          vm.$fire({
            title: "Falha na solicitação",
            text: resp.msg,
            type: "error"
          });
          vm.loading = false;
                });
       },
        closeModal(){
            this.$modal.hide('alert-limit-exceeded');
            this.$emit('closed');
        }
    }
}
</script>

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

.alert-msg{
    margin-top: 20px;
    padding: 0 40px;
    
}
.buttons{

    .btn-request-change-credit-limit{
        min-width: 100%;
color: #fff !important;
}

.btn-go-to-back{
    margin-left: 0px;
}

    }
.custom-body {
    margin: 10px;
}

.modal-text-color {
  color: #3e3e3e;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn {
  margin: 10px;
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
}

.btn-default {
  background: #ff9b64;
}

.rounded-div {
  background: #cb2d2d80 0% 0% no-repeat padding-box;
  svg {
    color: #cb2d2d;
  }
}

.close-icon {
  cursor: pointer;
}
</style>
