<template>
  <div class="mainbg">
    <p class="drawscorep">抽盒次数：{{chance}}</p>
    <button class="myprizebtn" @click="queryWinList"></button>
    <button :class="chance<=0?'nodrawbtn':'drawbtn'" @click="drawstart"></button>
    <div class="taskbg" @click="opentask">
      <div class="taskp"></div>
      <img
        src="//img10.360buyimg.com/imgzone/jfs/t1/193813/29/31985/1221/639a90a1Ee2954bdc/aed0265c2120ed8a.png"
      />
    </div>
    <div class="prizeList">
      <div class="swiper-container swiper-no-swiping" ref="swiperRef">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in prizeList"
            :key="index"
          >
            <img
              :src="item.imgUrl"
              :style="{ width: item.sw + 'rem', height: item.sh + 'rem' }"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <button class="rulebtn" @click="openrule">活动规则 ></button>
    <button class="drawjlbtn" @click="opendrawscore">抽盒记录 ></button>
    <rulePop v-show="isShowRulePop" @closeDiv="closeDiv" />
	<prizePop v-show="isShowPrizePop" @closeDiv="closeDiv" @toaddress="toaddress" :isShowPrizePop="isShowPrizePop" :myprizeList="myprizeList" :isShowNoData="isShowNoData" />
	<setSharePop v-show="isShowSetSharePop" @closeDiv="closeDiv" @toOpenCard="toOpenCard" :shareImg="shareImg" />
	<addressPop v-if="isAddressPop" @closeDiv="closeDiv" @closePop="closePop" :addressInfo="addressInfo"/>
    <addresswin-pop v-show="isAddressWinShow" @closeDiv="closeDiv" />
	<opencard-pop v-show="isOpenCardShow" @toOpenCard="toOpenCard" @closeDiv="closeDiv"/>
	<drawscore-pop v-show="isDrawScoreShow" :drawscoreImg="drawscoreImg" :drawRecordInfo="drawRecordInfo" @closeDiv="closeDiv"/>
	<task-pop v-show="isTaskShow" @toOpenCard="toOpenCard" @savechance="savechance" @savesignnum="savesignnum" :activityuid="activityuid" :points="points" :openCardStatus="openCardStatus" :signNum="signNum" @closeDiv="closeDiv"/>
	<drawopenhe-pop v-show="isDrawShow" :drawImg="drawImg" />
	<draw-pop v-show="isOpenDrawShow" :drawPrize="drawPrize" @toaddress="toaddress" @drawstart="drawstart" @closeDiv="closeDiv"/>
  </div>
</template>
<script>
import taskPop from "../components/taskPop.vue";
import rulePop from "../components/rulePop.vue";
import prizePop from "../components/prize.vue";
import setSharePop from "../components/setSharePop.vue";
import addressPop from "../components/Address.vue";
import addresswinPop from "../components/addressWinPop.vue";
import opencardPop from "../components/opencardPop.vue";
import drawscorePop from "../components/drawscorePop.vue";
import drawopenhePop from "../components/drawopenhe.vue";
import drawPop from "../components/drawPop.vue";
import {
  getUrlQueryValueByKey,
  goToActive,
  goToShopPage,
  goToSkuPage,
} from "../../../../util/tools";
import apis from "../api/api.js";
let { activity,activityShare,draw,getMyPrize,myPrizeRecord, check, saveWin, uploadImage, getTaskList, task, saveLog } =
  apis;
import {dateChangeYYYY} from "../utils/index";
import Swiper, { Autoplay } from "swiper";
Swiper.use([Autoplay]);
import "swiper/swiper-bundle.css";
var newimageList = new Array();
export default {
  components: {
    taskPop,
    rulePop,
	prizePop,
	setSharePop,
	addressPop,
	addresswinPop,
	opencardPop,
	drawscorePop,
	drawopenhePop,
	drawPop,
  },
  data() {
    return {
		hasEnd:false,
		signNum:0,
		isTaskShow:false,
		drawRecordInfo:[],
		drawscoreImg:'',
		isDrawScoreShow:false,
		isOpenCardShow:false,
      isAddressWinShow:false,
      isShowRulePop: false,
	  isShowPrizePop:false,
	  isShowSetSharePop:false,
	  isAddressPop:false,
	  shareImg:'',
	  chance:0,
	  addressInfo:[],
	  myprizeList:[],
	  isShowNoData:false,
	  openCardStatus:2,
	  points:0,
	  activityuid:'',
      prizeList: [
        {
          sw: 0.88,
          sh: 1.95,
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/21347/31/19734/8053/639a9e09E43cabd69/4058726ec1144b7a.png",
        },
        {
          sw: 1.49,
          sh: 1.57,
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/107266/37/33712/18953/639a9e08Ec18d0ed3/d73974909994115f.png",
        },
        {
          sw: 1.49,
          sh: 1.55,
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/219890/16/20580/18663/639a9e08E84881dd1/10780d2919afc32b.png",
        },
        {
          sw: 1.24,
          sh: 1.39,
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/154591/10/27343/19504/639d5fa0E0aa9ba04/f60dd0c112d33980.png",
        },
        {
          sw: 1.24,
          sh: 1.39,
          imgUrl:
            "//img10.360buyimg.com/imgzone/jfs/t1/166199/34/33011/19619/639d5fa0E3725cad5/0818471f2f2a10fb.png",
        },
      ],
	  imageList:[
		{
			name:'未中奖',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/90699/2/31843/2704838/63ad104dFb618dceb/19d3f32398f6716f.gif',	//1334
			// imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/31486/20/20675/2794705/63a2b8bcE9b019d9d/7e2a58964a48b3ca.gif',	//1700
		},{
			name:'鎏金瓶',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/153868/32/34301/3119437/63ae5b6bF316fb04a/9f0fac480627c248.gif',
		},{
			name:'888京豆',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/82154/12/23114/2674124/63ae5b6bFe7510d44/66c70f81c49b1174.gif',
		},{
			name:'888积分',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/191481/9/31283/2549625/63ae5b6aFe95cf7fa/fb25661898f33999.gif',
		},{
			name:'88积分',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/30141/18/19514/2627568/63ae5b6aF7c1762de/b83474bef8b1ef24.gif',
		},{
			name:'666京豆',
			imgUrl:'//img10.360buyimg.com/imgzone/jfs/t1/179929/34/29053/2775942/63ae5b6aF538cdeb3/3077bbdc313e5a30.gif',
		},
	  ],
	  isDrawDoClick:false,
	  isDrawShow:false,
	  drawImg:'',
	  isOpenDrawShow:false,
	  drawPrize:[],
	  activityType:2,
    };
  },
  mounted() {
    this.initswiper();
	this.imgfirstsave();
    this.initData(); //主接口
  },
  methods: {
    initData() {
      var url = sessionStorage.getItem('type');
		if(url != null){
			this.activityType = parseInt(url);
		}else{
			this.activityType = 2;
		}
	  activityShare(this.$route.query.activityId,this.activityType,(data)=>{
		if (data.resp_code == "50002") {
          this.show = true;
          this.popData = {
            popUpTilte: "activityStatus",
            popUptext: true,
            prizeFail: false,
            text: "活动已结束",
            prizeFailBut: 4,
            popUpHeight: "4.36rem",
          };
		  this.hasEnd = true;
          return;
        } else if (data.resp_code == "50003") {
          this.show = true;
          this.popData = {
            popUpTilte: "activityStatus",
            prizeFail: false,
            popUptext: true,
            text: "活动未开始",
            prizeFailBut: 4,
            popUpHeight: "4.36rem",
          };
          return;
        }
        sessionStorage.setItem("pin", data.data.pin);
        //埋点访问次数
		this.saveLogNew('pv');
		this.signNum = data.data.signNum;
		this.chance = data.data.chance;
		this.points = data.data.points;
		this.activityuid = data.data.uid;
		this.openCardStatus = data.data.openCardStatus;
		switch(data.data.shareStatus){
			case -1:
				this.saveLogNew('成为会员才能助力');
				this.saveLogNew('参与用户埋点');
				this.shareImg = '//img10.360buyimg.com/imgzone/jfs/t1/212822/24/24114/78208/63aa86d2Fec6e5904/d85765a5750a4e81.png';
				this.isShowSetSharePop = true;
				break;
			case -2:
				this.saveLogNew('已是会员不能助力');
				this.shareImg = '//img10.360buyimg.com/imgzone/jfs/t1/205560/10/29395/72267/63aa86d2F7f96e471/c41d088f71c04ce0.png';
				this.isShowSetSharePop = true;
				break;
			case 1:
				this.shareImg = '//img10.360buyimg.com/imgzone/jfs/t1/168405/39/34079/75648/63aa86d2Fdcf98d11/2f4f3d920c2cb89c.png';
				this.isShowSetSharePop = true;
				break;
			case 2:
				this.saveLogNew('只能助力一次');
				this.shareImg = '//img10.360buyimg.com/imgzone/jfs/t1/205560/10/29395/72267/63aa86d2F7f96e471/c41d088f71c04ce0.png';
				this.isShowSetSharePop = true;
				break;
			case 3:
				this.saveLogNew('今日助力已达上限');
				this.shareImg = '//img10.360buyimg.com/imgzone/jfs/t1/144615/17/30169/72889/63aa86d2Fdeff87c6/14ff680b82682039.png';
				this.isShowSetSharePop = true;
				break;
		}
		sessionStorage.removeItem('type');
		var url =window.location.href;
		if(url.includes('shareUserId')){
			if(url.split('shareUserId=')[1]!=data.data.uid){
				this.saveLogNew('分享链接进入');
			}
		}
	  })
    },
	// 获取我的奖品列表
	queryWinList() {
		if(this.hasEnd){
			this.$toast('活动已结束');
			return;
		}
		if(this.openCardStatus == 2){
			this.isOpenCardShow = true;
			return;
		}
		
		// this.saveLogNew('首页按钮埋点');
		getMyPrize(data => {
			// data.data[1].rewardType = 4;
			// data.data[1].rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/152586/1/27013/42064/639d6c0cE69ccfe17/66990bf9bf3ffc71.png';
			// data.data[2].rewardType = 1;
			// data.data[2].rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/158875/12/33136/56565/639d6f0bE04667706/d7f304bd8560a03a.png';
			// data.data = [];
			this.myprizeList = data.data;
			this.myprizeList.forEach(item => {
				item.time = dateChangeYYYY(item.createTime, 1);
			});
			if(data.data.length > 0){
					this.isShowNoData = true;
			}else{
					this.isShowNoData = false;
			}
			this.isShowPrizePop = true;
		});
	},
	// 封装埋点
	saveLogNew(str){
		//埋点访问次数
		let param1 = {
			eleId: str,
		};
		saveLog(param1, (callbackData) => {});
	},
	// 开卡
    toOpenCard(str) {
		this.saveLogNew(str);
		let url = "https://shopmember.m.jd.com/shopcard?venderId=1000002744&channel=401";	//羽西店铺
		// let url = "https://shopmember.m.jd.com/shopcard/?venderId=739130&shopId=734259&channel=8019999";	//长泽店铺
		if(str == '助力开卡'){
			sessionStorage.setItem('type',1);
			url += "&returnUrl=" + encodeURIComponent(location.href);
		}else if(str == '任务开卡'){
			sessionStorage.setItem('type',3);
			url += "&returnUrl=" + encodeURIComponent(location.href);
		}else{
			sessionStorage.setItem('type',2);
			url += "&returnUrl=" + encodeURIComponent(location.href);
		}
		goToActive(url);
    },
	// 打开任务弹窗
	opentask(){
		if(this.hasEnd){
			this.$toast('活动已结束');
			return;
		}
		if(this.openCardStatus == 2){
			this.isOpenCardShow = true;
			return;
		}
		
		this.saveLogNew('参与用户埋点');
		this.isTaskShow = true;
	},
	// 打开活动规则弹窗
	openrule(){
		if(this.hasEnd){
			this.$toast('活动已结束');
			return;
		}
		if(this.openCardStatus == 2){
			this.isOpenCardShow = true;
			return;
		}
		
		// this.saveLogNew('首页按钮埋点');
		this.isShowRulePop = true;
	},
	// 打开抽盒记录弹窗
	opendrawscore(){
		if(this.hasEnd){
			this.$toast('活动已结束');
			return;
		}
		if(this.openCardStatus == 2){
			this.isOpenCardShow = true;
			return;
		}
		// this.saveLogNew('首页按钮埋点');
		myPrizeRecord((data)=>{
			if(data.data != undefined){
				this.drawRecordInfo = data.data;
				this.drawscoreImg = '//img10.360buyimg.com/imgzone/jfs/t1/198736/30/29800/66929/63a14633Efff7c83c/b2f62b391d9eabda.png';
			}else{
				this.drawRecordInfo = [];
				this.drawscoreImg = '//img10.360buyimg.com/imgzone/jfs/t1/89390/9/35543/43119/63a14639Ee49b0fb7/dff60f86f332785e.png';
			}
		})
		this.isDrawScoreShow = true;
	},
	imgfirstsave(){
		this.imageList.forEach((t,i)=>{
			newimageList[i] = new Image();
			newimageList[i].src = t.imgUrl;
		})
	},
	// 抽奖
	drawstart(){
		if(this.hasEnd){
			this.$toast('活动已结束');
			return;
		}
		if(this.openCardStatus == 2){
			this.isOpenCardShow = true;
			return;
		}
		if(this.chance<=0){
			this.$toast('抽奖机会不足');
			return;
		}
		if(this.isDrawDoClick) return;
		this.isDrawDoClick = true;
		this.isDrawShow = false;
		this.isOpenDrawShow = false;
		this.saveLogNew('参与用户埋点');
		draw((data)=>{
			// data['content'] = '*领取成功后，可在我的【京豆】中查看';
			// data['rewardImg'] = '//img10.360buyimg.com/imgzone/jfs/t1/168272/23/33783/55878/63ac0df7F5e49169b/c0a3ca5eeccab965.png';
			// data['rewardType'] = 99;
			// data['rewardName'] = '888京豆';
			// data['sw'] = '2.3';
			// data['sh'] = '2.7';
			this.chance--;
			if(data.resp_code == 0 && JSON.stringify(data.data) != '{}'){
				this.drawPrize = data.data.prize;
				switch(data.data.pos){
					case 99:
						this.drawPrize.rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/184722/36/32319/28319/63ac0df6F107706ac/5994e00cb7236c49.png';
						this.drawPrize['content'] = '*领取成功后，可在羽西京东自营旗舰店【品牌会员】中查看';
						this.drawPrize['sw'] = '2.2';
						this.drawPrize['sh'] = '2.33';
						this.drawImg = newimageList[4].src;
						this.isDrawShow = true;
						break;
					case 1:
						this.drawPrize.rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/97957/15/35198/16213/63ac0df7F969806b5/234df0520fedd61c.png';
						this.drawPrize['content'] = '*奖品将在活动结束后15个内工作日发货';
						this.drawPrize['sw'] = '1.58';
						this.drawPrize['sh'] = '3.59';
						this.drawImg = newimageList[1].src;
						this.isDrawShow = true;
						break;
					case 2:
						this.drawPrize.rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/214295/32/24686/28490/63ac0df6Faf60c18a/ccd9a89229395af1.png';
						this.drawPrize['content'] = '*领取成功后，可在羽西京东自营旗舰店【品牌会员】中查看';
						this.drawPrize['sw'] = '2.2';
						this.drawPrize['sh'] = '2.33';
						this.drawImg = newimageList[3].src;
						this.isDrawShow = true;
						break;
					case 3:
						this.drawPrize.rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/168272/23/33783/55878/63ac0df7F5e49169b/c0a3ca5eeccab965.png';
						this.drawPrize['content'] = '*领取成功后，可在我的【京豆】中查看';
						this.drawPrize['sw'] = '2.3';
						this.drawPrize['sh'] = '2.7';
						this.drawImg = newimageList[2].src;
						this.isDrawShow = true;
						break;
					case 4:
						this.drawPrize.rewardImg = '//img10.360buyimg.com/imgzone/jfs/t1/60921/19/18959/53917/63ac0df6F9054278f/622abce6c76be5ff.png';
						this.drawPrize['content'] = '*领取成功后，可在我的【京豆】中查看';
						this.drawPrize['sw'] = '2.3';
						this.drawPrize['sh'] = '2.7';
						this.drawImg = newimageList[5].src;
						this.isDrawShow = true;
						break;
					case -1:
						this.drawPrize = {};
						this.drawImg = newimageList[0].src;
						this.isDrawShow = true;
						break;
				}
			}else{
				this.drawPrize = {};
				this.drawImg = newimageList[0].src;
				this.isDrawShow = true;
			}
			setTimeout(()=>{
				this.isDrawShow = false;
				this.isOpenDrawShow = true;
			},1300)
			this.isDrawDoClick = false;
		})
	},
	// 打开填写地址弹窗
	toaddress(vm){
		this.isDrawShow = false;
		this.isOpenDrawShow = false;
		this.addressInfo = vm;
		this.isAddressPop = true;
	},
	// 关闭我的奖品，填写地址弹窗，打开填写成功弹窗
	closePop(){
		this.isAddressPop = false;
		this.isShowPrizePop = false;
		this.isAddressWinShow = true;
	},
	// 更新签到次数
	savesignnum(){
		this.signNum++;
	},
	// 更新抽奖次数
	savechance(num){
		this.chance += num;
	},
	// 关闭弹窗
	closeDiv(){
		this.isShowRulePop = false;
		this.isShowPrizePop = false;
		this.isShowSetSharePop = false;
		this.isAddressPop = false;
		this.isAddressWinShow = false;
		this.isDrawScoreShow = false;
		this.isTaskShow = false;
		this.isOpenCardShow = false;
		this.isOpenDrawShow = false;
	},
    initswiper() {
      var mySwiper = new Swiper(".swiper-container", {
        loop: true,
		speed:300,
        autoplay: {
          delay: 2000,
        },
        loopAdditionalSlides: 5,
        width: 95,
        initialSlide: 1, // 默认选中项索引
      });
    },
  },
};
</script>
<style lang="scss">
.drawbg{
	width: 7.5rem;
	height: 17rem;
	max-width: 750px;
	margin: 0 auto;
	background-size: 7.5rem 17rem;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}
.mainbg {
  width: 7.5rem;
  height: 17rem;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/161371/8/29080/56851/63ac2905F238872a5/fb75ae3f21df5a47.jpg");
  max-width: 750px;
  margin: 0 auto;
  background-size: 7.5rem 17rem;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  .drawscorep {
    position: absolute;
    top: 2.85rem;
	font-size: 0.3rem;
    color: #000;
  }
  .myprizebtn {
    width: 1.51rem;
    height: 0.46rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/215908/34/21972/3089/639a90a1E2543953f/64ba2c9aa84206c0.png");
    background-size: 100% 100%;
    position: absolute;
    right: 0rem;
    top: 2.85rem;
  }
  .drawbtn {
    width: 2.62rem;
    height: 0.76rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/127885/8/33564/3262/639a90a1Efbed8e30/9e895099fe89bb8c.png");
    background-size: 100% 100%;
    position: absolute;
    top: 8.8rem;
  }
  .nodrawbtn{
	width: 2.62rem;
    height: 0.76rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/120496/30/34787/3616/63aa6119F8824480f/0a14ba84f592c91e.png");
    background-size: 100% 100%;
    position: absolute;
    top: 8.5rem;
  }
  .taskbg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 9.8rem;
	.taskp{
		width: 2.4rem;
    height: 0.3rem;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/119647/11/34067/3807/63ab9cb2F7908b47c/407df6e10f9294f1.png");
    background-size: 100% 100%;
	}
    p {
      color: red;
      font-size: 0.3rem;
    }
    img {
      width: 2.56rem;
      height: 0.03rem;
	  margin-top: .1rem;
    }
  }
  .prizeList {
    width: 7rem;
    height: 2.2rem;
    margin-top: 0.4rem;
    .swiper-container {
      width: 7rem;
      height: 2.2rem;
      position: absolute;
	  z-index: 0;
    }

    .swiper-slide {
      width: 1.9rem;
      height: 2.18rem;
      background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/151792/40/28598/6921/639a9e08E8ed67209/9be48e5be8f8051f.png");
      background-size: 100% 100%;
      margin-right: 0.1rem;
      margin-left: 0.1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      background-size: 100% 100%;
    }
  }
  .rulebtn {
    position: absolute;
    font-size: 0.26rem;
    top: 13.1rem;
    left: 2rem;
	color: #000;
  }
  .drawjlbtn {
    position: absolute;
    font-size: 0.26rem;
    top: 13.1rem;
    right: 2rem;
	color: #000;
  }
}

.gray100 {
	/*grayscale(val):val值越大灰度就越深*/
  -webkit-filter: grayscale(0) brightness(.6);
  -moz-filter: grayscale(0) brightness(.6);
  -ms-filter: grayscale(0) brightness(.6);
  -o-filter: grayscale(0) brightness(.6);
  filter: grayscale(0) brightness(.6);
  filter: gray brightness;
  filter: grayscale(100%);
}
</style>
