<template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
      <CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
      <div class="lottery-instant__layout-scratch">
        <div class="lottery-instant__content-scratch">
          <img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
          <div class="content-main">
            <PrizeScratch ref="prizeScratchRef" :cover-img="coverImg" @endCallBack="endCallBack">
              <template #item>
                <div class="win__wrap">
                  <div class="win__content">
                    <div v-if="isWin" class="win__content-win">
                      <div class="win__content-win-title">恭喜获得</div>
                      <div class="win__content-win-img">
                        <img src="@/assets/images/lottery/gift.png" alt="" />
                      </div>
                      <div class="win__content-win-name">
                        {{ winInfo.name }}
                      </div>
                    </div>
                    <div v-else class="win__content-thanks">谢谢参与，再接再厉</div>
                  </div>
                </div>
              </template>
              <template #button>
                <div v-show="!isLottering" class="lottery-instant__button-wrap">
                  <div class="lottery-instant__button-mask">
                    <div v-show="firstTimeLottering" class="lottery-instant__button-img">
                      <img :src="buttonImg" @click="startLottery" />
                      <div class="times">
                        今日次数<span>{{ lotteryInfo.userTimes }}</span
                        >次
                      </div>
                    </div>
                    <div v-show="!firstTimeLottering" class="lottery-instant__button-continue">
                      <span @click="continueScratch"
                        >今日次数<span>{{ lotteryInfo.userTimes }}</span
                        >次，继续刮奖</span
                      >
                    </div>
                  </div>
                </div>
              </template>
            </PrizeScratch>
          </div>
        </div>
      </div>
    </div>
    <Records :records-config="recordsConfig"></Records>
    <Introduction
      class="lottery-instant__intro"
      :rule="introConfig.rule"
      :title-style="introConfig.introTitleStyle"
      :wrap-style="introConfig.introWrapStyle"
      :content-style="introConfig.introContentStyle"
      :intro-box-style="introConfig.introBoxStyle"
    ></Introduction>
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { PrizeScratch } from 'lotteries'
import { LOTTERY_STATUS } from '@/utils/constant'
import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus'
import { introductionConfigScratch, recordsConfigScratch, countDownBarBlue } from './config'

export default {
  components: {
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
    Records: () => import('@/components/Lottery/Instant/Records'),
    PrizeScratch
  },
  props: {
    winInfo: {
      type: Object,
      default: () => ({})
    },
    isShowWin: {
      type: Boolean,
      default: false
    },
    isShowBindPhone: {
      type: Boolean,
      default: false
    },
    isLottering: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      coverImg,
      firstTimeLottering: true,
      id: this.$route.query.id || null, // 抽奖id
      playId: this.$route.query.sessionId || null, // 场次id
      sid: this.$route.query.sid || null, // 引用id
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigScratch, // 中奖记录样式配置
      introConfig: introductionConfigScratch,
      barStyle: countDownBarBlue
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    isNotStart() {
      // 抽奖不在活动日期内
      const { status } = this.lotteryInfo
      return +status !== LOTTERY_STATUS.start
    },
    // 按钮图片样式
    buttonImg() {
      if (!this.lotteryInfo.userTimes || this.isNotStart) {
        return onStartDidabledImg
      }
      return onStartImg
    },
    isWin() {
      return !!+this.winInfo.id
    }
  },
  methods: {
    ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
    // 开始抽奖
    startLottery() {
      Bus.$emit('updateMain', { func: 'startLottery' })
    },
    drawAnimation() {
      //
    },
    // 刮奖结束回调
    endCallBack() {
      this.$toast({
        message: '刮奖结束',
        duration: 1500
      })
      Bus.$emit('updateMain', { isLottering: false })
      if (this.lotteryInfo.userTimes === 0) {
        this.$refs.prizeScratchRef.tryAgain()
        this.firstTimeLottering = true
      } else {
        this.firstTimeLottering = false
      }
    },
    // 继续刮奖
    continueScratch() {
      this.$refs.prizeScratchRef.tryAgain()
      this.startLottery()
    }
  }
}
</script>

<style lang="less" scoped>
.lottery-instant {
  position: relative;
  height: 100%;
  background-color: #83d4fd !important;
  background-image: url('@/assets/images/lottery/scratch/page-bg.png') !important;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  &__countdown {
    padding-top: 18px;
  }
  &__main {
    padding: 0 0.13rem;
  }
  &__layout-scratch {
    position: relative;
    background-image: url('@/assets/images/lottery/scratch/game-bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 363 / 355 * 100%;
    margin-top: 7px;
  }
  &__content-scratch {
    position: absolute;
    left: 0;
    top: 0;
    padding: 90px 20px 30px 20px;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;

    .content-title {
      width: 74%;
      object-fit: cover;
      margin: 10px 0;
    }
    .content-prize {
      font-size: 12px;
    }
  }

  &__button {
    &-wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 40;
    }
    &-mask {
      width: 100%;
      height: 100%;
    }
    &-img {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 40%;
        object-fit: cover;
      }
      .times {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #666;
      }
    }
    &-continue {
      position: absolute;
      bottom: 6%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #666;
    }
  }

  .win {
    &__wrap {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__content {
      width: 90%;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #fff;

      &-win {
        &-title {
          font-size: 16px;
          margin-bottom: 3px;
          color: #333;
        }
        &-img {
          margin-bottom: 3px;
          img {
            width: 60px;
          }
        }
        &-name {
          font-size: 12px;
          color: #666;
        }
      }

      &-thanks {
        font-size: 16px;
      }
    }
  }
}
</style>
