<template>
  <div class="lottery-type">
    <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.scratch" class="lottery-type-scratch">
      <TypeScratch
        ref="typeScratchRef"
        :win-info="winInfo"
        :is-show-win="isShowWin"
        :is-show-bind-phone="isShowBindPhone"
        :is-loading="isLoading"
        :is-lottering="isLottering"
      />
    </div>
    <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.gashapon" class="lottery-type-gashapon">
      <TypeGashapon
        v-if="randomType === 1"
        ref="typeGashaponRef"
        :win-info="winInfo"
        :is-show-win="isShowWin"
        :is-show-bind-phone="isShowBindPhone"
        :is-loading="isLoading"
        :is-lottering="isLottering"
      />
      <TypeGashapon2
        v-if="randomType === 2"
        ref="typeGashaponRef"
        :win-info="winInfo"
        :is-show-win="isShowWin"
        :is-show-bind-phone="isShowBindPhone"
        :is-loading="isLoading"
        :is-lottering="isLottering"
      />
    </div>
    <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.guess" class="lottery-type-gashapon">
      <TypeGuess
        v-if="randomType === 1"
        ref="typeGuessRef"
        :win-info="winInfo"
        :is-show-win="isShowWin"
        :is-show-bind-phone="isShowBindPhone"
        :is-loading="isLoading"
        :is-lottering="isLottering"
      />
      <TypeGuess2
        v-if="randomType === 2"
        ref="typeGuessRef"
        :win-info="winInfo"
        :is-show-win="isShowWin"
        :is-show-bind-phone="isShowBindPhone"
        :is-loading="isLoading"
        :is-lottering="isLottering"
      />
    </div>
    <section
      v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid || +lotteryInfo.showType === LOTTERY_STYLE.wheel"
      class="lottery-instant"
    >
      <Banner class="lottery-instant__banner"></Banner>
      <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid" class="lottery-instant__layout-grid">
        <div class="lottery-instant__content-grid">
          <CountdownBar class="lottery-instant__countdown"></CountdownBar>
          <div class="lottery-instant__times">
            您还有
            <span>{{ lotteryInfo.userTimes }}<span>次</span></span
            >抽奖机会
          </div>
          <div class="lottery-instant__grid">
            <PrizeGrid
              ref="prizeGrid"
              :list="prizeList"
              :gap="5"
              :circle="4"
              active-class="lottery-instant__active"
              @onEnd="runEnd"
            >
              <template #item="{ rows }">
                <div class="lottery-instant__item-wrap">
                  <div class="lottery-instant__item">
                    <img
                      v-if="rows.id"
                      class="lottery-instant__item-img"
                      src="@/assets/images/lottery/gift.png"
                      alt=""
                    />
                    <img v-else class="lottery-instant__item-img" src="@/assets/images/lottery/free.png" alt="" />
                    <p class="lottery-instant__item-name">{{ rows.name }}</p>
                  </div>
                </div>
              </template>
              <template #button>
                <div
                  class="lottery-instant__button-wrap"
                  :class="`lottery-instant__button-wrap--${buttonClass}`"
                  @click="startLottery"
                >
                  <div class="lottery-instant__button">
                    <template v-if="isLottering">抽奖中</template>
                    <template v-else>
                      <p>立即</p>
                      <p>抽奖</p>
                    </template>
                  </div>
                </div>
              </template>
            </PrizeGrid>
            <span class="lottery-instant__grid-left-top"></span>
            <span class="lottery-instant__grid-left-bottom"></span>
            <span class="lottery-instant__grid-right-center"></span>
            <span class="lottery-instant__grid-right-bottom"></span>
          </div>
        </div>
      </div>
      <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.wheel" class="lottery-instant__layout-wheel">
        <div class="lottery-instant__content-wheel">
          <CountdownBar class="lottery-instant__countdown"></CountdownBar>
          <div class="lottery-instant__wheel" :class="{ 'lottery-instant__wheel--no-lightning': !isLottering }">
            <PrizeWheel
              ref="prizeWheel"
              :list="formattedPrizeList"
              :light-num="16"
              :container-border="24"
              @onEnd="runEnd"
            >
              <template #item="{ rows }">
                <div class="lottery-instant__prize">
                  <div class="lottery-instant__prize-text">
                    {{ rows.name }}
                  </div>
                  <div class="lottery-instant__prize-img">
                    <img v-if="rows.id" src="@/assets/images/lottery/gift.png" alt="" />
                    <img v-else src="@/assets/images/lottery/free.png" alt="" />
                  </div>
                </div>
              </template>
              <template #button>
                <div class="lottery-instant__wheel-button" @click="startLottery">抽奖</div>
              </template>
            </PrizeWheel>
            <span class="lottery-instant__grid-left-top"></span>
            <span class="lottery-instant__grid-left-bottom"></span>
            <span class="lottery-instant__grid-right-center"></span>
            <span class="lottery-instant__grid-right-bottom"></span>
          </div>
          <div class="lottery-instant__wheel-stage">
            <div class="lottery-instant__times">
              今日
              <span>{{ lotteryInfo.userTimes }}<span>次</span></span
              >抽奖机会
            </div>
          </div>
        </div>
      </div>
      <Records></Records>
      <Introduction class="lottery-instant__intro"></Introduction>
      <WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
      <BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
    </section>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery } from '@/api/modules/lottery'
import { LOTTERY_STATUS, LOTTERY_STATUS_TXT, LOTTERY_STYLE } from '@/utils/constant'
import { PrizeGrid, PrizeWheel } from 'lotteries'
import 'lotteries/lib/index.css'
import Bus from '@/utils/Bus'

export default {
  name: 'Main',
  components: {
    Banner: () => import('@/components/Lottery/Instant/Banner'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    Records: () => import('@/components/Lottery/Instant/Records'),
    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    PrizeGrid,
    PrizeWheel,
    TypeScratch: () => import('@/components/Lottery/Instant/type/TypeScratch'),
    TypeGashapon: () => import('@/components/Lottery/Instant/type/TypeGashapon'),
    TypeGashapon2: () => import('@/components/Lottery/Instant/type/TypeGashapon2'),
    TypeGuess: () => import('@/components/Lottery/Instant/type/TypeGuess'),
    TypeGuess2: () => import('@/components/Lottery/Instant/type/TypeGuess2')
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    state: {
      type: Number,
      default: 0
    },
    config: {
      type: Array,
      default: () => []
    },
    times: {
      type: Number,
      default: 0
    }
  },
  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, // 引用类型
      isShowWin: false, // 是否显示中奖提示
      isShowBindPhone: false, // 是否显示绑定手机号提示
      isLottering: false, // 动画执行中
      isLoading: false, // 正在请求抽奖接口
      winInfo: {
        id: 0, // 中奖等级
        name: '谢谢参与' // 中奖等级
      }, // 中奖信息
      randomType: Math.floor(Math.random() * (2 - 1 + 1)) + 1, // 部分抽奖类型随机进1或2
      formattedPrizeList: []
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      userInfo: 'users/userInfo',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    prizeList() {
      return this.lotteryInfo.prizeConfigs
    },
    prizeLen() {
      return this.prizeList.length
    },
    isNotStart() {
      // 抽奖不在活动日期内
      const { status } = this.lotteryInfo
      return +status !== LOTTERY_STATUS.start
    },
    buttonClass() {
      if (!this.lotteryInfo.userTimes || this.isNotStart) {
        return 'disabled'
      }
      if (this.isLottering) {
        return 'loading'
      }
      return ''
    },
  },
  watch: {
    prizeLen(nVal, oVal) {
      if (nVal === oVal) {
        return
      }
      if (this.nVal >= 6 && this.nVal % 2 === 0) {
        const freePrizes = new Array(2).fill({ id: 0, name: '谢谢参与' })
        this.formattedPrizeList = [...this.lotteryInfo.prizeConfigs, ...freePrizes]
      }
      this.formattedPrizeList = this.lotteryInfo.prizeConfigs
    }
  },
  mounted() {
    if (this.prizeLen >= 6 && this.prizeLen % 2 === 0) {
      const freePrizes = new Array(2).fill({ id: 0, name: '谢谢参与' })
      this.formattedPrizeList = [...this.lotteryInfo.prizeConfigs, ...freePrizes]
    }else {
      this.formattedPrizeList = this.lotteryInfo.prizeConfigs
    }
    // this.lotteryInfo.showType = 4
    Bus.$on('updateMain', data => {
      for (const [key, value] of Object.entries(data)) {
        if (key === 'func') {
          this[value]()
        } else {
          this[key] = value
        }
      }
    })
  },
  destroyed() {
    Bus.$off('updateMain')
  },
  methods: {
    ...mapActions({ updateInfo: 'lottery/updateInfo' }),
    // 中奖后， 关闭窗口回调
    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
          }
        })
      }
    },
    // 开始抽奖
    startLottery() {
      // 抽奖不在活动日期内
      if (this.isNotStart) {
        this.$toast(`抽奖活动${LOTTERY_STATUS_TXT[+this.lotteryInfo.status].label}`)
        return
      }
      // 正在抽奖动画过程中或正在加载数据
      if (this.isLottering || this.isLoading) {
        return
      }
      // 未登录
      if (!this.isLogin) {
        this.$toast({
          message: '请先登录',
          duration: 1500,
          onClose: () => {
            Bus.$emit('showLogin')
          }
        })
        return
      }
      // 次数不足
      if (this.lotteryInfo.userTimes <= 0) {
        this.$toast('抽奖次数已用完')
        return
      }
      // ===== test start =====
      // this.$refs.prizeWheel.start(0)
      // if(this.isLogin){
      //   return
      // }
      // ===== test end =====
      this.isLoading = true
      const params = {
        id: this.id,
        playId: this.playId,
        uin: this.uin,
        type: this.stype || 'link',
        sourceId: this.sid || this.id
      }
      setLottery(params)
        .then(res => {
          const { code, errorCode, errorMessage, data } = res
          if (code === 200 && errorCode === 0) {
            /* 更新用户抽奖次数 */
            let times = this.lotteryInfo.userTimes
            times--
            this.updateInfo({ userTimes: times })
            /* 执行动画 */
            if (+this.lotteryInfo.showType === LOTTERY_STYLE.grid) {
              this.$refs.prizeGrid.start(+data?.id || 0)
            }
            if (+this.lotteryInfo.showType === LOTTERY_STYLE.wheel) {
              this.$refs.prizeWheel.start(+data?.id || 0)
            }
            if (+this.lotteryInfo.showType === LOTTERY_STYLE.scratch) {
              this.$refs.typeScratchRef.drawAnimation()
            }
            if (+this.lotteryInfo.showType === LOTTERY_STYLE.gashapon) {
              this.$refs.typeGashaponRef.drawAnimation()
            }
            if (+this.lotteryInfo.showType === LOTTERY_STYLE.guess) {
              this.$refs.typeGuessRef.drawAnimation()
            }
            this.isLottering = true
            this.isLoading = false
            /* 开奖信息 */
            this.winInfo = data
          } else {
            this.isLoading = false
            this.$toast(errorMessage)
          }
          /* sentry 日志 */
          this.$sentry.setTag('lotteryId', this.id || 0)
          this.$sentry.setTag('sessionId', this.$route.query?.sessionId || 0)
          this.$sentry.setTag('uin', this.uin || 0)
          this.$sentry.setTag('userId', this.userInfo?.id || 0)
          this.$sentry.setExtra('requestData', params)
          this.$sentry.setExtra('responseData', res)
          this.$sentry.captureMessage('独立链接开奖-请求成功', 'info')
        })
        .catch((error) => {
          this.isLoading = false
          /* sentry 日志 */
          this.$sentry.setTag('lotteryId', this.id || 0)
          this.$sentry.setTag('sessionId', this.$route.query?.sessionId || 0)
          this.$sentry.setTag('uin', this.uin || 0)
          this.$sentry.setTag('userId', this.userInfo?.id || 0)
          this.$sentry.setExtra('requestData', params)
          this.$sentry.setExtra('errorMsg', error)
          this.$sentry.captureMessage('独立链接开奖-请求失败', 'error')
        })
    },
    // 转盘停止回调
    runEnd() {
      this.isLottering = false
      setTimeout(() => {
        this.isShowWin = true
      }, 400)
    }
  }
}
</script>
<style lang="less" scoped>
.lottery-type {
  height: 100%;
  &-scratch,
  &-gashapon,
  &-guess {
    height: 100%;
  }
}
.lottery-instant {
  position: relative;
  height: 100%;
  background-color: #ff6c2d;
  background-image: url('~@/assets/images/lottery/index_bg.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 18px 15px 22px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  &__layout-grid {
    position: relative;
    background-image: url('~@/assets/images/lottery/grid_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 1806 / 1488 * 100%;
  }
  &__content-grid {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 18px 0 25px;
    width: 100%;
    height: 100%;
  }
  &__countdown {
    padding-top: 18px;
  }
  &__times {
    margin: 65px 0 5px;
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #86432c;
    > span {
      margin: 5px;
      color: #f94d18;
      font-size: 16px;
      font-weight: 600;
      > span {
        font-size: 14px;
        font-weight: 500;
        margin-left: 2px;
      }
    }
  }
  &__grid {
    z-index: 1;
    width: 100%;
    padding-top: 288 / 314 * 100%;
    height: 0;
    position: relative;
    .prize-grid {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 12px;
    }
  }
  &__grid-left-top {
    position: absolute;
    background: url('~@/assets/images/lottery/grid_left_top.png') no-repeat;
    background-size: cover;
    background-position: center;
    left: 10px;
    top: -12px;
    width: 26px;
    height: 26px;
  }
  &__grid-left-bottom {
    position: absolute;
    background: url('~@/assets/images/lottery/grid_left_bottom.png') no-repeat;
    background-size: cover;
    background-position: center;
    left: -16px;
    bottom: 20%;
    width: 30px;
    height: 30px;
  }
  &__grid-right-center {
    z-index: -1;
    position: absolute;
    background: url('~@/assets/images/lottery/grid_right_center.png') no-repeat;
    background-size: cover;
    background-position: center;
    right: -17px;
    top: 40%;
    width: 26px;
    height: 26px;
  }
  &__grid-right-bottom {
    position: absolute;
    background: url('~@/assets/images/lottery/grid_right_bottom.png') no-repeat;
    background-size: cover;
    background-position: center;
    right: -4px;
    bottom: -4px;
    width: 30px;
    height: 30px;
  }
  &__active {
    .lottery-instant__item-wrap {
      background: linear-gradient(86deg, #e0c58c 0%, #f2d8ad 45%, #ddc38c 99%);
    }
    .lottery-instant__item {
      background: radial-gradient(circle, #ffffff 0%, #ffe6c3 100%);
    }
  }
  &__item-wrap {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    padding-bottom: 9px;
    background-color: #f4cec9;
  }
  &__item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff7f7;
    border-radius: 15px;
    user-select: none;
  }
  &__item-img {
    width: 30px;
    display: block;
    margin-bottom: 6px;
  }
  &__item-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0 10px;
    font-size: 12px;
  }
  &__button-wrap {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: #e89c48;
    padding-bottom: 9px;
    &--loading {
      background-color: #f6ab5a;
      .lottery-instant__button {
        background: repeating-linear-gradient(-50deg, #fff257, #fff257 6px, #fee938 6px, #fee938 9px);
      }
    }
    &--disabled {
      background-color: #ccc;
      .lottery-instant__button {
        background: repeating-linear-gradient(-50deg, #dcdcdc, #dcdcdc 6px, #d7d7d7 6px, #d7d7d7 9px);
        color: #b1b1b1;
      }
    }
  }
  &__button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 15px;
    color: #f94d18;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    background: repeating-linear-gradient(-50deg, #fff000, #fff000 6px, #fce500 6px, #fce500 9px);
    > p {
      font-weight: 600;
    }
  }

  &__prize-name {
    font-size: 12px;
    background-color: #fff;
    width: 100%;
    height: 100%;
  }
  &__whell {
    margin: 18px 0;
    width: 100%;
  }
  &__layout-wheel {
    width: 100%;
    .lottery-instant__countdown {
      padding: 0;
      margin: 12px 0;
    }
  }
  &__content-wheel {
    padding: 0 18px;
  }
  &__wheel {
    position: relative;
    .lottery-instant__grid-left-top {
      left: 20px;
      top: -2px;
    }
    .lottery-instant__grid-left-bottom {
      left: -22px;
      bottom: 15%;
    }
    .lottery-instant__grid-right-center {
      z-index: 0;
      right: 20px;
      top: 15px;
    }
    .lottery-instant__grid-right-bottom {
      right: -16px;
      bottom: 48px;
    }
    ::v-deep .prize-wheel__wrapper {
      background-color: #fb2b01;
      padding: 30px;
      box-shadow: inset 0px 5px 14px 1px #fff, inset 0px -4px 19px 8px #bb200f;
    }
    ::v-deep .prize-wheel__insider {
      background-color: #b03732;
      padding: 3px;
    }
    ::v-deep .prize-wheel__item-content {
      padding-top: 10px;
    }
    ::v-deep .prize-wheel__item-wrap {
      &:nth-child(odd) {
        background-color: #fefefe;
      }
      &:nth-child(even) {
        background-color: #f8d5d5;
      }
    }

    ::v-deep .prize-wheel__lights {
      &::before {
        width: 10px;
        height: 10px;
        top: 6px;
      }
      span {
        &:nth-of-type(even):before {
          animation: unset;
        }
      }
    }
    &--no-lightning {
      ::v-deep .prize-wheel__lights {
        span {
          &::before {
            width: 10px;
            height: 10px;
            top: 6px;
          }
          &:nth-of-type(even):before {
            animation: unset;
          }
          &:nth-of-type(odd):before {
            animation: unset;
            background: #fff000;
          }
        }
      }
    }
  }
  &__prize {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  &__prize-text {
    font-size: 12px;
    width: 100%;
    height: 15px;
    line-height: 15px;
    margin: 5px 0;
    padding: 0 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &__prize-img {
    img {
      display: block;
      width: 43px;
    }
  }
  &__wheel-button {
    width: 100%;
    height: 100%;
    background-image: url('~@/assets/images/lottery/wheel_point_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 14px;
    cursor: pointer;
  }
  &__wheel-stage {
    width: 100%;
    height: 0;
    padding-top: 536 / 986 * 100%;
    background-image: url('~@/assets/images/lottery/wheel_base_stage.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    top: -59px;
    .lottery-instant__times {
      padding: 0 18px;
      white-space: nowrap;
      text-align: center;
      height: 30px;
      line-height: 29px;
      border-radius: 50px;
      margin: 0;
      position: absolute;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      background-color: #c42202;
      color: #f3af9f;
      box-shadow: inset 0px -2px 3px -1px #fff;
      > span {
        color: #fff;
      }
    }
  }

  // 刮刮乐
  &__layout-scratch {
    position: relative;
    background-image: url('~@/assets/images/lottery/grid_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 1806 / 1488 * 100%;
  }
}
</style>
