<template>
	<div v-if="show">
		<basicPop>
			<div :class="baseClassName">
				<div class="draw-rule" v-lz-click="'27'" @click="backDrawPage"></div>
				<div class="draw-panel-follow">
					<div class="giveContent">
						<table>
							<tbody>
								<tr>
									<td class="tHead">参与条件：</td>

									<td class="tText" v-if="taskType != 23">
										<span>
											在
											<span class="color-cus">{{ startTime }}~{{ endTime }}</span>
											拍下，买了
											<span class="color-cus">{{ title }}</span>
											，且订单状态为已付款
										</span>
									</td>

									<td class="tText" v-if="taskType == 23">
										<span>
											在
											<span class="color-cus">{{ startTime }}~{{ endTime }}</span>
											内下单付款成功即可
										</span>
									</td>
								</tr>
								<tr></tr>
								<tr v-if="skuDiplay">
									<td colspan="2">
										<div class="prizearr">
											<a href="javascript:;" v-for="(item, index) in data.skuInfoVO" :key="index" class="prizeitem" @click="goToBuy(item.skuId)">
												<div class="prizeicon"><img :src="item.skuImg" /></div>
												<div class="prizename">{{ item.skuName }}</div>
												<div class="prizenum">￥{{ item.skuPrice }}</div>
											</a>
										</div>
									</td>
								</tr>
								<!---->
								<tr>
									<td>抽奖次数：</td>
									<td>
										<span>
											<span class="color-cus">每购买</span>
											<span class="color-cus">{{ data.finishNum }}</span>
											件统一赠送
											<span class="color-cus">{{ data.sendNum }}</span>
											次抽奖机会
										</span>
									</td>
								</tr>
							</tbody>
						</table>
						<p
							style="
                color: rgb(245, 98, 100);
                font-size: 0.24rem;
                text-align: center;
              "
						>
							订单信息可能稍有延迟，抽奖机会将尽快发放
						</p>
					</div>
				</div>
				<div class="mySharedContent">
					通过购物已获得
					<span class="num">{{ data.prieCount }}</span>
					次抽奖机会
				</div>
				<div class="f-tac" style="margin-top: 0.6rem"><div class="attr-btn" v-lz-click="'4'" @click="enterstore"></div></div>
				<div class="box"></div>
			</div>
		</basicPop>
	</div>
</template>
<script>
import basicPop from './basicPop.vue';
import dateUtil from '../../../util/dateUtil.js';
import { goToShopPage } from '../../../util/tools.js';
import { goToSkuPage } from '../../../util/tools.js';
import store from '../../../store/store';
export default {
	props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData'],
	components: {
		basicPop
	},
	data() {
		return {
			startTime: '',
			endTime: '',
			title: '',
			baseClassName: 'follow',
			skuDiplay: false,
			activityType: 0,
			taskType: ''
		};
	},

	created() {
		document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
		console.log(this.data.startTime);
		this.taskType = this.data.taskType;
		this.startTime = dateUtil.formatTime(this.data.startTime, 'yyyy-MM-dd hh:mm:ss');
		this.endTime = dateUtil.formatTime(this.data.endTime, 'yyyy-MM-dd hh:mm:ss');
		console.log(this.data.skuInfoVO + 'aaaa');
		if (this.data.skuInfoVO && this.data.skuInfoVO.length > 0) {
			this.title = '指定商品';
			this.baseClassName = 'follow1';
			this.skuDiplay = true;
		} else {
			this.title = '全部商品';
			this.baseClassName = 'follow';
			this.skuDiplay = false;
		}
		this.activityType = sessionStorage.getItem('activityType');
		if (this.activityType == 10031) {
			if (this.data.skuInfoVO && this.data.skuInfoVO.length > 0) {
				this.title = '订单中含有' + this.data.skuInfoVO.length + '款中的任意商品';
				this.baseClassName = 'follow1';
				this.skuDiplay = true;
			} else {
				this.title = '全店任意商品';
				this.baseClassName = 'follow';
				this.skuDiplay = false;
			}
		}
		console.log(this.baseClassName);
	},
	methods: {
		backDrawPage() {
			document.querySelector('body').removeAttribute('style');
			this.submit(0);
		},
		goToBuy(sku) {
			console.log(sku);
			goToSkuPage(sku);
		},
		enterstore() {
			document.querySelector('body').removeAttribute('style');
			console.log('进入商店');
			let shopId = store.state.shopId;
			goToShopPage(shopId);
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.box {
	position: relative;
	background-color: #ff4b4b;
	margin-top: 3.2rem;
	height: 7rem;
}
.follow {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
	background: url('https://img10.360buyimg.com/imgzone/jfs/t11935/326/2503228849/73574/b2b78708/5a7c711aNb3633b92.jpg') no-repeat;
	background-size: 100%;
	padding-top: 0.2rem;
	background-color: #ff4b4b;
	.mySharedContent {
		margin-top: 0.9rem;
		margin-bottom: 0.3rem;
		color: #fff;
		color: #febf1a;
		text-align: center;
		font-size: 0.3rem;
	}
	.draw-panel-follow .giveContent {
		height: 2.5rem;
		font-size: 0.25rem;
		padding: 0.1rem;
	}
}

.follow1 {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
	background: url('https://img10.360buyimg.com/imgzone/jfs/t1/517/12/12496/46799/5bd2ad20E177c30da/25963b7b8c0f88c1.png') no-repeat;
	background-size: 100%;
	padding-top: 0.2rem;
	background-color: #ff4b4b;
	.mySharedContent {
		margin-top: 1.6rem;
		margin-bottom: 0.3rem;
		color: #fff;
		color: #febf1a;
		text-align: center;
		font-size: 0.3rem;
	}
	.draw-panel-follow .giveContent {
		height: 4rem;
		font-size: 0.25rem;
		padding: 0.1rem;
		overflow-y: scroll;
	}
}

.draw-panel-follow {
	position: relative;
	z-index: 4;
	width: 6.5rem;
	margin: 0 auto;
	margin-top: 2.2rem;
}

.giveContent table {
	font-size: 0.25rem;
	border-collapse: separate;
	border-spacing: 0 0.15rem;
}
.draw-rule {
	margin-left: 0.3rem;
	top: 0.4rem;
	width: 1.2rem;
	height: 0.5rem;
	background-image: url(https://img10.360buyimg.com/imgzone/jfs/t17563/71/464197912/2669/9b732e4b/5a7c711aN7a2683a4.png);
	background-size: 100%;
	background-repeat: no-repeat;
	z-index: 10;
}
.color-cus {
	color: #f56264;
}
img {
	border: 0;
	max-width: 100%;
}
.draw-collect-list li .attention {
	margin: 0.08rem;
	height: 0.74rem;
	line-height: 0.74rem;
	font-size: 0.36rem;
	background: #ffea01;
	color: #fe2437;
	text-align: center;
}
.draw-collect-list {
	padding: 0.3rem;
	margin-bottom: 0.9rem;
}
.draw-collect-list li {
	float: left;
	width: 49%;
	margin-bottom: 2%;
	background: #fff;
}

.draw-collect-list {
	padding: 0.3rem;
	margin-bottom: 0.9rem;
}
.draw-collect-list li .title {
	height: 0.7rem;
	line-height: 0.35rem;
	padding: 0 0.1rem;
	margin-top: 0.1rem;
	font-size: 0.26rem;
	overflow: hidden;
}
.draw-collect-list li .detail .price {
	color: #f23c3c;
}
.draw-collect-list li .attention {
	margin: 0.08rem;
	height: 0.74rem;
	line-height: 0.74rem;
	font-size: 0.36rem;
	background: #ffea01;
	color: #fe2437;
	text-align: center;
}
.draw-collect-list li .detail {
	padding: 0.1rem;
	font-size: 0.28rem;
}
.draw-collect-list li:nth-child(even) {
	margin-left: 2%;
}
.f-cb:after {
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	content: '.';
}
.f-tac {
	text-align: center;
}
.attr-btn {
	background-image: url(https://img10.360buyimg.com/imgzone/jfs/t17980/310/450247161/29373/e8931309/5a7c711aNc7e4bc5a.png);
	background-size: 100%;
	background-repeat: no-repeat;
	height: 2rem;
}

.attr-btn1 {
	background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/166557/1/4231/30308/600e7935Ead8be210/5ac8db2f7367e72a.png);
	background-size: 100%;
	background-repeat: no-repeat;
	height: 2rem;
}

.tHead {
	width: 1.5rem;
	color: #222222;
}
.prizearr {
	width: 6.3rem;
	height: 3rem;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.prizeitem {
	width: 1.25rem;
	height: 2rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.prizeicon {
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
}
.prizename {
	font-size: 0.2rem;
	color: #999999;
	width: 1.2rem;
	height: 0.4rem;
	line-height: 0.4rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
.prizenum {
	font-size: 0.2rem;
	color: #f23c3c;
	width: 1.2rem;
	height: 0.4rem;
	text-align: left;
}
</style>
