<template>
  <view>
    <block v-if="isPage">
      <view class="m-draw-box" v-if="outdated">
        <view class="m-title">
          <view class="m-title-main">{{ DrawInfo.activity_title }}</view>
          <view class="m-title-sub">{{ __("幸运大抽奖") }}</view>
          <view class="m-title-time"
            >{{ DrawInfo.activity_starttime }} ~
            {{ DrawInfo.activity_endtime }}</view
          >
        </view>
        <view class="m-table">
          <view
            v-for="(item, i) in PrizeList"
            :key="i"
            :class="['m-table-td', i + 1 == index ? 'select-table' : '']"
          >
            <image :src="item.awards_image"></image>
            <view class="price-text">{{ item.awards_name }}</view>
          </view>
          <view class="m-table-btn" @tap="LuckDraw">
            <image
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/activity/click.png"
            ></image>
          </view>
        </view>
        <view class="m-tip"
          >{{ __("您还有") }}<label>{{ RemainingCount }}{{ __("次") }}</label
          >{{ __("抽奖机会，快来试试手气") }}</view
        >
        <view class="m-model-outline">
          <view class="m-model yellow">{{ __("中奖名单") }}</view>
        </view>
        <block v-if="DrawInfo.winner_rows.items.length > 0">
          <swiper
            autoplay="true"
            interval="4000"
            duration="2000"
            class="m-luckylist"
            vertical="false"
            circular="true"
          >
            <swiper-item v-for="(t_item, i) in rows" :key="i">
              <block v-for="(item, j) in DrawInfo.winner_rows.items" :key="j">
                <view
                  v-if="j >= i * 3 && j <= (i + 1) * 3"
                  class="m-luckylist-item"
                >
                  • {{ item.user_nickname }}{{ __("抽中") }}
                  <label>{{ item.awards_name }}</label>
                </view>
              </block>
            </swiper-item>
          </swiper>
        </block>
        <view class="m-winner-nothing" v-else>{{
          __("暂无中奖名单数据")
        }}</view>
        <view class="m-model-outline">
          <view class="m-model blue">{{ __("活动规则") }}</view>
        </view>
        <view class="m-rule">
          <wxParse :content="DrawInfo.activity_rule.activity_intro + ''" />
        </view>
      </view>
      <view class="activity-outdated" v-else>
        <view class="m-nullcontent">
          <view class="m-nullpage-middle">
            <label class="iconfont icon-meiyougengduo"></label>
            <view class="m-null-tip">
              <text>{{ __("亲~您来晚了哦") }}</text>
              <text>{{ __("该抽奖活动已经失效啦") }}~</text>
            </view>
          </view>
        </view>
      </view>
    </block>

    <view class="u-tap-btn">
      <navigator url="/member/member/prize?category=1" class="u-go-home">
        <view class="iconfont icon-iconcanjiahuodong01"></view>
      </navigator>
      <view class="red-dot"></view>
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        class="u-go-home"
      >
        <view
          class="iconfont icon-shouyeshouye"
          style="font-size: 50rpx"
        ></view>
      </navigator>
    </view>
    <view class="mskprize" v-if="clickmsk" @tap="cancelprize">
      <view
        class="m-result-box bounceIn animated"
        catchtap="nothing"
        v-if="PrizeResult.index >= 0"
      >
        <view class="m-result-cancel" @tap="cancelprize">✕</view>

        <block v-if="PrizeResult.awards_enable">
          <view class="m-success-text">{{ __("恭喜你获得了") }}</view>
        </block>
        <block v-if="!PrizeResult.awards_enable">
          <view class="m-success-text">{{ __("未中奖") }}</view>
        </block>
        <image
          :src="PrizeList[PrizeResult.index].awards_image"
          class="m-success-img"
        />
        <view class="m-success-name">{{ PrizeResult.prize }}</view>
        <view class="m-success-name" v-if="false">{{
          PrizeResult.PrizeSendingMessage
        }}</view>
        <view class="m-success-bottom">
          <navigator
            url="/member/member/prize?category=1"
            class="succes-checkprice"
            >{{ __("查看奖品") }}</navigator
          >
          <view class="succes-continue" @tap="cancelprize">{{
            __("继续抽奖")
          }}</view>
        </view>
      </view>
      <view class="m-result-box wobble animated" catchtap="nothing" v-else>
        <view class="m-result-cancel" @tap="cancelprize">✕</view>
        <view class="m-failimg-bg">
          <image
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nothing.png"
            class="m-fail-img"
          />
        </view>
        <view class="m-fail-name">{{ DrawInfo.LosingDesc }}</view>
        <view class="m-fail-button" @tap="cancelprize">{{
          __("继续抽奖")
        }}</view>
      </view>
    </view>
    <view class="mskshare" v-if="clickshare" @tap="cancelshare">
      <!-- <image src="../../assets/share.png" class="share-oncemore" mode="widthFix"></image> -->
      <view class="share-text">
        <view>{{ __("你今天已经没有抽奖机会了") }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import $ from "../../helpers/util";

import dayCountdown from "../../components/day-countdown.vue";
import wxParse from "@/components/u-parse/u-parse.vue";

import { mapState, mapMutations } from "vuex";

export default {
  data: function () {
    return {
      options: {},
      index: -1,
      count: 13,
      timer: 0,
      speed: 20,
      times: 0,
      cycle: 50,
      prize: -1,
      click: false,
      clickmsk: false,
      clickshare: false,
      drawdesc: [],
      PrizeList: [],
      DrawInfo: {},
      RemainingCount: 0,
      PrizeResult: {},
      rows: [],
      Coupons: [],
      isCancelSuccess: true,
      isCancel: true,
      CouponAmount: 0,
      IsNewUser: 0,
      isPage: false,
      outdated: false,

      activity_id: false,
    };
  },
  components: {
    dayCountdown,
    wxParse,
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onLoad: function (options) {
    let that = this;

    uni.setNavigationBarTitle({
      title: this.__("幸运大抽奖"),
    });

    that.setData({
      activity_id: options.activity_id || 0,
      options: options,
    });

    $.isNull(this.userInfo)
      ? this.getUserInfo(function () {
          that.setData({
            user_is_new: this.userInfo.user_is_new,
            CouponAmount: this.userInfo.CouponAmount,
          }),
            that.initData();
        }, options.uid)
      : that.initData();
  },
  onShareAppMessage: function () {
    var e = this;
    return (
      this.setData({
        clickshare: false,
        click: false,
      }),
      {
        title: e.__("我已经中奖啦，你也赶紧来抽奖吧~"),
        desc: e.__("幸运大抽奖，快来参与吧~"),
        path: "/activity/luckydraw/detail?uid=" + this.userInfo.user_id,
        success: function (t) {
          e.sharefriend();
        },
      }
    );
  },
  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    sharefriend: function () {
      var e = {
          Category: 1,
          activity_id: this.activity_id,
        },
        t = this;
      $.request($.makeUrl(activityapi.ShareLuckyDraw, e), function (e) {
        e.Code == 0 &&
          e.Info != null &&
          (t.setData({
            RemainingCount: t.RemainingCount,
          }),
          t.initData());
      });
    },
    initData: function () {
      // 2砸金蛋，1大转盘
      var params = {
          activity_type: 1,
          activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
          activity_id: this.activity_id,
        },
        that = this;
      // 等级规则
      $.request({
        url: this.Config.URL.user.listsLottery,
        data: params,
        success: function (data, status, msg, code) {
          that.setData({
            isPage: true,
          });
          if (status == 200) {
            that.setData({
              DrawInfo: data,
              RemainingCount: data.remaining_count,
              outdated: data.outdated,
              PrizeList: data.items,
              activity_id: data.activity_id,
            });
            if (that.DrawInfo.winner_rows.items.length > 0) {
              var n =
                  that.DrawInfo.winner_rows.items.length % 5 > 0
                    ? parseInt(that.DrawInfo.winner_rows.items.length / 5 + 1)
                    : that.DrawInfo.winner_rows.items.length / 5,
                r = [];
              for (var i = 0; i < n; i++) {
                r.push(i);
              }
              that.setData({
                rows: r,
              });
            }

            $.isNull(data.activity_rule.activity_intro);
          } else {
            that.setData({
              outdated: false,
            });
          }
        },
      });
    },
    getPosition: function () {
      var params = {
        activity_id: this.activity_id,
      };
      var that = this;

      // 等级规则
      $.request({
        url: this.Config.URL.user.doLottery,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            if (typeof data !== "string") {
              that.setData({
                prize: data.index,
                PrizeResult: data,
              }),
                that.roll();
            } else {
              that.setData({
                prize: -1,
                times: 0,
                click: false,
              });

              that.roll();
            }
          } else {
            that.setData({
              prize: -1,
              times: 0,
              click: false,
            });

            that.roll();
          }
        },
      });
    },
    LuckDraw: function () {
      this.click ||
        (this.setData({
          speed: 100,
          click: true,
        }),
        this.RemainingCount > 0
          ? this.getPosition()
          : this.RemainingCount == 0 &&
            this.setData({
              clickshare: true,
            }));
    },
    luckRoll: function () {
      var e = this.index,
        t = this.count;
      (e += 1),
        e > t - 1 && (e = 0),
        this.setData({
          index: e,
        });
    },
    roll: function () {
      this.setData({
        times: this.times + 1,
      }),
        this.luckRoll();

      if (this.times > this.cycle + 10 && this.prize == this.index) {
        if (this.prize == this.index) {
          clearTimeout(this.timer),
            this.setData({
              prize: -1,
              times: 0,
              click: false,
            }),
            this.initData();
          var e = this;
          setTimeout(function () {
            e.setData({
              clickmsk: true,
            });
          }, 800);
        }
      } else {
        //未中奖的提示【异常】
        if (this.prize == -1) {
          clearTimeout(this.timer),
            this.setData({
              prize: -1,
              times: 0,
              click: false,
            }),
            this.initData();
          var e = this;
          setTimeout(function () {
            e.setData({
              clickmsk: true,
            });
          }, 800);
        } else {
          if (this.times < this.cycle) {
            this.setData({
              speed: this.speed - 10,
            });
          } else if (this.times == this.cycle) {
            var t = this.prize + 1;
            this.setData({
              prize: t,
            });
          } else {
            this.times > this.cycle + 10 &&
            ((this.prize == 0 && this.index == 7) ||
              this.prize == this.index + 1)
              ? this.setData({
                  speed: this.speed + 110,
                })
              : this.setData({
                  speed: this.speed + 20,
                });
          }
          this.speed < 40 &&
            this.setData({
              speed: this.speed + 40,
            });
          var e = this;
          this.timer = setTimeout(function () {
            e.roll();
          }, e.speed);
        }
      }

      return false;
    },
    cancelprize: function () {
      this.setData({
        clickmsk: false,
      });
    },
    cancelshare: function () {
      this.setData({
        clickshare: false,
      }),
        this.setData({
          prize: -1,
          times: 0,
          click: false,
        });
    },
    nothing: function () {},
    doReceive: function () {
      this.cancel(), this.userReceiveCoupon();
    },
    cancel: function () {
      this.setData({
        isCancel: false,
      });
    },
    cancelsuccess: function () {
      this.setData({
        isCancelSuccess: true,
      });
    },
    innertouch: function () {},
    userReceiveCoupon: function () {
      var params = {
        activity_id: this.activity_id,
        activity_type: 1,
        activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
      };

      var that = this;
      $.request({
        url: this.Config.URL.user.listsLotteryHistory,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.setData({
              isCancelSuccess: false,
              Coupons: data.items,
            });
          } else {
            $.alert(msg);
          }
        },
      });
    },
  },
};
</script>



<style lang="scss">
@import "../../styles/_variables";

page {
  background-color: #292438;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}

.activity-outdated {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.m-draw-box {
  height: 1940rpx;
  background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/luckdraw_bg.png)
    center no-repeat;
  background-size: cover;
  padding: 42rpx;
  text-align: center;
  color: white;
}

.m-title {
  margin-top: 40rpx;
}

.m-title-main {
  font-size: 80rpx;
  font-weight: bold;
  line-height: 90rpx;
  height: 90rpx;
  overflow: hidden;
}

.m-title-sub {
  font-size: 60rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.m-title-time {
  font-size: 22rpx;
  line-height: 40rpx;
}

/**抽奖盒子**/
.m-table {
  position: relative;
  width: 666rpx;
  height: 666rpx;
  margin-top: 30rpx;
}

.m-table-td {
  width: 144rpx;
  height: 144rpx;
  position: absolute;
  border-radius: 8rpx;
  background: white;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.price-text {
  color: gray;
  font-size: 24rpx;
  overflow: hidden;
  height: 28rpx;
  line-height: 28rpx;
}

.m-table-td image {
  width: 60%;
  height: 60%;
  box-sizing: border-box;
  margin: 10rpx;
}

.m-table-td:nth-child(2) {
  margin-left: 174rpx;
}

.m-table-td:nth-child(3) {
  margin-left: 348rpx;
}

.m-table-td:nth-child(4) {
  margin-left: 522rpx;
}

.m-table-td:nth-child(5) {
  margin-top: 174rpx;
  left: 522rpx;
}

.m-table-td:nth-child(6) {
  margin-top: 348rpx;
  left: 522rpx;
}

.m-table-td:nth-child(7) {
  margin-top: 522rpx;
  left: 522rpx;
  bottom: 0;
}

.m-table-td:nth-child(8) {
  margin-top: 522rpx;
  left: 348rpx;
  bottom: 0;
}

.m-table-td:nth-child(9) {
  margin-top: 522rpx;
  left: 174rpx;
  bottom: 0;
}

.m-table-td:nth-child(10) {
  margin-top: 522rpx;
  bottom: 0;
}

.m-table-td:nth-child(11) {
  margin-top: 348rpx;
}

.m-table-td:nth-child(12) {
  margin-top: 174rpx;
}

.m-table-btn image {
  width: 318rpx;
  height: 318rpx;
  border-radius: 20rpx;
  position: absolute;
  left: 174rpx;
  top: 174rpx;
  background: #ffdc44;
  padding: 50rpx;
  box-sizing: border-box;
  border: 10rpx;
  border-style: solid;
  border-top-color: #fff068;
  border-bottom-color: #ffc61f;
  border-left-color: #ffc61f;
  border-right-color: #ffdc44;
}

.select-table {
  background-color: #ffac33;
}

/**抽奖盒子**/
.m-tip {
  font-size: 24rpx;
  line-height: 90rpx;
}

.m-tip label {
  color: #ffdc44;
}

.m-model-outline {
  width: 320rpx;
  height: 65rpx;
  margin: 0 auto;
  border-bottom: 1px dotted white;
  margin-top: 70rpx;
  border-radius: 33rpx;
}

.m-model {
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.yellow {
  background: #ffac33;
}

.m-luckylist {
  font-size: 26rpx;
  text-align: left;
  margin-top: 40rpx;
  max-height: 240rpx;
  overflow: hidden;
}

.m-luckylist-item {
  line-height: 80rpx;
  border-top: 1rpx dotted white;
  box-sizing: border-box;
  height: 80rpx;
}

.m-luckylist-item label {
  color: #ffdc44;
}

.m-winner-nothing {
  text-align: left;
  font-size: 26rpx;
  padding: 30rpx 0;
}

.blue {
  background: #43c4e9;
}

.m-rule {
  font-size: 26rpx;
  line-height: 40rpx;
  text-align: left;
  margin-top: 30rpx;
}

.mskprize {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 5;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.mskshare {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 5;
  top: 0;
  left: 0;
}

.share-oncemore {
  width: 700rpx;
  margin: 0 auto;
}

.share-text {
  margin: 0 auto;
  font-size: 40rpx;
  line-height: 80rpx;
  color: white;
  text-align: center;
  margin-top: 45%;
}

.m-result-box {
  width: 500rpx;
  height: 600rpx;
  background: #db384b;
  position: relative;
  border-radius: 20rpx;
}

.m-result-cancel {
  position: absolute;
  right: 25rpx;
  top: 15rpx;
  font-size: 36rpx;
}

.m-success-text {
  line-height: 80rpx;
  margin-top: 50rpx;
  font-size: 30rpx;
}

.m-success-img {
  width: 250rpx;
  height: 250rpx;
  background: white;
  margin: 0 auto;
}

.m-success-name {
  color: #ffac33;
  font-size: 26rpx;
  line-height: 50rpx;
}

.m-success-bottom {
  position: absolute;
  bottom: 40rpx;
  line-height: 65rpx;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  width: 100%;
}

.succes-continue {
  height: 65rpx;
  width: 200rpx;
  background: #ffca3a;
  display: inline-block;
  border-radius: 5rpx;
}

.succes-checkprice {
  height: 65rpx;
  width: 200rpx;
  background: white;
  color: black;
  display: inline-block;
  border-radius: 5rpx;
  margin-right: 30rpx;
}

.m-failimg-bg {
  width: 350rpx;
  height: 350rpx;
  border-radius: 175rpx;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 40rpx auto 20rpx;
  padding: 50rpx;
  box-sizing: border-box;
}

.m-fail-img {
  width: 100%;
  height: 100%;
  border-radius: 150rpx;
  background-color: rgba(255, 255, 255, 0.2);
}

.m-fail-name {
  font-size: 26rpx;
  line-height: 50rpx;
}

.m-fail-button {
  width: 300rpx;
  height: 65rpx;
  line-height: 65rpx;
  position: absolute;
  bottom: 40rpx;
  background: #ffca3a;
  border-radius: 5rpx;
  font-size: 28rpx;
  left: 100rpx;
}

.red-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background: $default-skin-bg;
  position: fixed;
  bottom: 220rpx;
  right: 20rpx;
  z-index: 5;
}

.u-tap-btn {
  position: fixed;
  right: 20rpx;
  bottom: 40rpx;
}

.u-go-home {
  border-radius: 100%;
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #eee;
  font-size: 20rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
  z-index: 2;
  opacity: 0.8;
  line-height: 80rpx;
  margin-bottom: 20rpx;
}

.u-go-home .iconfont {
  font-size: 36rpx;
}
</style>