<template>
	<div class="popUpBox">
		<div class="por">
			<div class="popUpBag">
				<div class="popUpInner" style="height:7.26rem">
					<div>
						<div class="taskTilte"><img src="//img10.360buyimg.com/imgzone/jfs/t1/207141/36/27981/38378/637d9136Ee4927b51/f16fedd967533781.png" alt="" /></div>
						<div class="taskNum">今日加购（{{ number }}/{{ addNeed }}）</div>
						<div class="taskWord">每加购{{ addNeed }}件指定商品，游戏次数+1</div>
						<div class="taskShopListBox">
							<div class="taskShopList">
								<div class="taskShop" v-for="(item, i) in shopList" :key="i">
									<div class="taskShopImg"><img :src="item.img" alt="" /></div>
									<div class="taskShopText">{{ item.name }}</div>
									<div class="taskShopBut">
										<img v-if="item.taskDone" src="//img10.360buyimg.com/imgzone/jfs/t1/55690/13/21926/4259/637d9136Eae2e27ee/838ee79c7b4f8b60.png" alt="" />
										<img
											style="width: 1.96rem;height: 0.51rem;"
											v-if="!item.taskDone"
											@click="addClick(item)"
											src="//img10.360buyimg.com/imgzone/jfs/t1/205563/30/28603/5517/638d56ceEb01ac069/6189b5296a3b4637.png"
											alt=""
										/>
									</div>
								</div>
							</div>
						</div>
						<div class="taskShopDown">
							<img v-if="shopList.length > 2" src="//img10.360buyimg.com/imgzone/jfs/t1/218737/37/23981/515/637dbd90Efa17a558/fdeff289f71963a3.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="close" @click="closePopUp"></div>
		</div>
	</div>
</template>

<script>
import apis from '../api/api.js';

let { productList, task } = apis;
export default {
	props: ['addNeed'],

	data() {
		return {
			number: 0,
			finishTask: false,
			shopList: []
		};
	},
	created() {
		this.queryData();
	},
	methods: {
		closePopUp() {
			this.$emit('closePop', '16');
		},
		queryData() {
			let parameter = {
				activityId: this.$route.query.activityId,
				type: 1
			};
			productList(parameter, data => {
				this.number = 0;
				if (data.resp_code == 0) {
					this.shopList = data.data;
					this.shopList.forEach(e => {
						if (e.taskDone) {
							this.number++;
						}
					});
					if (this.finishTask) {
						this.$toast({
							duration: 2000,
							forbidClick: true,
							message: '加购商品任务已完成',
							onClose: function() {
								this.finishTask = false;
							}
						});
					}
				}
			});
		},
		addClick(item) {
			let that = this;
			let param = {
				activityId: this.$route.query.activityId,
				taskId: 'add2cart',
				param: item.skuId
			};
			task(param, data => {
				if (data.resp_code == 0) {
					if (data.data && data.data.chance) {
						let changeAll = parseInt(sessionStorage.getItem('chance')) + parseInt(data.data.chance);
						sessionStorage.setItem('chance', changeAll);
						// this.$toast('加购商品任务已完成');
						this.finishTask = true;
					}
					that.queryData();
				} else {
					this.$toast(data.resp_msg);
				}
			});
		}
	}
};
</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;
	.tableImg {
		width: 1.38rem;
		height: 0.4rem;
	}
	.close {
		margin: 0 auto;
		margin-top: 0.6rem;
		height: 0.69rem;
		width: 0.69rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/192327/22/31425/7696/637b411eEab7f9238/617003dc49594628.png');
	}
	.popUpBag {
		padding: 0.19rem;
		border-radius: 0.5rem;
		background-color: #f8d580;
		position: relative;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/157466/13/33216/118611/637b4366E585ed795/c9d12a98613dd9b8.png');
	}
	.popUpInner {
		width: 5.8rem;
		// height: 4.36rem;
		background: #fee7b0;
		border: 0px solid #fffbf3;
		border-radius: 0.5rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.taskTilte {
		height: 1.5rem;
		img {
			height: 100%;
		}
	}
	.taskShopListBox {
		margin-top: 0.3rem;
		height: 3.27rem;
		overflow-y: scroll;
	}
	.taskShopList {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 4.24rem;

		margin: 0 auto;
	}
	.taskShopText {
		width: 2rem;
		font-size: 0.2rem;
		font-size: 0.2rem;
		line-height: 0.62rem;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 0.38rem;
	}
	.taskNum {
		color: #000000;
		font-size: 0.3rem;
		text-align: center;
		font-weight: 600;
		line-height: 0.62rem;
	}
	.taskWord {
		font-size: 0.2rem;
		color: #000;
		text-align: center;
	}
	.taskShop {
		margin-bottom: 0.2rem;
	}
	.taskShopImg {
		width: 2rem;
		height: 2rem;
		overflow: hidden;
		background-color: #fff;
		img {
			width: 100%;
			display: block;
		}
	}
	.taskShopBut {
		height: 0.5rem;
		margin-top: 0.2rem;
		img {
			height: 100%;
		}
	}
	.taskShopDown {
		margin: 0 auto;
		width: 0.31rem;
		height: 0.33rem;
		margin-top: 0.3rem;
		img {
			width: 100%;
			display: block;
		}
	}
}
</style>
