<template>
  <b-row class="shipping-card default-card" :style="{ background: cardBackground}">
    <div class="icon col-md-2">
      <font-awesome-icon icon="truck-loading" />
    </div>

    <div class="content col-md-10 akkurat-regular text-left">
      <span  v-if="getTotalToPay < getValueToFreeShipping()">Frete grátis para compras a partir de:</span>
      <p class="akkurat-bold"  v-if="getTotalToPay < getValueToFreeShipping()">R$ {{getValueToFreeShipping()}}</p>
      <span  v-if="getTotalToPay < getValueToFreeShipping()">Valor para atingir o frete grátis:</span>
      <p v-if="getTotalToPay < getValueToFreeShipping()">R$ {{getValueToFreeShipping() - getTotalToPay | formatCoin}}</p>
      <p v-else="">Você conquistou frete grátis</p>
    </div>
  </b-row>
</template>

<script>

import { mapState, mapGetters } from 'vuex';

export default {
  
computed:{
 ...mapGetters([
     'getTotalToPay'
    ]),
    settings(){
      return this.$store.state.orderCreate.settings;
    },
  
  cardBackground(){
 let percent = (this.getTotalToPay * 100) / this.getValueToFreeShipping();
   
  if(percent >= 100){
    return "rgba(39, 137, 55, 0.45)";
  }

    return "linear-gradient(90deg, #27893740 "+percent+"%, white 0%) !important";
  }
},
  methods: {
    getValueToFreeShipping() {


return this.$store.state.orderCreate.free_shipping;
      
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/main.scss";
@import "@/assets/css/cards.scss";
.shipping-card {
  margin: 5px 0px !important;
  padding: 8px 0px;

 
  .content {
    line-height: 100%;
    p {
      padding: 0;
      margin: 0;
    }
    span {
      font-size: 0.7em;
      text-align: left;
      letter-spacing: 0.23px;
    }
  }

  .icon {
    position: relative;
    display: block;
    padding-right: 0px;
    svg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1em;
      margin: auto;
      width: 32px;
      height: 32px;
      background: #27893780 0% 0% no-repeat padding-box;
      color: #27893780;
      border-radius: 50%;
      padding: 6px;
    }
  }
}
</style>