<template>
  <view>
    <view class="bkg">
      <u-image width="100%" height="100vh" :src="require('@/static/home-bkg.jpg')"></u-image>
    </view>

    <view class="content">
      <view class="title">
        <u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="220rpx" :src="require('@/static/title.png')"></u-image>
      </view>

      <view class="notice">
        <u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false" :list="notices"></u-notice-bar>
      </view>

      <view class="raffle">
        <view class="raffle-bkg">
          <u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="680rpx" height="924rpx" :src="require('@/static/raffle-phone.png')"></u-image>
        </view>

        <view class="raffle-box">
          <view class="raffle-box__hello">
            尊敬的192用户，您好
          </view>

          <view class="raffle-box__times">
            剩余抽奖次数：<span>{{ usrInfo.score || 0 }}次</span>
          </view>

          <view class="raffle-box__turntable">
            <view v-for="(item,index) in prizeList" :key="index" class="raffle-box__turntable--item" :style="{ 'grid-area': 'shop'+(index+1) }">
              <view class="item-shop">
                <view class="item-shop__box" :style="{ 'background': index === flag ? '#eb5036' : '' }">
                  <view class="item-shop__box--img">
                    <u-image bg-color="transparent" mode="heightFix" height="84rpx" :src="item.image_file ? item.image_file.url : ''"></u-image>
                  </view>
                  <view class="item-shop__box--text" :style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
                </view>
              </view>
            </view>
            <view class="raffle-box__turntable--item" :style="{ 'grid-area': 'center' }">
              <view class="center-btn" @click="$u.throttle(draw)">
                <view></view>
              </view>
            </view>
          </view>

          <view class="raffle-box__tip">
            仅限中国广电（苏州地区用户）手机号参与活动
          </view>
        </view>
      </view>

      <view class="bottom">
        <u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
        <u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
      </view>
    </view>

    <popover :icon="getIcon" height="1128rpx" ref="popover">
      <view slot="box-content">
        <view v-if="popoverType === 1">
          <view class="box-text__title">活动规则</view>
          <view class="box-text__top">
            一、 参与方式及参与对象
          </view>
          <view class="box-text__content">
            本次活动奖品数量有限，仅限中国广电（苏州地区用户）手机号参与活动，输入其他手机号均无效。
          </view>
          <view class="box-text__top">
            二、 活动规则
          </view>
          <view class="box-text__content">
            1. 活动期间，每个号码每日可有三次抽奖机会
            2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。
            3. 每个手机号每天最多6次抽奖机会。
            4. 话费红包将在三个工作日内自动充值到参与抽奖的192手机号账户中。实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。
          </view>
        </view>

        <view v-if="popoverType === 2">
          <view class="box-text__title">谢谢参与</view>
          <u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),draw()">再来一次</u-button>
        </view>

        <view v-if="popoverType === 3">
          <view class="box-text__title">恭喜您获得{{ result.name }}</view>
          <view class="box-text__subtitle">请至个人中心查看</view>
          <view class="box-text__prize">
            <u-image style="display: flex;justify-content: center;" mode="heightFix" :height="300" :src="result.image_file ? result.image_file.url : ''"></u-image>
          </view>
          <view class="box-text__tip">
            型号请以实物为准
          </view>
        </view>

        <view v-if="popoverType === 4">
          <view class="box-text__title">抱歉</view>
          <view class="box-text__subtitle">没有机会了</view>
          <u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),popoverType = 5,$refs['popover'].show()">去做任务</u-button>
        </view>

        <view v-if="popoverType === 5">
          <view class="box-text__title-5">做任务增加抽奖机会</view>
          <view class="box-text__item-5" v-for="(item,index) in
          [
            {
              i: 1,
              v: '将活动分享给小伙伴',
              b: '去分享'
            },
            {
              i: 2,
              v: '关注江苏有线苏州分公司公众号或视频号',
              b: '去关注'
            },
            {
              i: 3,
              v: '下载“视界观”App',
              b: '去下载'
            }
          ]" :key="index">
            <view>{{ item.v }}</view>
            <u-button :custom-style="{
              background: '#FFD553',
              color: '#fff',
              fontSize: '28rpx',
              width: '166rpx',
              height: '56rpx'
            }" shape="circle" :hair-line="false" :ripple="true" @click="taskClick(item)">{{ item.b }}</u-button>
          </view>
        </view>
      </view>

      <view slot="content-bottom" class="content-bottom" v-if="popoverType === 3">
        <view class="content-bottom__title">奖品领取：</view>
        <view class="content-bottom__text">话费红包将在三个工作日内自动充值到参与抽奖的192手机号账户中。
          <br>实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。</view>
      </view>
    </popover>

    <transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
      <view class="share_cover" v-show="toShare" @click="toShare = false">
        <image src="/static/share.png" class="share_cover_arrow"></image>
        <view class="share_cover_word">
          请点击右上角将它发送给指定朋友或分享到朋友圈
        </view>
      </view>
    </transition>

    <transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
      <view class="share_cover" v-show="toShare" @click="toShare = false">
        <image src="/static/share.png" class="share_cover_arrow"></image>
        <view class="share_cover_word">
          请点击右上角将它发送给指定朋友或分享到朋友圈
        </view>
      </view>
    </transition>

    <transition name="qrcode-pop" enter-active-class="fade-in" leave-to-class="fade-out">
      <view class="qrcode-pop_cover" v-show="isShowQr" @click="isShowQr = false">
        <view v-if="taskId === 2" class="qrcode-pop_cover_img">
          <image src="/static/jscn-qrcode.jpeg"></image>
          <image src="/static/sph-qrcode.jpeg"></image>
        </view>
        <view v-else class="qrcode-pop_cover_img">
          <image src="/static/sjg-qrcode.png"></image>
        </view>
        <view class="qrcode-pop_cover_word">
          扫码{{ taskId === 2 ? '关注' : '下载' }}
        </view>
      </view>
    </transition>
  </view>
</template>

<script>
const jwx = require('jweixin-module')
import popover from "@/component/popover/index.vue";
export default {
  components: {
    popover
  },
  data() {
    return {
      taskId: '',
      isShowQr: false,
      toShare: false,
      popoverType: 1,//1为规则，2为未中奖，3中奖，4没有机会，5做任务
      flag: '',//当前奖品显示
      prizeList: [],
      usrInfo: {},
      notices: [],
      result: {},
    }
  },
  onLoad() {
    let url = location.href.split('#')[0]
    this.$u.api.share({
      url
    }).then(res => {
      jwx.config({
        debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
        appId: res.appId,
        jsApiList: res.jsApiList,
        nonceStr: res.nonceStr,
        signature: res.signature,
        timestamp: res.timestamp,
      })
      jwx.ready(() => {
        jwx.updateAppMessageShareData({
          title: '疯狂赏金-192用户话费红包大派送', // 分享标题
          desc: '疯狂赏金-192用户话费红包大派送',
          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
        });
        jwx.updateTimelineShareData({
          title: '疯狂赏金-192用户话费红包大派送', // 分享标题
          desc: '疯狂赏金-192用户话费红包大派送',
          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
        });
        jwx.onMenuShareAppMessage({
          title: '疯狂赏金-192用户话费红包大派送', // 分享标题
          desc: '疯狂赏金-192用户话费红包大派送',
          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
        });
        jwx.onMenuShareTimeline({
          title: '疯狂赏金-192用户话费红包大派送', // 分享标题
          desc: '疯狂赏金-192用户话费红包大派送',
          link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://h5.ali251.langye.net/storage/files/1686122729648030e9447aa.jpeg', // 分享图标
        });
      })
    })
  },
  methods: {
    toMe() {
      uni.navigateTo({
        url: '/pages/me/index'
      })
    },

    easeOut(t) {
      return 1 - Math.pow(1 - t, 3);
    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    async fetchRandomNumbers(count) {
      for (let i = 0; i < count; i++) {
        const t = this.easeOut(i / (count - 1));
        const delay = t * 400;
        await new Promise((resolve) => setTimeout(resolve, delay));
        this.flag = this.getRandomNumber(0, this.prizeList.length - 1);
      }
    },

    async getProducts() {
      const res = await this.$u.api.getPrize()
      let len = res.list.length
      let arr = res.list
      if(len < 8) {
        const diff = 8 - len;
        for (let i = 0; i < diff; i++) {
          const randomIndex = Math.floor(Math.random() * len);
          arr.push(arr[randomIndex]);
        }
      } else {
        arr = arr.slice(0, 8);
      }
      this.prizeList = arr
      this.usrInfo = res.user
      this.notices = res.draw_log_day?.filter(i => i.draw_prize?.name !== '谢谢参与')?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
    },
    async draw() {
      try{
        const res = await this.$u.api.draw()
        console.log(111,res)
        let resPrize = this.prizeList.find(i => i.id === res.id)
        this.result = resPrize
        await this.fetchRandomNumbers(15)
        this.flag = this.prizeList.indexOf(resPrize);

        if(resPrize.name === "谢谢参与") {
          this.popoverType = 2
          this.$refs['popover'].show();
        } else {
          this.popoverType = 3
          this.$refs['popover'].show();
        }

        await this.getProducts();
      }catch (err) {
        this.popoverType = 4
        this.$refs['popover'].show();
      }
    },

    taskClick(item) {
      this.taskId = item.i
      if(item.i === 1) {
        this.toShare = true
        return
      }
      if(item.i === 2) {
        this.isShowQr = true
      }
      if(item.i === 3) {
        this.isShowQr = true
      }
    }
  },
  computed: {
    getIcon() {
      switch (this.popoverType) {
        case 1: return 'smile';
        case 2: return 'sad';
        case 3: return 'laugh';
        case 4: return 'sad';
        case 5: return 'smile';
      }
    }
  },
  watch: {
    isShowQr(newVal) {
      if(!newVal) {
        this.$u.api.endTask({
          task_id: this.taskId
        }).then(res => {
          this.getProducts()
        })
      }
    },
    toShare(newVal) {
      if(!newVal) {
        this.$u.api.endTask({
          task_id: 1
        }).then(res => {
          this.getProducts()
        })
      }
    }
  },
  onShow() {
    this.getProducts()
  }
}
</script>

<style lang="scss">
.bkg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  min-height: 100vh;

  position: relative;

  & .title {

    margin-top: 5vh;
  }

  & .notice {
    background: rgba(254, 210, 141, 0.6);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3,46,63,0.45);
    border-radius: 28rpx;
    color: #fff;
    text-align: center;

    margin: .2vh 140rpx 0 140rpx;
  }

  .raffle {
    width: 680rpx;
    height: 924rpx;

    position: relative;
    margin: 2.4vh auto 0 auto;
    &-bkg {

      z-index: 1;
      position: absolute;
    }
    &-box {
      width: 100%;
      height: 100%;

      z-index: 2;
      position: relative;
      top: 0;

      &__hello {
        text-align: center;
        font-size: 38rpx;
        font-weight: normal;
        color: #FFFFFF;

        padding-top: 100rpx;
      }
      &__times {
        text-align: center;
        font-size: 46rpx;
        font-weight: normal;
        color: #FFFFFF;

        padding-top: 16rpx;

        & > span {
          color: #FCE534;
        }
      }
      &__turntable {
        height: 560rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 12rpx;
        grid-template-areas:
          "shop1 shop2 shop3"
          "shop4 center shop5"
          "shop6 shop7 shop8";

        margin-top: 40rpx;
        padding: 0 70rpx;

        &--item {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item-shop {
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, #fff 88%, #FECDC0);
          border-radius: 22rpx;

          &__box {
            width: calc(100% - 12rpx);
            height: calc(100% - 12rpx);
            border: 1rpx dashed #C5352B;
            border-radius: 22rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            margin: 6rpx;

            &--text {
              font-size: 24rpx;
              font-weight: normal;
              color: #E3473C;

              padding-top: 16rpx;
            }
          }
        }
        & .center-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 166rpx;
          height: 166rpx;
          background: linear-gradient(180deg, #FCE2C9, #FED491);
          box-shadow: 0px 8rpx 18px 0px rgba(155,22,40,0.35);
          border-radius: 50%;

          & > view {
            width: 142rpx;
            height: 142rpx;
            background: linear-gradient(180deg, #FCE2C9, #FED491);
            box-shadow: 0 4px 18rpx 0 rgba(155,22,40,0.35);
            border-radius: 50%;

            position: relative;
            &::after {
              width: 80rpx;
              content: "开始抽奖";
              font-size: 36rpx;
              font-weight: normal;
              color: #D8372C;
              text-align: center;
              text-shadow: 0 2rpx 0 #FCF4CA;

              transform: translate(-50%, -50%);
              position: absolute;
              top: 50%;
              left: 50%;
            }
          }
        }
      }
      &__tip {
        zoom: .9;
        font-size: 22rpx;
        text-align: center;
        color: #F9DAC1;

        position: absolute;
        left: 0;
        right: 0;
        bottom: 46rpx;
      }
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1.85vh;
  }
}


.box-text {
  &__title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;

  }

  &__subtitle {
    font-size: 30rpx;
    font-weight: 400;
    color: #545454;
    text-align: center;

    padding-bottom: 40rpx;
  }

  &__top {
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
    text-align: left;

    padding: 20rpx 0;
  }
  &__content {
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    text-align: left;
  }
  &__tip {
    font-size: 26rpx;
    font-weight: 400;
    color: #9a9a9a;
    text-align: center;

    margin-top: 20rpx;
  }

  &__title-5 {
    font-size: 30rpx;
    font-weight: 400;
    color: #9a9a9a;
    text-align: left;

    padding-bottom: 40rpx;
  }
  &__item-5 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20rpx;

    & > view {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      flex: 1;

      padding-right: 40rpx;
    }
  }
}
.content-bottom {

  padding: 50rpx 60rpx;

  &__title {
    font-size: 36rpx;
    color: #e5c592;
    font-weight: 500;
    text-shadow: 0 1rpx 0 #FCF4CA;
  }
  &__text {
    color: #e5c592;
    font-size: 28rpx;
    font-weight: 400;
    text-shadow: 0 1rpx 0 #FCF4CA;
  }
}

.share_cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100000;

  .share_cover_word {
    color: #FFFFFF;
    font-size: 48rpx;
    width: 60%;
    margin: 400rpx auto;
    text-align: center;
    line-height: 40px;

  }

  .share_cover_arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 300rpx;
    height: 400rpx;
  }
}
.qrcode-pop_cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100001;

  &_word {
    color: #FFFFFF;
    font-size: 48rpx;
    width: 60%;
    margin: 400rpx auto;
    text-align: center;
    line-height: 40px;
  }

  &_img {
    width: 100vw;
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    & > image {
      width: 300rpx;
      height: 300rpx;
    }
  }
}

.fade-in {
  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  animation: fade-out .8s ease-out both;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

</style>
