<template>
  <section class="join-button" :class="lotteryInfo.showType === 7 ? 'treasure' : 'luckybag'">
    <div class="btn-box" :style="{ '--btnBottom': btnBottom }">
      <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">未开始</button>
        <button v-if="lotteryInfo.condition === 3" class="join-btn pre">未开始</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">
            <button class="join-btn">恭喜您中奖！</button>
          </div>
        </template>
        <template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
          <div class="win-result-box">
            <button class="join-btn end">很遗憾，您未中奖</button>
          </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,
      btnBottom: '' // 按钮下边距 为适应不同背景图
    }
  },
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
    })
  },
  watch: {
    lotteryInfo: {
      handler() {
        this.dateInit()
      },
      deep: true
    }
  },
  mounted() {
    this.dateInit()
    if (this.lotteryInfo.showType === 6) {
      this.btnBottom = '-10px'
    } else {
      this.btnBottom = '20px'
    }
  },
  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" scoped>
@--box-width: 194px;
@--box-height: 78px;

// @keyframes wave {
//   0% {
//     opacity: 0.5;
//   }
//   100% {
//     opacity: 1;
//     transform: scale(1.1);
//   }
// }
// @keyframes wavetwo {
//   0% {
//     opacity: 1;
//   }
//   100% {
//     opacity: 0.5;
//   }
// }
.join-button {
  height: 310px;
  .btn-box {
    width: @--box-width;
    min-height: @--box-height;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    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;
    }
    .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;
      margin-bottom: var(--btnBottom);
      background: url(./img/button-light.png) no-repeat top;
      outline: none;
      z-index: 1;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #db0000;
      // line-height: 70px;
      &.pre {
        color: #ffffff;
        background: url(./img/button-dark.png) no-repeat top;
      }
      &.end {
        color: #ffffff;
        background: url(./img/button-dark.png) no-repeat top;
      }
      &.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;
  }
}
.treasure {
  background: url(img/treasure.png) no-repeat center;
  background-size: contain;
}
.luckybag {
  background: url(img/luckybag.png) no-repeat center;
  background-size: contain;
}
</style>
