<template>
  <div class="main-timing">
    <LuckyBag
      v-if="lotteryInfo.showType === 6 || lotteryInfo.showType === 1"
      :is-mini="true"
      :is-btn-loading="isBtnLoading"
      :is-show-win="isShowWin"
      :is-show-online-tip="isShowOnlineTip"
      :is-show-bind-phone="isShowBindPhone"
      :win-info="winInfo"
      :is-show-intro="isShowIntro"
      class="bgluckybag"
      @lotteryCallback="lotteryCallback"
      @goRule="goRule"
    ></LuckyBag>
    <Treasure
      v-if="lotteryInfo.showType === 7"
      :is-mini="true"
      :is-btn-loading="isBtnLoading"
      :is-show-win="isShowWin"
      :is-show-online-tip="isShowOnlineTip"
      :is-show-bind-phone="isShowBindPhone"
      :win-info="winInfo"
      :is-show-intro="isShowIntro"
      class="bgtreasure"
      @lotteryCallback="lotteryCallback"
      @goRule="goRule"
    ></Treasure>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus'

export default {
  components: {
    LuckyBag: () => import('@/components/Lottery/Timing/type/LuckyBag'),
    Treasure: () => import('@/components/Lottery/Timing/type/Treasure'),
  },
  data() {
    return {
      isBtnLoading: false,
      id: this.$route.query.id || '',
      stype: this.$route.query.stype || null, // 引用类型
      playId: this.$route.query.sessionId,
      isShowWin: false,
      isShowOnlineTip: false,
      isShowBindPhone: false, // 是否显示绑定手机号提示
      winInfo: this.winInfoTranslator(),
      isShowIntro: false
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone',
      userInfo: 'users/userInfo',
      premise: 'lottery/premise'
    }),
    backUrl() {
      return this.$route.query.backUrl || ''
    },
    config() {
      const list =
        typeof this.lotteryInfo.prizeConfigs === 'object'
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
    }
  },
  // watch: {
  //   'lotteryInfo.status': {
  //     handler(newVal, oldVal) {
  //       if (newVal === 2 && oldVal === 2 && this.lotteryInfo.isDraw === 1) {
  //         this.loadWinInfo()
  //       }
  //     },
  //     deep: true
  //   }
  // },
  mounted() {
    this.eventHubInit()
    Bus.$emit('initDeal', '#db0000', '#ffdccb')
    // this.loadWinInfo()
    // 抽奖结果通知
    Bus.$on('LotteryResult', data => {
      if (data.userId === this.userInfo.id && data.isPrize === 1) {
        this.updateInfo({
          isWin: 1
        })
      }
      if (this.lotteryInfo.isDraw === 1) {
        this.loadWinInfo()
      }
    })
  },
  methods: {
    ...mapActions({ updateInfo: 'lottery/updateInfo' }),
    eventHubInit() {
      Bus.$on('updateMain', data => {
        for (const [key, value] of Object.entries(data)) {
          if (key === 'func') {
            this[value]()
          } else {
            this[key] = value
          }
        }
      })
    },
    // 中奖后， 关闭窗口回调
    winCloseCallback() {
      this.isShowWin = false
      if (this.winInfo.id !== 0 && !this.isBindPhone) {
        this.isShowBindPhone = true
      }
    },
    // 中奖后， "查看奖品详情"回调
    winCallback() {
      this.isShowWin = false
      if (this.winInfo.id !== 0) {
        this.$router.push({
          path: '/recordDetail',
          query: {
            tempId: this.winInfo.tempId,
            uin: this.uin
          }
        })
      }
    },
    // 抽奖回调
    lotteryCallback() {
      // 抽奖点击事件
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录',
          duration: 1500,
          onClose: () => {
            Bus.$emit('showLogin')
          }
        })
      } else if(!this.premise) {
        this.$toast({
          message: '请先填写信息',
          duration: 1500,
          onClose: () => {
            Bus.$emit('showConfig')
          }
        })
        return
      } else if (this.lotteryInfo.status !== 1) {
        // 抽奖不在活动日期内
      } else if (this.isBtnLoading) {
        // 正在抽奖动画过程中或正在加载数据
      } else if (this.lotteryInfo.userTimes <= 0) {
        this.$toast('抽奖次数已用完')
      } else {
        this.isBtnLoading = true
        const params = {
          id: this.id,
          uin: this.uin,
          playId: this.playId,
          type: this.stype || 'link',
          sourceId: this.sid || this.id
        }
        setLottery(params).then(res => {
          const { code, errorCode, errorMessage } = res
          if (code === 200 && errorCode === 0) {
            let times = this.lotteryInfo.userTimes
            times--
            let num = this.lotteryInfo.activeNum
            num++
            this.updateInfo({
              userTimes: times,
              isDraw: 1,
              activeNum: num
            })
            this.$toast.success('参与成功')
            if (this.lotteryInfo.needOnline === 1) {
              this.isShowOnlineTip = true
            }
            this.isBtnLoading = false
          } else {
            this.$toast.fail(errorMessage)
            this.isBtnLoading = false
          }
        })
      }
    },
    loadWinInfo() {
      getUserRecord({
        id: this.$route?.query?.id || '',
        uin: this.$route?.query?.uin || '',
        nowPlay: this.lotteryInfo.nowPlay
      }).then(res => {
        const { code, errorCode, errorMessage, data } = res
        if (code === 200 && errorCode === 0) {
          this.winInfo = this.winInfoTranslator(data)
          // console.log(this.winInfo);
          this.isShowWin = true
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    winInfoTranslator(data) {
      return {
        ...data,
        id: data?.prizeId || '',
        name: data?.prizeName || ''
      }
    },
    goRule() {
      this.isShowIntro = true
    }
  }
}
</script>
<style lang="less" scoped>
.main-timing {
  height: 100%;
  position: relative;
}
</style>
