<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="cool_data">
      
      <div class="data-container" v-if="properties['Metrics']">
        
        <div class="metric-container motorist-hours-saved" v-if="properties['Metrics'].motoristHoursSaved">
          <i class="fas fa-car"></i>
          <p class="metric" :data-count="properties['Metrics'].motoristHoursSaved">{{ displayMotoristHoursSaved }}</p>
          <div class="description">
            <p>MOTORIST</p>
            <p>HOURS SAVED</p>
          </div>
        </div>
        
        <div class="metric-container operator-hours-saved" v-if="properties['Metrics'].operatorHoursSaved">
          <i class="fas fa-user"></i>
          <p class="metric" :data-count="properties['Metrics'].operatorHoursSaved">{{ displayOperatorHoursSaved }}</p>
          <div class="description">
            <p>OPERATOR</p>
            <p>HOURS SAVED</p>
          </div>
        </div>
        
        <div class="metric-container gallons-fuel-saved" v-if="properties['Metrics'].gallonsFuelSaved">
          <i class="fas fa-gas-pump"></i>
          <p class="metric" :data-count="properties['Metrics'].gallonsFuelSaved">{{ displayGallonsFuelSaved }}</p>
          <div class="description">
            <p>GALLONS OF</p>
            <p>FUEL SAVED</p>
          </div>
        </div>
      
      </div>

      <div class="fine-print" v-if="properties['Fine Print']">
        <p>{{properties['Fine Print'].value}}</p>
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: 'BuildableCoolData',
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      let componentData = JSON.parse(this.componentData);
      let hardCodedData = {
          displayMotoristHoursSaved: Math.floor(componentData.properties['Metrics'].motoristHoursSaved * .90),
          displayOperatorHoursSaved: Math.floor(componentData.properties['Metrics'].operatorHoursSaved * .90),
          displayGallonsFuelSaved: Math.floor(componentData.properties['Metrics'].gallonsFuelSaved * .90),
      };
      return {...hardCodedData, ...componentData};
    },
    mounted() {

      jQuery.extend(jQuery.easing,
        {
            easeOutQuad: function (x, t, b, c, d) {
                return -c *(t/=d)*(t-2) + b;
            }
        }
      );

      jQuery(".cool_data-row").waypoint({
        handler() {
          jQuery('.metric-container p').each(function () {
            let $this = jQuery(this),
              countTo = $this.attr('data-count');
            jQuery({countNum: $this.text()}).animate({
                countNum: countTo
              },
              {
                duration: 30000,
                easing: 'easeOutQuad',
                step: function () {
                  $this.text(Math.floor(this.countNum).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
                },
                complete: function () {
                  $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
                }
              });
          });
          this.destroy();
        },
        continuous: false,
        offset: "75%"
      });
    }
  }
</script>

<style scoped>

</style>