<template>
	<div class="popUpBox">
		<div class="popUpPrizeBg" v-if="show && myPrizeList.length>0">
			<div class="prizePopTitle">我的奖品</div>
        <div class="myPrize">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
               <van-swipe-item v-for="(item,i) in myPrizeList" :key="i" class="myPrizeBox">
				   <!-- <div class="prizePopWord">{{item.level}}</div> -->
				   <!-- <div class="prizePopWord">{{item.rewardName}}</div> -->
				   	<div v-if="item.position == 1" class="prizePopImg1" ><img :src="item.rewardImg" alt=""></div>
					<div v-else class="prizePopImg" ><img :src="item.rewardImg" alt=""></div>
					<div v-if="item.rewardType != 3 || item.hasWriteAddress" class="prizePopGet"></div>
		   	        <div v-else @click="toAddress(item)" class="prizePopBtn" ></div>
			   </van-swipe-item>
            </van-swipe>
		</div>
		 
		   <div class="close" @click="closeClick()"></div> 
		</div>
		<div  class="popUpHintBg" v-if="show && myPrizeList.length == 0">
			<div class="popUpTitle">我的奖品</div>
			<div class="popUpTextBox">
				<div class="popUpText">暂未获得奖品<br>快去参与抽奖吧</div>
			</div>
			<div class="closeDiv" @click="closeClick()"></div>
		</div>
		
	</div>
</template>

<script>
import Vue from "vue";
import apis from '../api/api.js';
import { dateChangeYYYY } from '../utils';
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem); 
let { saveLog,myPrize} = apis;
export default {
	props: ['popUpData'],
	data(){
		return{
			myPrizeList:[],
			show:false
		}
	},
	created(){
		this.queryData()
		
	},
	methods: {
		queryData(){
			myPrize(res =>{
				if(res.resp_code == 0){
					console.log(res,'9900')
				   this.myPrizeList = res.data
				   this.show = true;
				    this.myPrizeList.forEach(item => {
					item.time = dateChangeYYYY(item.createtime, 1);
					switch(item.position){
						case 1:
							item.level = '一等奖'
							break;
						case 2:
							item.level = '二等奖'
							break;
							case 3:
							item.level = '三等奖'
							break;
							case 4:
							item.level = '四等奖'
							break;
							case 5:
							item.level = '五等奖'
							break;
							case 6:
							item.level = '六等奖'
							break;
							case 7:
							item.level = '七等奖'
							break;
							case 8:
							item.level = '八等奖'
							break;

					}
				});

			   }
			})
		},

		closeClick() {
			this.$emit('closePop');
		},
		toAddress(item){
			sessionStorage.setItem('addressId',item.addressId)
			this.$emit('closePop',4);
		}
	}
};
</script>
<style lang="scss">
.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;
	.closeDiv {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		bottom: -0.9rem;
		right: calc(50% - .73rem/2);
		height: 0.73rem;
		width: 0.73rem;
		text-align: center;
		vertical-align: middle;
		background-size: cover;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/41501/1/21897/2017/63ad0c7fFf822d9fa/6c2b1524a54a00ef.png);

	}
	.popUpHintBg{
		width: 6.17rem;
		height: 6.18rem;
		margin: 0 auto;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/139626/25/32745/10173/63ad0c90Fecdb752b/f9f6e1b1a904224b.png);
	    background-repeat: no-repeat;
        background-size: 100%;
		padding-top: .55rem;
		box-sizing: border-box;
		position: relative;
	}
	.popUpTitle{
		font-size: .44rem;
		font-family: HYb1gj;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center; 
	}
	.popUpTextBox{
		width: 100%;
		height: 4.8rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popUpText{
		text-align: center;
		font-size: .36rem;
		font-family: HYg2gj;
		font-weight: 400;
		color: #FFFFFF;
		line-height: .72rem;
	}
	.myPrizeBox{
		margin: 0 auto;
		width: 80%;
		padding: 0 10%;
		line-height: 0.5rem;
		align-items: center;
		color: #fff;
		font-size: 0.26rem;
	}
	.myPrize{
		// padding: .2rem 0;
		display: flex;
		justify-content: left;
		overflow-x: scroll;
	}
	.prizePopWord{
		font-size:.3rem;
		font-family: Singulier;
		font-weight: 300;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 0.08rem;
		white-space: pre-line;

	}
	.prizePopImg{
		height:5.09rem ;
		// width: 3.24rem;
		margin: 0 auto;
		margin-bottom: 0.17rem;
		// background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/63759/18/23674/11121/63b52612F9e119ce8/47f3b9b60914fdd7.png);
		background-repeat: no-repeat;
        background-size: 100%;
		overflow: hidden;
		img{
			height: 100%;
			width: auto;
			display: block;
			margin: 0 auto;
		}
	}
	.prizePopImg1{
		width: 5.24rem;
		height: 4.02rem;
		border-radius: .2rem;
		overflow: hidden;
		margin: 0 auto;
		margin-bottom: 0.17rem;
		img{
			height: 100%;
			width: auto;
			display: block;
			margin: 0 auto;
		}

	}
	.popUpPrizeBg{
		width: 6.73rem;
	    height: 8.13rem;
	    margin: 0 auto;
		background-image:url(//img10.360buyimg.com/imgzone/jfs/t1/204595/2/30551/52489/63b517e1F477f3a37/eaf0f3c6cb33da35.png);
		background-repeat: no-repeat;
        background-size: 100%;
		box-sizing: border-box;
		padding-top: 0.4rem;
		
	}
	.prizePopBtn{
		width: 1.68rem;
		height: 0.43rem;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/139450/22/32621/1778/63b52566F5e93a681/d9721f35105ea832.png);
		background-repeat: no-repeat;
        background-size: 100%;
		margin: 0 auto;
		margin-bottom: 0.34rem;
	}
	.prizePopGet{
		width: 1.68rem;
		height: 0.43rem;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/193688/17/31766/1493/63ad0c80F3d5032f8/1bd432c21fddb282.png);
		background-repeat: no-repeat;
        background-size: 100%;
		margin: 0 auto;
		margin-bottom: 0.34rem;
	}
	.close{
	height: 0.73rem;
		width: 0.73rem;
		margin:0 auto ;
		text-align: center;
		vertical-align: middle;
		background-size: cover;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/41501/1/21897/2017/63ad0c7fFf822d9fa/6c2b1524a54a00ef.png);
}
.van-swipe__indicators{
	display: none;
}
.my-swipe{
	width: 100% !important;
}
.van-swipe__track{
	width: 100% !important;
}
.prizePopImg1{
		width: 5.24rem;
		height: 4.02rem;
		border-radius: .2rem;
		overflow: hidden;
		margin: 0 auto;
		margin-bottom: 0.17rem;
		img{
			height: 100%;
			width: auto;
			display: block;
			margin: 0 auto;
		}

	}
		.prizePopTitle{
		font-family: HYb1gj;
		font-weight: 400;
		color: #FFFFFF;
		font-size: .44rem;
		text-align: center;
		margin-bottom: 0.1rem;
		white-space: pre-line;

	}
}

</style>
