<template>
  <div>
    <top-card-template icon="award" v-if="moduleLoaded">
      <template v-slot:first>Meta do pedido:</template>
      <template v-slot:first-value>{{ parseFloat(roletteGoal) | formatCoin}}</template>
      <template v-slot:second>{{distanceToGoal > 0? 'Faltam' : "Parabéns"}}:</template>
      <template v-slot:second-value>
        <div class="text-left">
          <a
            href="#"
            @click.prevent="$modal.show('show-roulette-incentive')"
            v-if="distanceToGoal > 0"
          >
            R$
            <strong>{{ distanceToGoal | formatCoin}}</strong>
          </a>
          <a href="#" @click.prevent="$modal.show('show-roulette-incentive')" v-else>
            *
            <strong class="text-success">Parabéns!! Veja seu prêmio.</strong> *
          </a>
        </div>
      </template>
    </top-card-template>
    <modalRoulette />
  </div>
</template>

<script>
import topCardTemplate from "./topCardTemplate";
import { mapState, mapGetters } from "vuex";
import modalRoulette from "@/components/modals/Order/RouletteIncentive";


export default {
  components: {
    topCardTemplate,
    modalRoulette
  },
  data() {
    return {
      alerted: false
    };
  },
  computed: {
    ...mapState(["orderCreate"]),
    ...mapGetters([
      "getTotalToPay",
      "getSumSubTotal",
      "getMinOrderAmount",
      "getAmountIncentive",
      "getTotalIncentiveQuantity",
      "getNeedMinOrderToClass",
      "roletteGoal",
      "distanceToGoal"
    ]),
    moduleLoaded() {
      return this.$store.state.orderCreate.resumeLastOrderValue != null;
    },
    salesConsultant() {
      return this.$store.state.orderCreate.salesConsultantId;
    }
  },
  watch: {
    distanceToGoal: {
      handler: function(value) {
        if (value === 0 && !this.alerted) {
          this.alerted = true;
          this.$modal.show("show-roulette-incentive");
        } else if (value > 0) {
          this.alerted = false;
        }
      },
      deep: true
    },
  },
  
};
</script>