<template>
  <section class="timing-status">
    <template v-if="type === 1">
      <div v-if="state !== 2" class="countdown-box">
        <label>倒计时：</label>
        <p>
          <span class="text-time">
            <template v-if="hours > 0">{{ hours | filterNum }} : </template>{{ minutes | filterNum }} :
            {{ seconds | filterNum }}
            <template v-if="state === 0">后开始</template>
            <template v-else-if="state === 1">后结束</template>
          </span>
        </p>
      </div>
      <span v-else class="end-lottery">抽奖已结束</span>
    </template>
    <template v-if="type === 2">
      <div class="joinnum-box">
        <p>参与人数满 {{ lotteryInfo.joinNum }} 人自动开奖（当前参与 {{ lotteryInfo.activeNum }} 人）</p>
      </div>
    </template>
  </section>
</template>

<script>
// 倒计时逻辑处理
import CountDown from '@/mixins/CountDown'
import { mapGetters } from 'vuex'

export default {
  filters: {
    filterNum(val) {
      return val > 0 ? (val < 10 ? `0${val}` : val) : '00'
    }
  },
  mixins: [CountDown],
  data() {
    return {
      stateText: {
        0: '抽奖还未开始',
        1: '抽奖进行中...',
        2: '抽奖已结束'
      },
      timer: null
    }
  },
  computed: {
    ...mapGetters({ lotteryInfo: 'lottery/lotteryInfo' }),
    state() {
      return this.lotteryInfo.status
    },
    type() {
      return this.lotteryInfo.condition
    }
  },
  watch: {
    state(nval, oval) {
      if (nval !== oval) {
        this.dateInit()
      }
    },
    lotteryInfo: {
      handler() {
        this.dateInit()
      },
      deep: true
    }
  },
  mounted() {
    this.dateInit()
  },
  methods: {
    dateInit() {
      // 倒计时开始
      if (this.state === 0) {
        this.lotteryInfo.startTime && this.reloadTime(this.lotteryInfo.startTime * 1000)
      } else if (this.state === 1) {
        this.lotteryInfo.endTime && this.reloadTime(this.lotteryInfo.endTime * 1000)
      }
    },
    reloadTime(time) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.timeFn(time)
        this.reloadTime(time)
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.timing-status {
  .countdown-box {
    display: flex;
    align-items: center;
    justify-content: left;
    label {
      color: #999999;
      min-width: 58px;
    }
    p {
      flex: 1;
      span {
        &.text-time {
          font-size: 16px;
          font-weight: 700;
          color: #e85c52;
        }
      }
    }
  }
  .end-lottery {
    font-size: 14px;
    color: #999;
  }
  .joinnum-box {
    font-size: 14px;
    p {
      color: #999999;
    }
  }
}
</style>
