<template>
  <section class="lottery-instant">
    <div class="lottery-instant__countdown">
      <CountdownBar :bar-style="barStyle"></CountdownBar>
    </div>
    <div class="lottery-instant__main">
      <div class="lottery-instant__layout-gashapon">
        <div class="content-main">
          <PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
        </div>
        <div class="lottery-instant__content-gashapon">
          <div class="on-start" @click="startLottery">
            <div class="lottery-instant__times">
              抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
              >次
            </div>
            <img :src="buttonImg" />
          </div>
        </div>
      </div>
    </div>
    <div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</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>
    <IntroductionPopup
      :value="isShowIntro"
      :wrap-style="introConfig.introWrapStyle"
      :content-style="introConfig.introContentStyle"
      :popup-style="introConfig.introPopupStyle"
      :content-box-style="introConfig.contentBoxStyle"
      :back-style="introConfig.backStyle"
      :rule="introConfig.rule"
    ></IntroductionPopup>
  </section>
</template>

<script>
import { PrizeGashapon } from 'lotteries'
import onStartImg from '@/assets/images/lottery/gashapon2/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disabled.png'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
  introductionConfigGashaponMini2 as introductionConfigGashaponMini,
  winConfigGashapon2 as winConfigGashapon,
  recordsConfigGashapon2 as recordsConfigGashapon,
  ballListGashapon,
  countDownBarWhite
} from './config'

export default {
  components: {
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    Records: () => import('@/components/Lottery/Instant/Records'),
    IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
    PrizeGashapon,
  },
  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
    },
    isShowIntro: {
      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, // 引用类型
      recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
      winConfig: winConfigGashapon, // 开奖样式
      introConfig: introductionConfigGashaponMini,
      barStyle: countDownBarWhite,
      ballListGashapon // 扭蛋球图片
    }
  },
  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
    }
  },
  methods: {
    startLottery() {
      Bus.$emit('updateMain', { func: 'startLottery' })
    },
    drawAnimation() {
      this.$refs.prizeGashaponRef.onStart()
    },
    endCallBack() {
      Bus.$emit('updateMain', { isLottering: false })
      setTimeout(() => {
        Bus.$emit('updateMain', { isShowWin: true })
      }, 400)
    },
    changeIsShowIntro() {
      Bus.$emit('updateMain', { isShowIntro: true })
    }
  }
}
</script>

<style lang="less" scoped>
.lottery-instant {
  position: relative;
  height: 100%;
  background-color: #631e88 !important;
  background-image: url('@/assets/images/lottery/gashapon2/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: 14px;
  }
  &__times {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #fff;
  }
  &__layout-gashapon {
    position: relative;
    background-image: url('@/assets/images/lottery/gashapon2/game-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 416 / 375 * 100%;
    margin-top: 7px;
    .content-main {
      position: absolute;
      top: 11.5%;
      left: 50%;
      width: 180px;
      height: 180px;
      transform: translateX(-50%);
      z-index: 10;
    }
  }
  &__content-gashapon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    z-index: 20;

    .on-start {
      position: absolute;
      left: 50%;
      bottom: 34%;
      transform: translateX(-50%);
      width: 51%;
      height: 17.6%;
      img {
        width: 100%;
        object-fit: cover;
      }
    }
  }
  &__main {
    position: relative;
  }
  &__intro-entry {
    position: fixed;
    top: 56px;
    right: 0;
    background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
    box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
    color: #9c5c00;
    font-size: 12px;
    writing-mode: vertical-lr;
    padding: 6px 3px;
    border-radius: 10px 0 0 10px;
  }
}
</style>
