<template>
<div>

  <b-row @click="showModal" class="shipping-card default-card" style="cursor:pointer;" :style="{ background: cardBackground}">
    <div  class="icon col-md-2">
      <img height="18px" src="@/assets/svgs/Logo_Programa Super Class.svg" alt="Odorata">
    </div>

    <div class="content col-md-10 akkurat-regular text-left">
      <span v-if=" typeof(getBenchmarkingRange) !== 'undefined'">SuperClass</span>
      <p
        class="akkurat-bold"
        v-if="typeof(getBenchmarkingRange) !== 'undefined'"
      >{{getBenchmarkingRange.name}}</p>
      
    

      <p v-else>Você ainda não é uma consultora Super Class 


      </p>
    </div>
  </b-row>
    <brenchmarking-modal />
</div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

import BrenchmarkingModal from "@/components/modals/Order/Brenchmarking"

export default {
  components:{
BrenchmarkingModal
  },
  computed: {
    ...mapGetters(["getTotalToPay", "getSumSubTotal", "getBenchmarkingRange"]),
    settings() {
      return this.$store.state.orderCreate.settings;
    },

    cardBackground() {
      if (typeof this.getBenchmarkingRange === "undefined") {
        return "white";
      }

      let percent =
        ((this.getSumSubTotal - this.getBenchmarkingRange.start_value) * 100) /
        (this.getBenchmarkingRange.end_value -
          this.getBenchmarkingRange.start_value);
      

      return (
        "linear-gradient(90deg, " +
        this.getBenchmarkingRange.color +
        " " +
        percent +
        "%, white 0%) !important"
      );
    }
  },
  methods: {
    getValueToFreeShipping() {
      return this.$store.state.orderCreate.free_shipping;
    },
    showModal(){
     
     this.$modal.show('brenchmarking-modal'); 
    }
  }
};
</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>