<template>
	<div class="popUpBox">
		<div class="popUpBox">
			<div class="contentDivAll">
				<div class="closeDiv" @click="closeClick()">×</div>
				<div class="titleText">我的奖品</div>
				<div class="listDivAll" v-if="isShowNoPrize === true">
					<div class="itemDivAll" v-for="(item,index) in prizeList" :key='index'>
						<div class="leftDiv">
							<div class="prizeName">{{item.prizeName}}</div>
							<div class="date">中奖时间:{{item.time}}</div>
						</div>
						<div class="rightDiv">
							<img v-if="item.prizeName == '66积分'" class="prizeImage1" src="//img10.360buyimg.com/imgzone/jfs/t1/217192/4/24872/18646/639bd83bEf0a2945f/c3c2505acbd4f6d0.png" />
							<img v-if="item.prizeName == '666积分'" class="prizeImage2" src="//img10.360buyimg.com/imgzone/jfs/t1/196298/30/31825/20806/639bd83bE304a576a/a8676fa3a99bf7b2.png" />
							<img v-if="item.prizeName == '6666积分'" class="prizeImage3" src="//img10.360buyimg.com/imgzone/jfs/t1/145446/1/31456/25930/639bd83bEe940d663/19e95be0edc63356.png" />
						</div>
					</div>
				</div>

				<div class="noPrizeDivAll" v-else-if="isShowNoPrize === false"><span>您还没有中奖哦~</span></div>
			</div>
		</div>
	</div>
</template>

<script>
import apis from '../api/api.js';
let { myprize } = apis;
import { dateChangeYYYY } from "../utils";
 
export default {
	data() {
		return {
			prizeList: [],
			isShowNoPrize: null
		};
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			myprize(responseData => {
				console.log(responseData, 'responseData');
				responseData.data.forEach(item =>{
				     item.time = dateChangeYYYY(item.createTime, 4);
				})
				this.prizeList = responseData.data;
				if (this.prizeList.length > 0) {
					this.isShowNoPrize = true;
				} else {
					this.isShowNoPrize = false;
				}
			});
		},
		closeClick() {
			this.$emit('closePop');
		}
	}
};
</script>

<style lang="scss" scoped="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;
	.contentDivAll {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/219477/7/23913/35180/639be481E2a467f72/3f28f37659d2b887.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 6.26rem;
		height: 6.18rem;
		position: relative;
		padding-top: 0.2rem;
		.titleText {
			color: #f4ddaf;
			font-size: 0.4rem;
			line-height: 0.4rem;
		}
		.listDivAll {
			padding: 0rem 0 0.74rem 0;
			height: 4.9rem;
			overflow-y: scroll;
			margin-top: 0.3rem;
			.itemDivAll::first-child{
				margin-top: 0rem !important;
			}
			.itemDivAll {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/95967/22/28805/2953/639be07bE4e462cbb/17a333de0496010f.png');
				width: 5.42rem;
				height: 1.15rem;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin-left: calc(50% - 5.42rem / 2);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 0.38rem;
				.leftDiv {
					display: flex;
					flex-direction: column;
					color: #ffffff;
					align-items: center;
					justify-content: center;
					width: 3.26rem;
					.prizeName {
						font-size: 0.5rem;
						line-height: 0.5rem;
					}
					.date {
						font-size: 0.16rem;
						line-height: 0.16rem;
						margin-top: 0.1rem;
					}
				}
				.rightDiv {
					width: 2.12rem;
					display: flex;
					justify-content: center;
					align-items: center;
					.prizeImage1 {
						width: 1.16rem;
						// height: 0.95rem;
					}
					.prizeImage2{
						width: 1.38rem;
						// height: 0.80em;
					}
					.prizeImage3{
						width: 1.61rem;
						// height: 0.81em;
					}
				}
			}
		}
		.noPrizeDivAll {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 0.44rem;
		}
	}
	.closeDiv {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		top: -0.7rem;
		right: 0rem;
		height: 0.55rem;
		width: 0.55rem;
		line-height: 0.55rem;
		border-radius: 50%;
		border: 0.01rem solid #fff;
		text-align: center;
		vertical-align: middle;
	}
}
</style>
