<template>
	<div class="lkBag">
		<div class="box">
			<!-- <div class="graspBox"><div class="fukubukuro"></div></div> -->
			<div class="grabBox">
				<div  :class="gradStatus != 0?'grab ':'grab grabBoxSpin'">
					<div :class="gradStatus == 2 ? 'grab1 elongate' : gradStatus == 3 ? 'grab1 up' : 'grab1'"></div>
					<div :class="gradStatus != 0?'grab2 ':'grab2 grabBoxSpin1'">
						<div :class="gradStatus == 2 ? 'grabLeft grabLeftAn ' : 'grabLeft'"></div>
						<!-- <div :class="gradStatus == 3 ? 'gradFu' : gradStatus == 4 ? 'gradFuop' : ''"></div> -->
						<div :class="gradStatus == 2 ? 'grabRight  grabRightAn ' : 'grabRight'"></div>
						<!-- <div :class="gradStatus == 2 ? 'grabCenter gradCenterAn ' : 'grabCenter'"></div> -->
					</div>
				</div>
			</div>
			<div class="title"></div>
			<div class="lkTextBox">
				<van-notice-bar text="亲爱的兰蔻会员，由于活动过于火爆导致系统压力过大，可能会出现积分延迟到账等情况，请耐心等待，感谢理解与支持！" />

			</div>

			<!-- <div class="graspBox1">
				<div class="fukubukuro"></div>
				<div class="fukubukuro"></div>
			</div> -->

			<div class="frame">
				<div class="fukubukuroFrame">
					<div class="fukubukuroBox fukubukuroRun">
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
						<div class="fukubukuro"></div>
					</div>
				</div>
			</div>

			<div class="boxBgLeft"></div>
			<div class="boxBgRight"></div>
			<div class="boxBgBottom"></div>
			<div class="tuziDiv"></div>
		</div>

		<div class="right">
			<div class="myPrize" @click="openMyPrize()"></div>
			<div class="gameRules" @click="openGameRules()"></div>
		</div>

		<div class="lkBtnBox">
			<div class="lkBtn" @click="drawClick()"></div>
			<div class="lkText">
				（今日剩余机会：{{ opportunity }}
				<span v-if="opportunity == 0">明天继续参加吧</span>
				)
			</div>
			<!-- <div class="lkText" @click="look()">看看</div> -->
		</div>
		<rulePop v-if="isShowRulePop" @closePop="backClick"></rulePop>
		<myPrizePop v-if="isShowMyPrize" @closePop="backClick"></myPrizePop>
		<popUp v-if="isShowPop" :prizeData="prizeData" @closePop="backClick"></popUp>
		<!-- <div class="isShow" v-if="isShow" @click="isShow = false"><img src="//img10.360buyimg.com/imgzone/jfs/t1/85535/17/29468/174586/63a5810bE2ae3ea73/84877ced592387a2.png" alt=""></div> -->
	</div>
</template>

<script>
import Vue from 'vue';
import rulePop from '../components/rulePop.vue';
import myPrizePop from '../components/myPrize.vue';
import popUp from '../components/popUp.vue';
import apis from '../api/api.js';
import { goToOpenCard } from '../../../../util/tools';
import { callShare4MiniProgram } from '../../../../util/share.js';
import store from '../../../../store/store';
import { NoticeBar } from 'vant';

Vue.use(NoticeBar);

let { openCardStatus, draw, saveLog } = apis;
export default {
	components: {
		rulePop,
		myPrizePop,
		popUp
	},
	data() {
		return {
			isShowRulePop: false,
			isShowMyPrize: false, //是否显示我的奖品
			isShowPop: false, //是否显示中奖弹窗
			memberLevel: null,
			opportunity: 0, //抽奖机会
			openCardStatus: false,
			gradStatus: 0, // 夹子状态
			isShow:false,
			drawClickStatus:false
		};
	},
	mounted() {
		this.openCar();
	},
	methods: {
		openCar() {
			let activityId = this.$route.query.activityId;
			openCardStatus(activityId, data => {
				if (data.resp_code == 0) {
					// data.data.memberLevel = 0;
					this.memberLevel = data.data.memberLevel;
					this.opportunity = data.data.opportunity; //抽价机会
					if (data.data.memberLevel == 0) {
						setTimeout(() => {
						this.$toast({
							duration: 3000,
							forbidClick: true,
							message: '您还不是会员噢~加入会员享好礼',
							onClose: function() {}
						});
					}, 800);
						//非会员
						this.openCardStatus = false;
						
					} else {
						//会员
						this.openCardStatus = true;
					}
					      
          let initDataAll = data.data;
          var title = initDataAll.shareTitle;
          var content = initDataAll.shareTitle;
          var url = location.href;
          var mpIconUrl = initDataAll.shareImg;
          var logoUrl = initDataAll.shareImg;
          var isHeader = true; //false 头部分享 true 按钮分享
          var shopid = store.state.shopId;
          var userpin = store.state.userPin;
          var jdactivityid = store.state.jdActivityId; //'1356071125718585346' //store.state.activityId

          callShare4MiniProgram(
            title,
            content,
            url,
            logoUrl,
            callBack => {
              console.log('测试分享');
            },
            isHeader,
            mpIconUrl,
            shopid,
            userpin,
            jdactivityid
          );

          
				}

				let param1 = {
					eleId: 'pv'
				};
				saveLog(param1, callbackData => {});
			});
		},
		drawClick() {
			if(this.drawClickStatus){
				return
			}

			this.drawClickStatus = true
			if (!this.openCardStatus) {
				//非会员
				goToOpenCard(sessionStorage.getItem('openCardUrl'));
				return;
			}
			if (this.opportunity <= 0) {
				this.$toast('今日剩余机会：0');
				this.drawClickStatus = false
				return;
			}

			draw(responseData => {
				this.gradStatus = 2;
				this.opportunity = this.opportunity - 1 > 0 ? this.opportunity - 1: 0;
				this.drawClickStatus = false

				setTimeout(() => {
					this.gradStatus = 3;
					console.log('333333333');
					if(responseData.data && responseData.data != '发奖失败'){
                     this.isShowPop = true;
					} else{
						this.$toast(responseData.data)
					}
				}, 800);
				setTimeout(() => {
					this.gradStatus = 0;
				}, 1000);

				console.log(responseData, '抽奖');
				// responseData = {
				// 	data: {
				// 		id: '1603704065657716737',
				// 		prd: 'crm',
				// 		activityType: 10999,
				// 		activityId: '1603689285549928449',
				// 		cid: '8d655cdf018ff4b25f265433a2a1fa2e',
				// 		prizeInfoId: '123123123123123',
				// 		prizeType: 3,
				// 		prizeName: '666积分',
				// 		showImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/223338/21/19601/1660/639c3f9bEdcf3527c/a2e11c29a67b4717.png',
				// 		cause: '调用欧莱雅会员支持服务-通过cjyxpin查询明文pin失败',
				// 		planId: 's221012205905866991',
				// 		dayTime: '2022-12-16',
				// 		createTime: 1671187819282,
				// 		userId: 'smL0QXADexzEP5JY5a6KCzkyNauxCixy4QbnC9WCYX7HGFgOv1nHauXyL8cJNgdD',
				// 		addressId: '',
				// 		shopId: '734259',
				// 		nickName: '阿啊阿荼',
				// 		userImg: 'https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png',
				// 		hour: 18,
				// 		status: 1,
				// 		memberLevel: 1,
				// 		customerPin: 'sdfdsfddsfdsds',
				// 		userPhoneNo: ''
				// 	},
				// 	resp_code: 0,
				// 	resp_msg: ''
				// };
				// this.isShowPop = true;
				this.prizeData = responseData.data;
			});
		},
		openGameRules() {
			if (!this.openCardStatus) {
				//非会员
				goToOpenCard(sessionStorage.getItem('openCardUrl'));
				return;
			}

			this.isShowRulePop = true;
			this.isShowMyPrize = false;
			this.isShowPop = false;
		},
		backClick() {
			this.isShowRulePop = false;
			this.isShowMyPrize = false;
			this.isShowPop = false;
		},
		openMyPrize() {
			if (!this.openCardStatus) {
				//非会员
				goToOpenCard(sessionStorage.getItem('openCardUrl'));
				return;
			}

			console.log('我的奖品');
			this.isShowMyPrize = true;
			this.isShowRulePop = false;
			this.isShowPop = false;
		},
		look(){
			this.isShow = true
		}
	}
};
</script>

<style lang="scss" >
.lkBag {
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/215043/26/24460/117357/63a59291Eb5aaeed6/b1279ec2cbda2815.png) no-repeat top center;
	height: 100vh;
	width: 100vw;
	background-size: 100%;
	background-color: #9b1417;
	position: relative;
	min-height: 14rem;
	.right {
		position: absolute;
		right: 0;
		top: 3.22rem;
		z-index: 1;
		.myPrize {
			background: url(//img10.360buyimg.com/imgzone/jfs/t1/56278/22/22193/3524/63982ac9E60f059f8/8c84aebf2d346d9e.png) no-repeat;
			width: 0.4rem;
			height: 1.07rem;
			background-size: 100%;
			margin-bottom: 0.24rem;
		}
		.gameRules {
			background: url(//img10.360buyimg.com/imgzone/jfs/t1/213338/18/24404/3659/63982ac9Eac69ca1d/ef44d6e1a8ac00e9.png) no-repeat;
			width: 0.4rem;
			height: 1.07rem;
			background-size: 100%;
		}
	}

	.box {
		z-index: 1;
		// position: absolute;
		position: relative;
		left: 0;
		// top: 2.65rem;
		top: 2.5rem;
		width: 100vw;
		height: 7.76rem;
		// height: 8.32rem;
		// background: url(//img10.360buyimg.com/imgzone/jfs/t1/68690/40/23412/33560/639986c6E64bc133c/644aa62e33b0c574.png) no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/81260/22/23120/30660/63a009bdE7f52a097/be2b4cd33ba4e198.png');

		// background-size: cover;
		background-size: 100% 100%;
		.boxBgLeft {
			z-index: 2;
			position: absolute;
			// position: relative;
			left: 0.26rem;
			bottom: 0.5rem;
			width: 0.2rem;
			height: 3.03rem;
			// background: url(//img10.360buyimg.com/imgzone/jfs/t1/68690/40/23412/33560/639986c6E64bc133c/644aa62e33b0c574.png) no-repeat;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/115821/22/29999/2196/639d2402Ea0d0c86d/8b99a93ddc63f116.png');

			background-size: cover;
		}
		.boxBgRight {
			z-index: 2;
			position: absolute;
			// position: relative;
			right: 0.24rem;
			bottom: 0.4rem;
			width: 0.2rem;
			height: 3.83rem;
			// background: url(//img10.360buyimg.com/imgzone/jfs/t1/68690/40/23412/33560/639986c6E64bc133c/644aa62e33b0c574.png) no-repeat;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/6461/40/9362/2243/639d27f2E61a7c7de/89f36a69d8b031b0.png');

			background-size: cover;
		}
		.boxBgBottom {
			z-index: 1;
			position: absolute;
			// position: relative;
			left: 0.26rem;
			bottom: 0rem;
			width: 7.16rem;
			height: 1.61rem;
			// background: url(//img10.360buyimg.com/imgzone/jfs/t1/68690/40/23412/33560/639986c6E64bc133c/644aa62e33b0c574.png) no-repeat;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/66766/10/23303/10166/639d2693E387b2dfa/93409c826b142288.png');

			background-size: cover;
		}
	}
	.title {
		position: absolute;
		// left: 1.04rem;
		// top: 2.72rem;

		top: -0.35rem;
		z-index: 1;
		width: 5.08rem;
		height: 0.87rem;
		background: url(//img10.360buyimg.com/imgzone/jfs/t1/185370/10/30720/25287/639c0905Ea761df2b/c5792df899d5b9ac.png) no-repeat;
		background-size: contain;
		left: calc(50% - 5.08rem / 2);
	}
	.frame {
		position: absolute;
		// top: 7.9rem;
		left: 0;
		right: 0;
		z-index: 1;
		bottom: 0.6rem;
		z-index: 2;
		width: 100%;
		overflow: hidden;
	}
	.tuziDiv {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/198487/20/30327/16077/639c1d1eE0fe5f336/58ca66cd223fe125.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 0.74rem;
		height: 1.22rem;

		position: absolute;
		// top: 7.9rem;
		left: 0rem;
		right: 0.7rem;
		z-index: 2;
		bottom: 0.2rem;
	}
}
.lkBtnBox {
	position: absolute;
	top: 10rem;
	width: 100%;
}
.lkBtn {
	width: 3.52rem;
	height: 1.13rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/218436/19/24832/8118/639c0991Ed5371262/13f05afbd657affe.png) no-repeat;
	background-size: 100%;
	margin: 0 auto;
	margin-bottom: 0.04rem;
}
.lkText {
	margin: 0 auto;
	color: #fae3cd;
	font-size: 0.2rem;
	font-weight: 400;
}
.fukubukuroFrame {
	transform: translate(-70%, 0);
}
.fukubukuroBox {
	overflow: hidden;
	width: 20rem;
	// display: flex;
	align-items: flex-end;
}
.fukubukuroRun {
	animation: run 2s linear infinite;
}
@keyframes run {
	to {
		transform: translate(-2.21rem);
	}
}
.graspBox1 {
	position: absolute;
	// top: 7.6rem;
	left: 1.9rem;
	display: flex;
	align-items: flex-end;
	z-index: 1;
	bottom: 1rem;
}
.graspBox {
	position: absolute;
	// top: 7.2rem;
	left: 2.9rem;
	display: flex;
	align-items: flex-end;
	z-index: 1;
	bottom: 1.4rem;
}
.fukubukuro {
	float: left;
	// width: 1.77rem;
	// height: 2.26rem;
	width: 2.05rem;
	height: 2.9rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/194785/16/30687/111999/639c13abE82ddbf36/7d0d2c0d9f3e0a49.png) no-repeat;
	background-size: cover;
	margin-right: 0.16rem;
	position: relative;
}
.grabBox {
	position: absolute;
	// top: 3.5rem;
	top: 0.4rem;
	// left: calc(50% - 1.04rem / 2);
	width: 100%;
	z-index: 1;
	display: flex;
	// justify-content: center;
	justify-content: center;
}
.grabBoxSpin {
	animation: boxSpin 2s linear infinite;
}
.grabBoxSpin1 {
	animation: boxSpin1 2s linear infinite;
}
@keyframes boxSpin {
	0% {
		transform-origin: top right;
		transform: rotateZ(0);
	}
	25% {
		transform-origin: top right;
		transform: rotateZ(10deg);
		// transform: rotateZ(6deg);
	}
	75% {
		transform-origin: top right;
		// transform: rotateZ(-6deg);
		transform: rotateZ( -10deg);
	}
	100%{
		transform-origin: top right;
		transform: rotateZ( 0);
	}
	
}
@keyframes boxSpin1 {
	0% {
		transform-origin: top right;
		transform: rotateZ(0);
	}
	30% {
		transform-origin: top right;
		transform: rotateZ(5deg);
	}
	
	80% {
		transform-origin: top right;
		transform: rotateZ(-5deg);
	}
	100% {
		transform-origin: top right;
		transform: rotateZ(0deg);
	}
}
.grabBoxAn {
	animation: boxRight 1s ease forwards;
}
.grabBoxAnBak {
	animation: boxRightBak 1s ease forwards;
}

@keyframes boxRight {
	0% {
		left: 0.8rem;
	}
	100% {
		left: calc(50% - 1.04rem / 2);
	}
}
@keyframes boxRightBak {
	0% {
		left: calc(50% - 1.04rem / 2);
	}
	100% {
		left: 0.8rem;
	}
}
.grab{
	width: 0.1rem;
}
.grab1 {
	margin: 0 auto;
	width: 0.1rem;
	height: 1.74rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/188957/40/31814/1452/639fde66E5c846aa8/f865d46d84b969a3.png) no-repeat;
	background-size: cover;
}
.grab2 {
	margin-top: -0.2rem;
	width: 0.8rem;
	height: 0.29rem;
	margin-left: -.35rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/214172/20/24778/2212/639fde66Eddaddf55/539013daea6ee451.png) no-repeat;
	background-size: cover;
	position: relative;
}
.grabLeft {
	position: absolute;
	left: -0.4rem;
	top: 0.14rem;
	width: 0.71rem;
	height: 1.28rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/91447/1/33599/9339/639fdce5Eef2c9edd/bef0efe182a0974c.png) no-repeat;
	background-size: cover;
}
.grabLeftAn {
	animation: grabLeft 1.2s ease forwards;
}
@keyframes grabLeft {
	0% {
		transform-origin: top right;
		transform: rotateZ(0deg);
	}
	75% {
		transform-origin: top right;
		transform: rotateZ(24deg);
	}
	100% {
		transform-origin: top right;
		transform: rotateZ(0deg);
	}
}
.grabLeftAnUp {
	// animation-delay:2s;
	animation: grabLeftUp 0.4s ease forwards;
}
@keyframes grabLeftUp {
	0% {
		transform-origin: top right;
		transform: rotateZ(18deg);
	}
	100% {
		transform-origin: top right;
		transform: rotateZ(0deg);
	}
}
.grabRight {
	position: absolute;
	right: -0.4rem;
	top: 0.14rem;
	width: 0.71rem;
	height: 1.28rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/31687/33/18409/9050/639fdce5Efb2ecadf/1f853ac2e137b20d.png) no-repeat;
	background-size: cover;
}
.grabRightAn {
	animation: grabRight 1.2s ease forwards;
}
@keyframes grabRight {
	0% {
		transform-origin: top left;
		transform: rotateZ(0deg);
	}
	75% {
		transform-origin: top left;
		transform: rotateZ(-18deg);
	}
	100% {
		transform-origin: top left;
		transform: rotateZ(0deg);
	}
}
.grabRightAnUp {
	// animation-delay:2s;
	animation: grabRightUp 0.6s ease forwards;
}
@keyframes grabRightUp {
	0% {
		transform-origin: top left;
		transform: rotateZ(-30deg);
	}
	100% {
		transform-origin: top left;
		transform: rotateZ(10deg);
	}
}
.elongate {
	animation: elongate 1s ease forwards;
}
@keyframes elongate {
	0% {
		height: 1.74rem;
	}
	100% {
		height: 3.74rem;
	}
}
.up {
	animation: up1 1s ease forwards;
}
.upFd {
	// animation-delay;
	animation: upFd 3s ease forwards;
}
@keyframes up1 {
	0% {
		height: 3.6rem;
	}
	100% {
		height: 1.74rem;
	}
}
@keyframes upFd {
	0% {
		top: 7.2rem;
	}
	100% {
		top: 5.02rem;
	}
}
.gradFu {
	opacity: 1;
	position: absolute;
	top: 27%;
	// width: 1.77rem;
	// height: 2.22rem;
	width: 2.05rem;
	height: 2.95rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/194785/16/30687/111999/639c13abE82ddbf36/7d0d2c0d9f3e0a49.png) no-repeat;
	background-size: cover;
	margin-right: 0.16rem;
	transform: rotate(62deg);
}
.gradFuop {
	animation: op 1s linear forwards;
}
@keyframes op {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
.grabCenter {
	position: absolute;
	right: 0.4rem;
	top: calc(-50% - 0.1rem);
	width: 0.26rem;
	height: 2.18rem;
	background: url(//img10.360buyimg.com/imgzone/jfs/t1/110234/2/33640/2708/639a87c3E8d90e3c1/6d9d6d5cf6cdb989.png) no-repeat;
	background-size: cover;
}
.gradCenterAn {
	animation: Center 0.6s linear forwards;
}
.gradCenterAnUp {
	// animation-delay:2s;
	animation: upCenter 0.6s linear forwards;
}
@keyframes Center {
	0% {
		transform: rotateX(0);
	}

	70% {
		transform: rotateX(37deg);
	}
}
@keyframes upCenter {
	0% {
		transform: rotateX(37deg);
	}

	100% {
		transform: rotateX(-33deg);
	}
}
// .frame{
// 	position: absolute;
// 	.boxFrameLeft{
// 		width: .81rem;
// 		height: 2.91rem;
// 		background: url(//img10.360buyimg.com/imgzone/jfs/t1/174410/22/32319/3935/639a8613E04e40b6a/7884cb53a6756d8e.png) no-repeat;
// 		background-size: cover;
// 	}
// }

@keyframes grab {
	0%,
	100% {
		-webkit-transform: rotate(-15deg);
	}
	50% {
		-webkit-transform: rotate(15deg);
	}
}
.isShow{
	width: 100%;
	height: 14rem;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
}
.lkTextBox{
	position: absolute;
		top: 0.25rem;
		left: 0;
		width: 100%;
.van-notice-bar{
background-color: transparent;
color: rgba(255,255,255,.8);
font-size: 0.24rem;
}
}

</style>
