<template>
      <b-row>
      <b-col md="3" style="border-right: solid 1px #ccc;">
        <top-card-template icon="dollar-sign">
          <template v-slot:first>Valor a Pagar:</template>
           <template v-slot:first-value> {{getTotalToPay | formatCoin}}</template>
          <template v-slot:second>Lucro:</template>
           <template v-slot:second-value>R$ {{ getSumSubTotal - getTotalToPay | formatCoin}}</template>

        </top-card-template>
      </b-col>
      <b-col md="3" style="border-right: solid 1px #ccc;">
        <top-card-template icon="hand-holding-usd">
          <template v-slot:first>Crédito Disponível:</template>
          <template v-slot:first-value> {{ parseFloat(orderCreate.credit_limit) | formatCoin}} </template>
          <template v-slot:second>Crédito Utilizado:</template>
           <template v-slot:second-value>R$ {{getMinOrderAmount | formatCoin}}</template>
        </top-card-template>
      </b-col>
      <b-col md="3" style="border-right: solid 1px #ccc;">
        <top-card-template  icon="money-bill">
          <template v-slot:first>Pedido Mínimo:</template>
           <template v-slot:first-value> {{ parseFloat(getNeedMinOrderToClass) | formatCoin}} </template>
          <template v-slot:second>Valor do Pedido:</template>
          <template v-slot:second-value>R$  {{getMinOrderAmount | formatCoin}}</template>
        </top-card-template>
      </b-col>
      <b-col md="3">
        
        <rolletTopCard />

        <!--
          Comentato apena para atender a Campanhas 12 verificar posteriorment 
          <top-card-template icon="award">
          <template v-slot:first>Incentivo:</template>
<template v-slot:first-value> {{ parseFloat(getAmountIncentive) | formatCoin}} | {{getTotalIncentiveQuantity}} Unids.</template>
         <template v-slot:second>Programa de incentivos: </template>
       <template v-slot:second-value> <div class="text-center"> <a href="#" @click.prevent="$modal.show('details-incentives-modal')">Ver detalhes</a></div> </template>
        </top-card-template -->
       
      </b-col>
      <incentives-modal />
    </b-row>
</template>

<script>
import topCardTemplate from "./repository/topCardTemplate";
import { mapState, mapGetters } from 'vuex'
import IncentivesModal from '@/components/modals/Order/Incentives'
import rolletTopCard from "./repository/roletteTopCard"
export default {
  
  components: {
    topCardTemplate,
    IncentivesModal,
    rolletTopCard
  },
  computed:{
    ...mapState([
      'orderCreate'
    ]),
    ...mapGetters([
     'getTotalToPay','getSumSubTotal','getMinOrderAmount','getAmountIncentive','getTotalIncentiveQuantity','getNeedMinOrderToClass'
    ]),

  },
  mounted(){
    
  }  
  

};
</script>

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