<template>
  <div>
    <card-right title="Método de Pagamento" subTitle="Como pagar?" >
      <template slot="icon">
        <font-awesome-icon class="icon bg-primary text-light" icon="dollar-sign" />
      </template>
   <template slot="btn-more">
<p class="text-left container-radio">

 <b-form-group label="">
      <b-form-radio-group
       @change="changePaymentMethod"
        name="radios-stacked"
        stacked
        v-model="paymentMethod"
      >
       <b-form-radio :disabled="disabledBillet"  name="some-radios" value="BILLET">
           <font-awesome-icon class="icon" icon="barcode" />
           Boleto

       </b-form-radio>
        <b-form-radio v-if="isSalesconsultant && !isPromotherInOtherOrder"  name="some-radios" value="CREDIT_CARD">
             <font-awesome-icon class="icon" icon="credit-card" /> Cartão de Crédito
             </b-form-radio>
      </b-form-radio-group>
    </b-form-group>

</p>

   </template>
    </card-right>
 
  </div>





</template>

<script>

import cardRight from "./CardRightList";

export default {
    name: "payment-select",
components:{
    cardRight
},
  data: () => {
    return {
    };
  },
  computed:{

    isSalesconsultant(){
      return this.$store.getters.isSalesConsultant;
    },
    isPromotherInOtherOrder(){
      return this.$store.getters.isPromotherInOtherOrder;
    },
paymentMethod: {
      get() {
        return this.$store.state.orderCreate.payment_method;
      },
      set(value) {}
    },
    disabledBillet(){
        return this.$store.getters.getMinOrderAmount > this.$store.state.orderCreate.credit_limit;
    }
  },
  methods: {
changePaymentMethod(method){
   var vm = this; 
 this.$store.dispatch("setPaymentMethod", { payment_method: method })
 .catch( err =>  {

vm.$fire({
  title: "alerta",
  type: 'error',
  text: err.msg

});

 });

}
  }
};
</script>

<style lang="scss" scoped>
.icon {
  svg {
    background: #4184e5 0% 0% no-repeat padding-box;
    color: #174e9f;
  }
}
.container-radio{
padding: 10px 10px 6px 19px;
}
</style>