<template>
  <section class="lottery-instant">
    <div class="lottery-instant__title">
      <img src="@/assets/images/lottery/gashapon2/page-title.png" />
    </div>
    <div class="lottery-instant__main">
      <div class="lottery-instant__countdown">
        <CountdownBar></CountdownBar>
      </div>
      <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>
    <WinPopup :value="isShowWin" :info="winInfo">
      <template #title-bg>
        <div class="slot-title-bg">
          <img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
        </div>
      </template>
      <template #thanks>
        <div class="slot-thanks">
          <p class="slot-thanks-p1">很遗憾</p>
          <p class="slot-thanks-p2">你没有扭到奖品</p>
        </div>
      </template>
    </WinPopup>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records></Records>
    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
  </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 { ballListGashapon } from './config'

export default {
  components: {
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
    Records: () => import('@/components/Lottery/Instant/Records'),
    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
    }
  },
  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, // 引用类型
      ballListGashapon // 扭蛋球图片
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    isNotStart() {
      // 抽奖不在活动日期内
      const { status } = this.lotteryInfo
      return Number(status) !== LOTTERY_STATUS.start
    },
    // 按钮图片样式
    buttonImg() {
      if (!this.lotteryInfo.userTimes || this.isNotStart) {
        return onStartDidabledImg
      }
      return onStartImg
    }
  },
  mounted() {
    Bus.$emit('initDeal', '#6f4800')
  },
  methods: {
    startLottery() {
      Bus.$emit('updateMain', { func: 'startLottery' })
    },
    drawAnimation() {
      this.$refs.prizeGashaponRef.onStart()
    },
    endCallBack() {
      Bus.$emit('updateMain', { func: 'runEnd' })
    }
  }
}
</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 {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  &__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;
  }
  &__title {
    width: 80%;
    height: 6%;
    margin: 32px auto 26px auto;
    line-height: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 样式穿透
.lottery-instant {
  // 介绍
  /deep/ .introduction {
    background-color: #ffbd33;
    padding: 75px 11px 8px 11px;
    border-radius: 0;
    &__sec-title {
      background-image: url('~@/assets/images/lottery/gashapon2/intro-wrap-title.png');
      width: 95%;
      padding: 4px 0;
      color: #fff;
      font-size: 18px;
      text-align: center;
      line-height: 2;
      top: -7%;
      left: 50%;
      transform: translate(-50%, 50%);
    }
    &__wrap {
      background-image: url('~@/assets/images/lottery/gashapon2/intro-wrap-bg.png');
      background-size: 100% 100%;
      padding: 15px 18px 25px 18px;
      background-color: transparent;
    }
    &__content {
      background: #fff9e9;
      border-radius: 2px;
      color: #000;
    }
  }

  // 开奖
  /deep/ .win-popup {
    width: 263px;
    height: 309px;
    &__container {
      width: 100%;
    }
    &__wrap {
      position: relative;
      width: 100%;
      height: 100%;
      background-image: url('~@/assets/images/lottery/records-new/bg-blue.png');
    }
    &__sure {
      width: 157px;
      height: 49px;
      line-height: 49px;
      border-radius: 20px;
      background: linear-gradient(#fff0cd, #fdbf2c) !important;
      .van-button__text {
        font-size: 16px;
        color: #860300;
        font-weight: 600;
        text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
      }
    }
    &__title {
      font-size: 14px;
    }
    &__win-info {
      width: 80%;
      margin: 0 auto;
      background-color: #0000001a;
      border-radius: 20px;
      margin-top: 15px;
    }
    &__footer {
      width: 100%;
      min-height: 80px;
      justify-content: flex-start;
    }
    &__prize-img {
      width: 65px;
      height: 65px;
      background-image: url('~@/assets/images/lottery/win-new/prize-bg-blue.png');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 60%;
      }
    }
    &__prize-name {
      margin-bottom: 11px;
      font-size: 12px;
    }

    .slot-title-bg {
      text-align: center;
      margin-top: 36px;
      height: 27px;
      img {
        height: 100%;
      }
    }
    .slot-thanks {
      text-align: center;
      &-p1 {
        font-size: 18px;
        margin-bottom: 10px;
      }
    }
    .van-popup__close-icon {
      right: -20px;
      top: -10px;
      width: 25px;
      height: 25px;
      font-size: 0;
      background-image: url('~@/assets/images/lottery/win-new/close-blue.png');
      background-size: 100% 100%;
    }
  }

  // countdown
  /deep/ .countdown-bar__status {
    background-color: transparent;
    padding: 0;
    border: none;
  }

  // records
  /deep/ .records {
    &__entry-wrap p {
      color: #6f4800;
    }
    &-popup {
      width: 258px;
      height: 320px;
      background-color: transparent;
      &__tabs {
        padding-top: 0;
      }
      &__personal-record,
      &__winners-record {
        padding: 0 30px;
      }
      &__phone,
      &__prize-name,
      &__time {
        color: #333;
      }
    }
    .van-tabs {
      &__wrap {
        height: 29px;
      }
      &__line {
        display: none;
      }
      &__nav--line {
        width: 180px;
        padding-bottom: 0;
      }
      &__content {
        background-image: url('~@/assets/images/lottery/records-new/bg-blue.png');
        background-size: 100% 100%;
      }
    }
    .van-tab {
      width: 60px;
      background: linear-gradient(#f6fbff, #a8d9fb);
      border-radius: 12px 12px 0 0;
      margin: 0 3px;
      span {
        color: #90b4dd;
        font-weight: 400;
      }
      &--active {
        background: linear-gradient(#feffff, #dff0ff);
        span {
          color: #4787d1 !important;
        }
      }
    }
    .van-popup__close-icon {
      display: none;
    }
    .van-tabs__content .van-tab__pane {
      padding: 20px 0;
    }
    .records-popup__winners-record .records-popup__prize-name {
      color: #d92e32;
    }
  }
}
</style>
