<template>
	<div class="taskPopDivAll">
		<div class="taskDivContent">
			<div class="titleDiv"></div>
			<div class="contentDiv">
				<div class="taskListDivAll">
					<div class="closeTakPopImg">
						<img @click="closeTakPopClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/94146/8/33061/2593/637c8cbfE39a0612e/fe566d4c57540249.png" />
					</div>
					<div class="taskListDiv">
						<div class="taskItemDiv" v-for="(item, index) in taskList" :key="index">
							<div class="itemLeftDiv">
								<div>
									<img
										v-if="item.taskId == 'followshop'"
										class="logoUrl"
										src="//img10.360buyimg.com/imgzone/jfs/t1/214951/12/23762/953/637c8902Eab2a0a5e/2f8edb32e347718d.png"
									/>
									<img
										v-if="item.taskId == 'scanlive'"
										class="logoUrl"
										src="//img10.360buyimg.com/imgzone/jfs/t1/129508/18/32787/1003/637c8902Ecda15a8f/0ca8113caa7836d2.png"
									/>
									<img
										v-if="item.taskId == 'add2cart'"
										class="logoUrl"
										src="//img10.360buyimg.com/imgzone/jfs/t1/195396/34/30165/1063/637c8902E5de746b3/418bb60402792de8.png"
									/>
									<img
										v-if="item.taskId == 'order'"
										class="logoUrl"
										src="//img10.360buyimg.com/imgzone/jfs/t1/134013/1/28742/1153/637c8902E822dc8a5/1f7d1839d6cd0bb8.png"
									/>
								</div>
								<div class="contentDiv1">
									<div class="taskTypeName">
										{{ item.taskname }}

										<span v-if="item.taskId == 'order'">({{ item.curNum }}/{{ item.maxNeed }})</span>
										<div class="getNumDiv">+{{ item.rewardIds }}</div>
									</div>
									<div class="taskPrompt" v-if="item.taskId == 'followshop'">关注本店铺（限首次关注）</div>
									<div class="taskPrompt" v-if="item.taskId == 'scanlive'">每日观看直播满20s</div>
									<div class="taskPrompt" v-if="item.taskId == 'add2cart'">每日加购指定商品满{{ item.need }}件</div>
									<div class="taskPrompt" v-if="item.taskId == 'order'">购买店铺内指定正装产品</div>
								</div>
							</div>
							<div class="taskRightDiv">
								<img
									class="statusBtn"
									v-if="item.curNum != item.maxNeed"
									@click="taskClick(item, index)"
									v-lz-click="'2'"
									src="//img10.360buyimg.com/imgzone/jfs/t1/125689/16/32335/5496/637c89dbE7842b222/0b5bdcba23d9f0b6.png"
								/>
								<img
									class="statusBtn"
									v-else
									src="//img10.360buyimg.com/imgzone/jfs/t1/60168/9/19565/5058/637c89dbE3e89b385/5ee0779f1bbbc60e.png"
								/>
							</div>
						</div>
					</div>
					<div class="moreTaskDetailDiv"><span class="moreTaskDetailSpan" @click="moreTaskDetailClick()">查看任务完成明细 ></span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import apis from '../api/api.js';
import { goToShopPage, getApiData } from '../../../../util/tools';
import store from '../../../../store/store';

let { getTaskList, task } = apis;
export default {
	data() {
		return {
			taskList: [
				{
					taskType: '1', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 1,
					taskTypeName: '关注店铺',
					taskPrompt: '关注本店铺（限首次关注）',
					status: 0 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/214951/12/23762/953/637c8902Eab2a0a5e/2f8edb32e347718d.png"
				},
				{
					taskType: '2', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 2,
					taskTypeName: '观看直播20s',
					taskPrompt: '每日观看直播满20s',
					status: 1 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/129508/18/32787/1003/637c8902Ecda15a8f/0ca8113caa7836d2.png"
				},
				{
					taskType: '3', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 3,
					taskTypeName: '加购商品',
					taskPrompt: '每日加购指定商品满3件',
					status: 1 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/195396/34/30165/1063/637c8902E5de746b3/418bb60402792de8.png"
				},
				{
					taskType: '4', //关注店铺 2 光看直播 3 加购商品 4购买商品
					getDoNum: 1,
					taskTypeName: '购买商品',
					taskPrompt: '购买店铺内指定正装产品',
					status: 0 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/134013/1/28742/1153/637c8902E822dc8a5/1f7d1839d6cd0bb8.png"
				}
			]
		};
	},
	created() {
		this.queryData();
	},
	methods: {
		queryData() {
			getTaskList(this.$route.query.activityId, data => {
				this.taskList = data.data;
			});
		},
		//关闭任务弹框
		closeTakPopClick() {
			this.$emit('closePop', '7');
		},

		moreTaskDetailClick() {
			this.$emit('closePop', '8');
		},

		taskClick(item, index) {
			// 打开任务弹窗
			window.taskCallback = null;
			console.log(item, '11');
			if (item.taskId == 'add2cart') {
				// 打开加购弹窗
				this.$emit('closePop', '15');
				this.$emit('getNeed', item.need);
			} else if (item.taskId == 'order') {
				//下单任务
				let shopId = store.state.shopId;
				goToShopPage(shopId);
			} else if (item.taskId == 'followshop') {
				//关注店铺任务
				this.godoTsaks(item.taskId, item);
			} else if (item.taskId == 'scanlive') {
				//直播 curNum 已完成次数 maxNeed 最多可完成次数
				if (item.curNum >= item.maxNeed) return (window.location.href = item.params);
				let oldtime = new Date().getTime();
				window.taskCallback = () => {
					const newTime = new Date().getTime();
					const downTime = newTime - oldtime > 20000;
					if (downTime) {
						this.godoTsaks(item.taskId, item);
					} else {
						Toast('aaa观看直播未到20s');
					}
				};
				localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: oldtime }));
				window.location.href = item.params;
			}
		},
		//做任务
		godoTsaks(taskId, item) {
			let param = {
				activityId: this.$route.query.activityId,
				taskId: taskId,
				param: null
			};
			task(param, responseData => {
				if (responseData.resp_code == 0) {
					this.queryData();
					if (responseData.data && responseData.data.chance) {
						let changeAll = parseInt(sessionStorage.getItem('chance')) + parseInt(responseData.data.chance);
						sessionStorage.setItem('chance',changeAll) 
					}
				}else{
					this.$toast(responseData.resp_msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.taskPopDivAll {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	.taskDivContent {
		position: absolute;
		bottom: 0;
	}
	.titleDiv {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/160901/32/33324/58854/637c8a13E64da4d19/e3ba18bcaa79b4ee.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 5.52rem;
		height: 2.43rem;
		margin-left: calc(50% - 5.52rem / 2);
		margin-bottom: 0.22rem;
	}
	.contentDiv {
		padding: 0.19rem 0.19rem 0 0.19rem;
		border-radius: 0.5rem 0.5rem 0 0;
		background-color: #f8d580;
		position: relative;
		background-size: cover;
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/157466/13/33216/118611/637b4366E585ed795/c9d12a98613dd9b8.png');
		.taskListDivAll {
			height: 8.46rem;
			width: 7.1rem;
			background: #fee7b0;
			.closeTakPopImg {
				height: auto;
				// display: flex;
				// width: 100%;
				// justify-content: end;
				float: right;
				margin-bottom: 0.24rem;
				img {
					width: 0.67rem;
					height: 0.67rem;
					margin: 0.28rem 0.36rem 0 0;
				}
			}
			.taskListDiv {
				margin-top: 0.25rem;
				.taskItemDiv {
					width: 6.38rem;
					height: 1.32rem;
					border-radius: 0.16rem;
					padding: 0rem 0.36rem 0 0.22rem;
					background: #fdf8de;
					margin-left: calc(50% - 6.38rem / 2);
					display: flex;
					justify-content: space-between;
					margin-bottom: 0.3rem;
					align-items: center;
					.itemLeftDiv {
						display: flex;
						align-items: center;

						.logoUrl {
							width: 0.45rem;
							height: 0.42rem;
						}
						.contentDiv1 {
							display: flex;
							flex-direction: column;
							text-align: left;
							margin-left: 0.14rem;
							font-size: 0.18rem;
							line-height: 0.18rem;
							color: #000000;
							.taskTypeName {
								font-size: 0.28rem;
								line-height: 0.28rem;
								font-weight: bold;
								color: #000000;
								margin-bottom: 0.08rem;
								display: flex;
								.getNumDiv {
									background: #f8234b;
									color: #ffffff;
									padding: 0.05rem 0.07rem;
									margin-top: -0.3rem;
									margin-left: 0.13rem;
									height: 0.4rem;
									border-radius: 0.06rem;
									position: relative;
									vertical-align: top;
									&::before {
										content: '';
										position: absolute;
										bottom: -0.27rem;
										left: -0.16rem;
										width: 0;
										height: 0;
										border-width: 0.2rem 0.1rem;
										transform: rotate(45deg);
										border-style: solid;
										border-color: #f8234b transparent transparent transparent;
									}
								}
							}
						}
					}
					.taskRightDiv {
						.statusBtn {
							width: 1.86rem;
							height: 0.5rem;
						}
					}
				}
			}
			.moreTaskDetailDiv {
				font-size: 0.24rem;
				line-height: 0.24rem;
				color: #000000;
				margin-top: 0.3rem;
				// text-decoration:underline;
				.moreTaskDetailSpan {
					border-bottom: 0.02rem solid #000000;
				}
			}
		}
	}
}
</style>
