Untitled

<template>
  <div class="d-md-none d-flex justify-content-center mobile-time-remaining ">
    <div class="time position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="time-value">{{ days }}</div>
      <div class="time-unit">{{ $t('promotions.days') }}</div>
    </div>
    <div class="time position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="time-value">{{ hours }}</div>
      <div class="time-unit">{{ $t('promotions.hours') }}</div>
    </div>
    <div class="time position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="time-value">{{ mins }}</div>
      <div class="time-unit">{{ $t('promotions.mins') }}</div>
    </div>
    <div class="time position-relative d-flex flex-column justify-content-center align-items-center">
      <div class="time-value">{{ secs }}</div>
      <div class="time-unit">{{ $t('promotions.secs') }}</div>
    </div>
  </div>
</template>

<script>
/*
* AuctionsMobileTimeRemaing
*/
export default {
  name: 'AuctionsMobileTimeRemaing',
  props: {
    endAt: {
      type: String,
      default: '',
    },
  },
  computed: {
    days() {
      const diffInSeconds = this.getDiff()
      return parseInt(diffInSeconds / 86400)
    },
    hours() {
      let diffInSeconds = this.getDiff()
      diffInSeconds = diffInSeconds - this.days * 86400
      return parseInt(diffInSeconds / 3600)
    },
    mins() {
      let diffInSeconds = this.getDiff()
      diffInSeconds = diffInSeconds - this.hours * 3600
      return parseInt(diffInSeconds / 60)
    },
    secs() {
      const diffInSeconds = this.getDiff()
      return Math.ceil(diffInSeconds % 60)
    }
  },
  methods: {
    getDiff() {
      console.log('this.endAt', this.endAt)
      const endingTimestamp = new Date(this.endAt).valueOf()
      console.log('--- endingTimestamp', endingTimestamp)
      const currentTimestamp = new Date().valueOf()
      const diff = (endingTimestamp - currentTimestamp) / 1000
      if (diff > 0) return diff
      return 0
    }
  }
}
</script>

<style lang="sass" scoped>
@import '~/assets/css/_variables'
@import '~/assets/css/_typography'

.time
  width: 60px
  height: 60px
  &::after
    content: ''
    position: absolute
    top: 11px
    right: 0
    display: block
    width: 0.5px
    height: 38px
    background: #EDEDED
  &:last-child
    &::after
      display: none
  &-value
    @include body-2
    font-family: $font-sp-pro
    font-weight: $normal
    color: $black
  &-unit
    @include body-1224
    font-family: $font-sp-pro
    font-weight: $light
    color: $black
</style>