<template>
  <section class="join-button">
    <div class="btn-box">
      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser">
        <button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button>
        <button v-if="lotteryInfo.condition === 2" class="join-btn pre countdown">
          <template v-if="hours > 0">{{ hours | filterNum }}:</template>
          {{ minutes | filterNum }}:{{ seconds | filterNum }}后开始
        </button>
      </template>
      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.start">
        <template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw">
          <button class="join-btn pre">待开奖</button>
        </template>
        <template v-else>
          <div class="btn-mask"></div>
          <button class="join-btn" @click="lottery">点击参加</button>
        </template>
      </template>
      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.end">
        <template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">恭喜您中奖！</p>
          </div>
        </template>
        <template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">很遗憾，您没有中奖</p>
          </div>
        </template>
        <template v-if="!isLogin || !lotteryInfo.isDraw">
          <button class="join-btn end">已结束</button>
        </template>
      </template>
    </div>
    <div v-if="+lotteryInfo.status !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw" class="join-num">
      已有 {{ lotteryInfo.activeNum }} 人参与
    </div>
  </section>
</template>
<script>
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
// 倒计时逻辑处理
import CountDown from '@/mixins/CountDown'

export default {
  filters: {
    filterNum(val) {
      return val > 0 ? (val < 10 ? `0${val}` : val) : '00'
    }
  },
  mixins: [CountDown],
  data() {
    return {
      LOTTERY_STATUS,
      timer: null
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo'
    })
  },
  watch: {
    lotteryInfo: {
      handler() {
        this.dateInit()
      },
      deep: true
    }
  },
  mounted() {
    this.dateInit()
  },
  methods: {
    dateInit() {
      // 倒计时开始
      if (this.lotteryInfo.status === 0) {
        this.lotteryInfo.startTime && this.reloadTime(this.lotteryInfo.startTime * 1000)
      }
    },
    reloadTime(time) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.timeFn(time)
        this.reloadTime(time)
      }, 1000)
    },
    lottery() {
      this.$emit('lottery')
    }
  }
}
</script>
<style lang="less">
@--box-width: 100px;
@--box-height: @--box-width;

@keyframes wave {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes wavetwo {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
.join-button {
  .btn-box {
    width: @--box-width;
    min-height: @--box-height;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    .btn-mask {
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: @--box-width - 16px;
      height: @--box-height - 16px;
      &::before {
        content: '';
        border-radius: 50%;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fbaca6;
        animation: wave 1s ease-out infinite;
      }
      &:after {
        content: '';
        border-radius: 50%;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        width: @--box-width - 16px;
        height: @--box-height - 16px;
        background-color: #fbaca6;
        transform: scale(1.1);
        animation: wavetwo 1s ease-out infinite;
        // animation-delay: 0.5s;
      }
    }
    .join-btn {
      border: 0;
      padding: 0;
      color: #fff;
      font-size: 18px;
      text-align: center;
      width: @--box-width - 16px;
      height: @--box-height - 16px;
      line-height: @--box-height - 16px;
      border-radius: 50%;
      background-color: #e85c52;
      outline: none;
      position: relative;
      z-index: 1;
      &.pre {
        background-color: #e77e7b;
      }
      &.end {
        background-color: #999;
      }
      &.countdown {
        font-size: 12px;
      }
    }
    .win-result-box {
      min-height: 54px;
      text-align: center;
      .win-result {
        font-size: 18px;
        color: #e95c53;
        text-align: center;
        white-space: nowrap;
        margin-bottom: 10px;
        line-height: 24px;
      }
      .blue-text {
        color: #409eff;
        font-size: 14px;
        line-height: 20px;
        display: block;
        .icon-zhankai {
          font-size: 12px;
        }
      }
    }
  }
  .join-num {
    margin-top: 12px;
    font-size: 14px;
    color: #000;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
