<template>
  <section 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="prizeWhell" :list="formatedPrizeList" :light-num="16" :container-border="24" @onEnd="runEnd">
            <template #item="{ rows }">
              <div class="lottery-instant__prize">
                <div class="lottery-instant__prize-text">
                  {{ rows.name  }}</p>
                </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" @winCallback="winCallback"></WinPopup>
    <BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
  </section>
</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'

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
  },
  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: '谢谢参与' // 中奖等级
      } // 中奖信息
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    prizeList() {
      return this.lotteryInfo.prizeConfigs
    },
    formatedPrizeList() {
      const prizeLen = this.lotteryInfo?.prizeConfigs?.length || 0
      if (prizeLen >= 6 && prizeLen % 2 === 0) {
        const freePrizes = new Array(2).fill({ id: 0, name: '谢谢参与' })
        return [...this.lotteryInfo.prizeConfigs, ...freePrizes]
      }
      return this.lotteryInfo.prizeConfigs
    },
    isNotStart() {
      // 抽奖不在活动日期内
      const { status } = this.lotteryInfo
      return +status !== LOTTERY_STATUS.start
    },
    buttonClass() {
      if (!this.lotteryInfo.userTimes || this.isNotStart) {
        return 'disbaled'
      }
      if (this.isLottering) {
        return 'loading'
      }
      return ''
    }
  },

  methods: {
    ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
    // 中奖后， "我知道了"回调
    winCallback() {
      this.isShowWin = false
      if (this.winInfo.id !== 0 && !this.isBindPhone) {
        this.isShowBindPhone = true
      }
    },
    // 开始抽奖
    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: () => {
            this.jumpToLogin()
          }
        })
        return
      }
      // 次数不足
      if (this.lotteryInfo.userTimes <= 0) {
        this.$toast('抽奖次数已用完')
        return
      }
      // this.$refs.prizeGrid.start(0)
      // if(this.isLogin){
      //   return
      // }
      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 })
            /* 执行动画 */
            this.$refs?.prizeGrid && this.$refs.prizeGrid.start(+data?.id || 0)
            this.$refs?.prizeWhell && this.$refs.prizeWhell.start(+data?.id || 0)
            this.isLottering = true
            this.isLoading = false
            /* 开奖信息 */
            this.winInfo = data
          } else {
            this.isLoading = false
            this.$toast(errorMessage)
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    // 转盘停止回调
    runEnd() {
      this.isLottering = false
      setTimeout(() => {
        this.isShowWin = true
      }, 400)
    }
  }
}
</script>
<style lang="less" scoped>
.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);
      }
    }
    &--disbaled {
      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;
      }
    }
  }
}
</style>
