<template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
      <img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
      <CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
      <div class="lottery-instant__layout-guess">
        <div class="content-img">
          <div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
            <img src="@/assets/images/lottery/guess/star.png" />
          </div>
          <img src="@/assets/images/lottery/guess/gift-main.png" />
        </div>
        <div class="content-main">
          <div class="content-main-times">
            抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
            >次
          </div>
          <div class="content-main-box">
            <PrizeGuess :blind-box-list="blindBoxList" @startLottery="startLottery">
              <template #choose="{ index }">
                <transition name="choose-fade">
                  <div v-show="chooseIndex === index" class="choose">选我</div>
                </transition>
              </template>
            </PrizeGuess>
          </div>
        </div>
      </div>
    </div>
    <WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
      <template #thanks>
        <div class="slot-thanks">你没有猜中</div>
      </template>
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
    <Introduction
      class="lottery-instant__intro"
      :title-text="introConfig.titleText"
      :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 { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
  blindBoxListGuess,
  recordsConfigGuess,
  winConfigGuess,
  introductionConfigGuess,
  countDownBarDeepPurple,
  starConfig
} from './config'

export default {
  components: {
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    PrizeGuess,
    WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
    Records: () => import('@/components/Lottery/Instant/Records')
  },
  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 {
      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, // 引用类型
      chooseIndex: 0,
      timer: null,
      blindBoxList: blindBoxListGuess,
      recordsConfig: recordsConfigGuess, // 中奖记录样式配置
      winConfig: winConfigGuess, // 开奖样式
      introConfig: introductionConfigGuess,
      barStyle: countDownBarDeepPurple,
      starConfig
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    })
  },
  mounted() {
    this.startChooseScroll()
  },
  beforeDestroy() {
    this.endChooseScroll()
  },
  methods: {
    startChooseScroll() {
      this.chooseIndex = 0
      this.timer = setInterval(() => {
        const indexTemp = Math.floor(Math.random() * (3 - 0 + 1)) + 0
        if (indexTemp === this.chooseIndex && this.chooseIndex === 3) {
          this.chooseIndex = 0
        } else if (indexTemp === this.chooseIndex && this.chooseIndex !== 3) {
          this.chooseIndex = indexTemp + 1
        } else {
          this.chooseIndex = indexTemp
        }
      }, 1000)
    },
    endChooseScroll() {
      clearInterval(this.timer)
    },
    startLottery() {
      Bus.$emit('updateMain', { func: 'startLottery' })
    },
    drawAnimation() {
      Bus.$emit('updateMain', { isLottering: false })
      setTimeout(() => {
        Bus.$emit('updateMain', { isShowWin: true })
      }, 400)
    }
  }
}
</script>

<style lang="less" scoped>
.lottery-instant {
  position: relative;
  height: 100%;
  background-color: #631e88 !important;
  background-image: url('@/assets/images/lottery/guess/page-bg.png') !important;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  &__main {
    text-align: center;
  }
  &__title {
    width: 66.7%;
    object-fit: cover;
    margin-top: 28px;
  }
  &__countdown {
    padding-top: 6px;
  }
  &__layout-guess {
    padding: 0 15px;
    .content-img {
      position: relative;
      width: 152px;
      height: 154px;
      margin: 10px auto 0 auto;
      img {
        width: 100%;
      }
      &--star {
        position: absolute;
      }
    }
    .content-main {
      position: relative;
      background-image: url('@/assets/images/lottery/guess/game-bg.png');
      background-size: 100% 100%;
      background-position: center;
      width: 100%;
      height: 0;
      padding-top: 156 / 367 * 100%;
      margin-top: 16px;
      &-box {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 38%;
        z-index: 20;
        .choose {
          position: absolute;
          top: -40%;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          background-color: #ffffffcc;
          padding: 2px 6px;
          white-space: nowrap;
          border-radius: 9px;
          z-index: -1;
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 100%);
            width: 0;
            height: 0;
            border-top: 4px solid #ffffffcc;
            border-bottom: 4px solid transparent;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
          }
        }
      }
      &-times {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #fff;
        z-index: 10;
      }
    }
  }
}

.choose-fade-enter-active {
  transition: all 0.1s ease-in;
}
.choose-fade-leave-active {
  transition: all 0.1s ease-out;
}
.choose-fade-enter,
.choose-fade-leave-to {
  opacity: 0;
  top: 0 !important;
}
</style>
