<template>
  <section class="lottery-instant">
    <Banner class="lottery-instant__banner"></Banner>
    <CountdownBar class="lottery-instant__countdown"></CountdownBar>
    <div class="lottery-instant__times">
      您还有抽奖机会
      <span>{{ lotteryInfo.userTimes }}</span
      >次
    </div>
    <GridTable
      v-if="LOTTERY_STYLE[parseInt(lotteryInfo.showType, 10) || 1].type === 'grid'"
      class="lottery-instant__grid"
      :loading="isLottering"
      :winId="winId"
      @start="lotteryCallback"
      @end="runEnd"
    ></GridTable>
    <PrizeWhell
      v-if="LOTTERY_STYLE[parseInt(lotteryInfo.showType, 10) || 2].type === 'wheel'"
      class="lottery-instant__whell"
      :loading="isLottering"
      :winId="winId"
      :info="lotteryInfo.prizeConfigs"
      @start="lotteryCallback"
      @end="runEnd"
    ></PrizeWhell>
    <Records class="lottery-instant__records"></Records>
    <Introduction class="lottery-instant__intro"></Introduction>
    <WinPopup
      :isShow="isShowWin"
      :info="winInfo"
      @changeVisible="changeIsShowWin"
      @winCallback="winCallback"
    ></WinPopup>
    <BindPhoneDialog :isShow="isShowBindPhone" @changeVisible="changeIsShowBindPhone"></BindPhoneDialog>
  </section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery } from '@/api/modules/lottery'
import { LOTTERY_STATE, LOTTERY_STYLE } from '@/utils/const'
import {
  Banner,
  CountdownBar,
  GridTable,
  PrizeWhell,
  Records,
  Introduction,
  WinPopup
} from '@/components/Lottery/Instant/index'
import BindPhoneDialog from '@/components/Common/BindPhoneDialog'

export default {
  name: 'MainNow',
  data() {
    return {
      LOTTERY_STYLE,
      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, // 引用类型
      winId: null, // 所中奖的id
      isShowWin: false, // 是否显示中奖提示
      isShowBindPhone: false, // 是否显示绑定手机号提示
      isLottering: false, // 动画run
      isBtnLoading: false, // 正在请求抽奖接口
      winInfo: {
        id: 0, // 中奖等级
        name: '谢谢参与' // 中奖等级
      } // 中奖信息
    }
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    state: {
      type: Number,
      default: 0
    },
    config: {
      type: Array,
      default: () => []
    },
    times: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(['uin', 'isLogin', 'lotteryInfo', 'isBindPhone'])
  },
  components: {
    Banner,
    CountdownBar,
    GridTable,
    PrizeWhell,
    Records,
    Introduction,
    WinPopup,
    BindPhoneDialog
  },
  methods: {
    ...mapActions(['jumpToLogin', 'updateInfo']),
    // 改变中奖模态框显示状态
    changeIsShowWin(val) {
      this.isShowWin = val
    },
    // 改变显示提示绑定手机号显示状态
    changeIsShowBindPhone(val) {
      this.isShowBindPhone = val
    },
    // 中奖后， "我知道了"回调
    winCallback() {
      this.changeIsShowWin(false)
      if (this.winInfo.id !== 0 && !this.isBindPhone) {
        this.changeIsShowBindPhone(true)
      }
    },
    // 抽奖回调
    lotteryCallback() {
      // 抽奖点击事件
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录',
          duration: 1500,
          onClose: () => {
            this.jumpToLogin()
          }
        })
        return
      }
      // 抽奖不在活动日期内
      if (LOTTERY_STATE[parseInt(this.lotteryInfo.status, 10)].sign !== 'start') {
        this.$toast(`抽奖活动${LOTTERY_STATE[parseInt(this.lotteryInfo.status, 10)].label}`)
        return
      }
      // 正在抽奖动画过程中或正在加载数据
      if (this.isLottering || this.isBtnLoading) {
        return
      }
      // 没有次数
      if (this.lotteryInfo.userTimes <= 0) {
        this.$toast('抽奖次数已用完')
        return
      }
      this.isBtnLoading = true
      const params = {
        id: this.id,
        playId: this.playId,
        uin: this.uin,
        type: this.stype || 'link',
        sourceId: this.sid || this.id
      }

      /* test-start */
      // const testArr = [1142,1143,1144,0]
      // this.winId = testArr[Math.floor((Math.random()*testArr.length))]
      // this.winInfo = {
      //   id: this.winId,
      //   id: 0,
      //   name: '谢谢参与'
      // };
      // this.isLottering = true;
      // if(true) return
      /* test-end */

      setLottery(params).then(res => {
        const { code, errorCode, errorMessage, data } = res
        if (code === 200 && errorCode === 0) {
          this.isLottering = true
          /* 更新用户抽奖次数 */
          let times = this.lotteryInfo.userTimes
          times--
          this.updateInfo({ userTimes: times })
          /* 开奖信息 */
          this.winId = data.id ? parseInt(data.id, 10) : 0
          this.winInfo = data
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    // 转盘停止回调
    runEnd() {
      this.winId = null
      this.isLottering = false
      this.isBtnLoading = false
      this.changeIsShowWin(true)
    }
  }
}
</script>
<style lang="less" scoped>
@bannerHeight: 150px; // banner部分高度
@countdownHeight: 44px; // 倒计时高度
@recordsHeight: 36px; // 按钮容器高度
.lottery-instant {
  position: relative;
  height: 100%;
  background-color: #fb3359;
  padding: 15px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  &__banner {
    height: @bannerHeight;
    line-height: @bannerHeight;
  }
  &__countdown {
    height: @countdownHeight;
    line-height: @countdownHeight;
    margin: 15px 0;
  }
  &__times {
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    color: #fdf3aa;
    > span {
      margin: 5px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
    }
  }
  &__grid {
    margin: 18px 0;
    width: 100%;
  }
  &__whell {
    margin: 18px 0;
    width: 100%;
  }
  &__records {
    height: @recordsHeight;
    margin: 0 0 18px;
  }
}
</style>
