<template>
	<div class="popUpBox">
		<div class="popUpBox">
			<div class="prizeBgDivAll">
				<div class="prizeBgDivAllBg light" v-if="!redShow" ></div>
				<img class="prizeBgDivAllBg" v-if="redShow" src="//img10.360buyimg.com/imgzone/jfs/t1/44193/24/21545/793765/639fcec3E1cc88f1a/465224ba8e9c86a8.gif" alt="">
				<div class="closeDiv" @click="closeClick()">×</div>
				<div @click="goToShopClick()" class="prizeDiv" v-if="prizeData.prizeName == '66积分'"></div>
				<div @click="goToShopClick()" class="prizeDiv1" v-if="prizeData.prizeName == '666积分'"></div>
				<div @click="goToShopClick()" class="prizeDiv2" v-if="prizeData.prizeName == '6666积分'"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { goToOpenCard } from '../../../../util/tools';
import apis from '../api/api.js';

let { saveLog } = apis;
export default {
	props: ['prizeData'],
	data(){
		return{
			redShow:false
		}
	},
	created(){
		setTimeout(() => {
				this.redShow = true;
				console.log('22222222');
			}, 1000);
	},
	methods: {
		goToShopClick() {
			
			//埋点访问次数
			let param1 = {
				eleId: 'goToShop'
			};
			saveLog(param1, callbackData => {
				// goToShopPage(sessionStorage.getItem('shopId'));
				goToOpenCard(sessionStorage.getItem('openCardUrl'));
				this.$emit('closePop');
			});
			
		},
		closeClick() {
			this.$emit('closePop');
		}
	}
};
</script>
<style lang="scss" scoped>
.popUpBox {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	.prizeBgDivAll {
		position: relative;
		width: 100%;
		display: flex;
	align-items: center;
	justify-content: center;
		.prizeDiv {
			width: 5.22rem;
			height: 7.59rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/188763/21/30486/69649/639c0c22E7a87ce91/0a8f8263cc09cdc6.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			z-index: 1;
			animation: big .5s linear forwards;
			
		}
		.prizeDiv1 {
			width: 5.22rem;
			height: 7.59rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/40496/32/23287/78434/639c0c22E57e62b1b/d52aa9c67c7b6ae7.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			z-index: 1;
			animation: big .5s linear forwards;
		}
		.prizeDiv2 {
			width: 5.22rem;
			height: 7.59rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/177691/1/31185/87070/639c0c22E18ec7045/1014bf9d39f798c8.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			z-index: 1;
			animation: big .5s linear forwards;
		}
	}
	.closeDiv {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		top: -0.7rem;
		right: 1rem;
		height: 0.55rem;
		width: 0.55rem;
		line-height: 0.55rem;
		border-radius: 50%;
		border: 0.01rem solid #fff;
		text-align: center;
		vertical-align: middle;
		z-index: 1;
	}
	.prizeBgDivAllBg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 0;
	}
	.light{
		width: 100%;
		height: 10.02rem;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/188461/25/28195/3114269/63a034c3Eaad689a5/b744505d34abb098.png);
		background-size: 100% auto;
		background-position: 0 0;
		animation: swiper 1s steps(39, start) 0ms  backwards;
	}
}
@keyframes big {
	0%{
		transform: scale(.2);
	}
	100%{
		transform: scale(1);
	}
	
}

@keyframes swiper {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -3900%; // 从图片负边移动实现动画效果
    }
}

</style>
