<template>
  <section class="join-button">
    <div class="btn-box">
      <template v-if="parseInt(lotteryInfo.status, 10) === 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="parseInt(lotteryInfo.status, 10) === 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="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.end">
        <template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">恭喜您中奖！</p>
            <a v-if="isBindPhone" class="blue-text" @click="jumpToBinding">
              点击绑定手机号
              <i class="iconfont icon-zhankai"></i>
            </a>
            <span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
              查看中奖名单
              <i class="iconfont icon-zhankai"></i>
            </span>
          </div>
        </template>
        <template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">很遗憾，您没有中奖</p>
            <span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
              查看中奖名单
              <i class="iconfont icon-zhankai"></i>
            </span>
          </div>
        </template>
        <template v-if="!isLogin || !lotteryInfo.isDraw">
          <button class="join-btn end">已结束</button>
        </template>
      </template>
    </div>
    <div
      v-if="parseInt(lotteryInfo.status, 10) !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw"
      class="join-num"
    >
      已有 {{ lotteryInfo.activeNum }} 人参与
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } 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',
      isBindPhone: 'users/isBindPhone'
    })
  },
  watch: {
    lotteryInfo: {
      handler() {
        this.dateInit()
      },
      deep: true
    }
  },
  mounted() {
    this.dateInit()
  },
  methods: {
    ...mapActions({ jumpToBinding: 'users/jumpToBinding' }),
    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">
@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: 158px;
    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: 142px;
      height: 142px;
      &::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: 142px;
        height: 142px;
        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: 142px;
      height: 142px;
      line-height: 142px;
      border-radius: 50%;
      background-color: #e85c52;
      outline: none;
      position: relative;
      z-index: 1;
      &.pre {
        background-color: #e77e7b;
      }
      &.end {
        background-color: #999;
      }
      &.countdown {
        font-size: 16px;
      }
    }
    .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;
  }
  // .test {
  //     opacity: 1;
  //     display: block;
  //     background: none;
  //     position: relative;
  //     border-radius: 50%;
  //     width: 24px;
  //     height: 24px;
  //     margin: 0 0 0 80px !important;
  //     background: rgba(255, 255, 255, 0.1);
  //     transition: 0.6s;
  //     &::before {
  //         position: absolute;
  //         width: 18px;
  //         height: 18px;
  //         border-radius: 50%;
  //         content: "";
  //         border: 1px solid #fff;
  //         left: 50%;
  //         top: 50%;
  //         transition: 0.4s;
  //         transform: translate(-50%, -50%);
  //     }
  //     &:after {
  //         position: absolute;
  //         width: 8px;
  //         height: 8px;
  //         border-radius: 50%;
  //         content: "";
  //         background: #fff;
  //         left: 50%;
  //         top: 50%;
  //         transition: 0.5s;
  //         transform: translate(-50%, -50%);
  //     }
  //     &:hover {
  //         &:before {
  //             background: #fff;
  //             width: 10px;
  //             height: 10px;
  //             border: 0px solid #00c0ff;
  //         }
  //         &:after {
  //             width: 24px;
  //             height: 24px;
  //             background: none;
  //         }
  //     }
  // }
}
</style>
