<template>
  <modal
    name="show-roulette-incentive"
    :scrollable="true"
    :reset="true"
    :adaptive="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="bullhorn" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Programa de Incentivo</div>
          <div class="akkurat-bold max-header-text title">Roleta da Sorte</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 md='12' class="text-center">
  

<img v-if="distanceToGoal == 0" src="@/assets/roulette-incentive/ROLETA-DA-SORTE---meta-atingida.png" alt="">

<img v-else src="@/assets/roulette-incentive/ROLETA-DA-SORTE---meta-n-superada.png" alt="">


</b-col>
  
</b-row>
</div>


 <b-row class="footer" v-if="distanceToGoal > 0">

<b-col class="d-flex justify-content-center my-3 px-2">
          
          <b-button
            class="btn shadow-none border-0 btn-default btn-blue"
            @click="$router.back()"
          >
           Vou adicionar mais itens
          </b-button>
        </b-col>

        <b-col class="d-flex justify-content-center my-3 px-2">
          <b-button
            class="btn shadow-none border-0 btn-default btn-blue"
            @click="closeModal"
          >
            Continuar sem o prêmio
          </b-button>
          
        </b-col>
      </b-row>

<b-row class="footer" v-else>

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

<script>

export default {
  name: "roulette-incentive",
  computed: {
    distanceToGoal() {
      return this.$store.getters.distanceToGoal;
    }
  },
  methods:{
    closeModal(){
      this.$modal.hide('show-roulette-incentive');      
    }
  }
};
</script>
