<template>

  <div>
    <span class="span-time">{{times.day}}</span>
    天
    <span class="span-time">{{times.hours}}</span>
    时
    <span class="span-time">{{times.minute}}</span>
    分
    <span class="span-time">{{times.seconds}}</span>
    秒
  </div>
</template>

<script>
  export default {
    name: "zgh-countdown",
    props: {
      remain_time: {
        type: Number,
        default: 9999999
      }
    },
    data() {
      return {
        time: this.remain_time,
        times: {
          seconds: 0, //秒
          minute: 0, //分
          hours: 0, //时
          day: 0 //天
        }
      }
    },
    mounted() {
      this.getRemainingTime(this.time)
    },
    methods: {
      getRemainingTime(remain_time) {
        if (remain_time <= 0 || !remain_time) {
          this.times = '订单已失效';
          return
        }
        let milli;
        let timer = setInterval(() => {
          milli = remain_time;
          this.times.seconds = parseInt((remain_time) % 60);
          this.times.minute = parseInt((remain_time) / 60 % 60);
          this.times.hours = parseInt((remain_time) / 60 / 60 % 24);
          this.times.day = parseInt((remain_time) / 60 / 60 / 24);
          if (remain_time <= 0) {
            clearInterval(timer);
          }
          // = day + '天' + hours + '时' + minute + '分' + seconds + '秒'/* + milli + '毫秒'*/;

          remain_time -= 1;
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .span-time {
    display: inline-block;
    background: #000;
    border-radius: 3px;
    padding: 3px;
    font-size: 14px;
    color: #fff;
  }
</style>
