<template>
  <div class="timing w-full h-10 leading-10 px-4 text-xs">
    <template v-if="status < 3">
      离{{ voteType }}还有
      <span class="h-7 inline-block px-2 bg-app-blue-2 text-center text-sm leading-7 rounded">{{ count }}</span>
      个区块  
      ≈<span>{{ day }}</span>天<span>{{ hour }}</span>小时<span>{{ min }}</span>分<span>{{ sec }}</span>秒
    </template>
    <template v-else>
      投票已结束
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    status: {
      type: Number
    },
    count: {
      type: Number
    },
    isEnd: {
      type: Number
    }
  },
  data() {
    return {
      voteType: '投票结束',
      // count: 0,
      day: '00',
      hour: '00',
      min: '00',
      sec: '00',
    }
  },
  methods: {
    getTime(n: number) {
      const r = +n * 5000
      const day = +parseInt(r / (1000 * 60 * 60 * 24) + '')
      this.day = day >= 10 ? day + '' : '0' + day
      const hour = +parseInt(r / (1000 * 60 * 60) % 24 + '')
      this.hour = hour >= 10 ? hour + '' : '0' + hour
      const min = +parseInt(r / (1000 * 60) % 60 + '')
      this.min = min >= 10 ? min + '' : '0' + min
      const sec = +parseInt((r - (day * 24 * 60 * 60 * 1000) - hour * (1000 * 60 * 60) - min * (1000 * 60)) / 1000 + '')
      this.sec = sec >= 10 ? sec + '' : '0' + sec
    }
  },
  watch: {
    isEnd(n) {
      console.log(n)
      if (n === 1) {
        this.voteType = '投票开始'
      } else if (n === 2) {
        this.voteType = '下次投票'
      } else if (n === 3) {
        this.voteType = '结束时间'
      }
    },
    count(n) {
      console.log(n)
      this.getTime(n)
    }
  }
})
</script>

<style scoped>
  .timing {
    background: rgba(255, 255, 255, 0.2);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
</style>