<template>
  <modal name="brenchmarking-modal" size="lg" >
    <div>
      <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="medal" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">
           Ganhe mais descontos
            </div>
            <div class="akkurat-bold max-header-text"> Super Class</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>

<b-row>

<b-col class="brenchmarking" md='12' v-if="typeof(brenchmarking) !== 'undefined'">

Para a campanha {{campaign.name}} faça pedidos entre R$ {{parseFloat(brenchmarking.start_value) | formatCoin}} e 
{{parseFloat(brenchmarking.end_value) | formatCoin}} e tenha:

<table></table>

<p>
  Lucro de {{brenchmarking.discount}} % no pedido 
</p>

<p>
  Valor do Frete: <span v-if="brenchmarking.shipping_value == 0" class="text-success">Grátis</span> <span v-else>{{parseFloat(brenchmarking.shipping_value) | formatCoin}}</span> 
</p>

<p>
  Catálogos grátis: {{brenchmarking.free_catalogs}} 
</p>
    
    <p>
      Parcelas sem juros no cartão: {{brenchmarking.no_charge_installment_credit_card}}
    </p>

    <p>
      Parcelas no Boleto: {{brenchmarking.billet_installments}}
    </p>

</b-col>

<b-col v-else class="brenchmarking" md='12'>
<h2>Você ainda não é Super Class</h2>
</b-col>

</b-row>

    </div>
      <b-row class="footer">
        <b-col class="d-flex justify-content-center my-3 px-3">
          
          <b-button
            class="btn shadow-none border-0 btn-default btn-blue"
            @click="closeModal"
          >
            Fechar
          </b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>


export default {
  name: 'brenchmarking-modal',
  
  data: () => ({
    file: null,
  }),
    computed: {
    brenchmarking() {
      return this.$store.getters.getBenchmarkingRange;
    },
    campaign(){
      return this.$store.state.orderCreate.calendar.campaign;
    }
  },
  methods: {

    closeModal() {
      
      this.$modal.hide('brenchmarking-modal');
    },
       
  },
};
</script>

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

.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-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #275389;
}

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

.close-icon{
    cursor: pointer;
}
.footer{
  bottom: 15px;
  width: 100%;
  position: absolute;
}

.brenchmarking{
  padding: 10px 40px;
  p{
    margin: 0px;
  }
}
</style>
