<template>
	<div class="popUpBox">
		<div v-if="popUpData.hint || popUpData.openCard" :class="popUpData.hint?'popUpHintBg':popUpData.openCard? 'popUpOpenCardBg':''">
			<div>
            <div class="popUpTitle" v-if="popUpData.title">{{popUpData.title}}</div>
			<div class="popUpText" v-if="popUpData.text">{{ popUpData.text }}</div>
			<div class="popUpImg"  v-if="popUpData.img">
				<img :src="popUpData.img" alt="">
			</div>
			<div class="popUpOpenCard" v-if="popUpData.openCardBtn" @click="openCard1()"></div>
			<div class="popUpParticipationBtn" v-if="popUpData.participationBtn" @click="participation()"></div>
			<div class="popUpParticipationBtn" v-if="popUpData.shareOpenCardBtn" @click="openCard()"></div>
			<div v-if="popUpData.openCard" class="close" @click="closeClick()"></div>
			</div>
			<div class="close addressClose" v-if="popUpData.hint || popUpData.openCard" @click="closeClick()"></div>
		</div>
	
	   <div v-else-if="popUpData.prizePop" class="popUpPrizeBg">
		   <div class="prizePopTitle">{{popUpData.title}}</div>
		   <!-- <div class="prizePopWord"  v-if="popUpData.prizeData.level">{{popUpData.prizeData.level}}</div> -->
		   <!-- <div class="prizePopWord prizePopWord2"  v-if="popUpData.prizeData.rewardName">{{popUpData.prizeData.rewardName}}</div> -->
		   <div v-if="popUpData.pos == 1" class="prizePopImg1" ><img :src="popUpData.prizeData.rewardImg" alt=""></div>
		   <div  class="prizePopImg" v-if="popUpData.prizeData.rewardImg && popUpData.pos >1"><img :src="popUpData.prizeData.rewardImg" alt=""></div>
		   <div v-if="popUpData.addressStatus && popUpData.prizeData.rewardType ==3" class="prizePopBtn" @click="getPrize()"></div>
		   <div v-if="popUpData.prizeData.rewardType !=3" class="prizePopGet"></div>
		   <div class="close" @click="closeClick()"></div> 
	   </div>
	   <div class="address" v-else-if="popUpData.losingLotteryPop">
		   <div class="popUpTitle m-bottom-150">您与大奖擦肩而过</div>
		   <div class="losingLotteryPopWord">完成活动任务<br>获取更多抽奖机会</div>
		   <div class="losingLotteryPopBtn" @click="toTaskListClick()"></div>
		   	<div class="close addressClose" @click="closeClick()"></div>
	   </div>
	   	<div class="address" v-if="addressText">
			<div class="popUpTitle">请填写收货地址</div>
			<van-form class="addressForm">
				<van-cell-group class="addressInner">
					<div class="addressName">姓名</div>
					<input  class="addressInput" maxlength="20" type="text" v-model="popAddress.receiver" />
				</van-cell-group>
				<van-cell-group class="addressInner">
						<div class="addressName">电话</div>
						<input  class="addressInput" maxlength="11" type="tel" v-model="popAddress.phone" />
				</van-cell-group>
				<van-cell-group  class="addressInner">
					<div class="addressName">省市区</div>
					<div class="addressText" @click="openArea">
						<div class="addressTextI">{{ popAddress.region }}</div>
					</div>
				</van-cell-group>
				<van-cell-group class="addressInner">
					<div class="addressLabel">详细地址</div>
					<div class="addressTextareaAll">
						<textarea  type="textarea" maxlength="50" v-model="popAddress.address" class="addressTextarea"></textarea>
					</div>
				</van-cell-group>
				<div class="Submit" @click="affirmSubmit">
					<img src="//img10.360buyimg.com/imgzone/jfs/t1/152529/14/28707/1857/63ad0c80F4dcb234e/b738dfbae050f79c.png" alt="" />
				</div>
			</van-form>
			<div class="hint">*奖品邮寄信息请于2023年2月17日23:59前填写完毕,过期则视为自动放弃奖品</div>
			<div class="close addressClose" @click="closeClick()"></div>
			</div>
			<div v-if="isArea" class="bottom" @onClose="isArea = false">
			   <div class="cc_width"><van-area title="" :area-list="areaList" @cancel="areaCancel" @confirm="areaConfirm" :value="areaCode" /></div>
			</div>
	</div>
</template>

<script>
import Vue from 'vue';

import { goToOpenCard } from '../../../../util/tools';
import apis from '../api/api.js';
import areaUtil from '../../../../util/areaUtil';
import { Form, Field, CellGroup } from 'vant';
Vue.use(Form);
Vue.use(Field);
Vue.use(CellGroup);
let { saveLog,saveAddress } = apis;
export default {
	props: ['popUpData'],
	data(){
		return{
			isArea:false,
			addressText:false,
			popAddress: {
				receiver: '',
				phone: '',
				address: '',
				region: ''
			},
			submitStataus: true,
			areaList: {},
			areaCode: '',
		}
	},
	created(){
		this.initAreaList();

	},
	watch:{
		popUpData: {
			handler(newValue, init) {
				if(newValue.isShowAddress){
					this.addressText = true
				}
			},
			deep: true,
			immediate: true
		},
	},
	methods: {
		initAreaList() {
			this.areaList.province_list = areaUtil.province_list;
			this.areaList.city_list = areaUtil.city_list;
			this.areaList.county_list = areaUtil.county_list;
		},
		openArea() {
			this.isArea = true;
		},
		//取消省市区选择
		areaCancel() {
			this.isArea = false;
		},
		//省市区
		areaConfirm(value) {
			this.popAddress.region = '';
			// console.log(this.areaDetails,'valuevalue');
			this.areaDetails = value.map((item, index) => {
				if (index === 2) {
					this.areaCode = item.code;
				}
				return item.name;
			});
			this.isArea = false;
			// console.log(this.areaDetails, 'this.areaDetails');
			value.forEach(element => {
				this.popAddress.region = this.popAddress.region + element.name;
			});

			// console.log(this.areaDetails, 'ssss');
		},
		checkEmoj(str) {
			var iosFace = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
			var androidFace = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
			if (iosFace.test(str) || androidFace.test(str)) {
				return false;
			}
			return true;
		},
		affirmSubmit() {
			if(!this.submitStataus){
				return
			}
			if (!this.popAddress.receiver || this.popAddress.receiver == '') {
				this.$toast('请填写姓名');
				return;
			}
			if (!this.checkEmoj(this.popAddress.receiver)) {
				this.$toast('收货人姓名不能包含表情！');
				return false;
			}
			if (!this.popAddress.phone || this.popAddress.phone == '') {
				this.$toast('请填写手机号');
				return;
			}
			if (!/^1[3456789]\d{9}$/.test(this.popAddress.phone)) {
				this.$toast('请填写正确的手机号码！');
				return;
			}
			console.log(this.popAddress, 'this.popAddress');
			if (!this.popAddress.region || this.popAddress.region == '') {
				this.$toast('请填写省市区');
				return;
			}
			if (!this.popAddress.address || this.popAddress.address == '') {
				this.$toast('请填写详细地址');
				return;
			}
			if (!this.checkEmoj(this.popAddress.address)) {
				this.$toast('详细地址不能包含表情！');
				return false;
			}
			this.submitStataus = false
			let param = {
				addressId: sessionStorage.getItem('addressId'), //this.addressId,
				activityId: this.$route.query.activityId,
				pin: sessionStorage.getItem('pin'),
				receiver: this.popAddress.receiver,
				phone: this.popAddress.phone,
				province: this.areaDetails[0],
				city: this.areaDetails[1],
				area: this.areaDetails[2],
				address: this.popAddress.address
			};
			let content = {
				activityId: this.$route.query.activityId,
				content: this.popAddress.address,
				type: 1
			};
			saveAddress(param, data => {
				if (data.resp_code == 0) {
					this.submitStataus = true
					this.$toast('保存成功');
				this.closeClick()
				}
			});
		},

		closeClick() {
			if(this.popUpData.shareOpenCardBtn){
            this.participation()
			}
			this.$emit('closePop');
		
		},
		toTaskListClick(){
			this.$emit('closePop',3);
		},
		openCard(){
			goToOpenCard(sessionStorage.getItem('openCardUrl'));

		},
		openCard1(){
			goToOpenCard(sessionStorage.getItem('ziZhuOpenCardUrl'));

		},
		getPrize(){
			this.addressText = true
			this.$emit('closePop',2);
			console.log(1212,'11')
		},
		// 客变主
		participation(){
		let queryData = {
					activityType: sessionStorage.getItem('activityType'),
					templateId: sessionStorage.getItem('templateId'),
					activityId: sessionStorage.getItem('activityId'),
					nodeId: sessionStorage.getItem('nodeId'),
					teamId: sessionStorage.getItem('teamId'),
					giftType: sessionStorage.getItem('giftType'),
					isGiftTrue: sessionStorage.getItem('isGiftTrue'),
					prd: sessionStorage.getItem('prd')
				};
				for (let i in queryData) {
					if (!queryData[i] || queryData[i] == 'null') {
						delete queryData[i];
					}
				}
				var aa = '';
				var lastkey = '';
				for (let i in queryData) {
					lastkey = i;
				}
				for (let i in queryData) {
					if (lastkey == i) {
						aa = aa + `${i}=${queryData[i]}`;
					} else {
						aa = aa + `${i}=${queryData[i]}&`;
					}
				}
				// console.log( 'https://' + location.host + '/index?' + aa,'aa111111111111');
				// alert('https://' + location.host + '/interact/index?'+ aa)
				location.replace('http://' + location.host + '/interact/index?' + aa);
		}
	}
};
</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;
	z-index: 2;
	.closeDiv {
		color: #fff;
		font-size: 0.5rem;
		position: absolute;
		top: -0.7rem;
		right: 1rem;
		height: 0.55rem;
		width: 0.55rem;
		line-height: 0.55rem;
		border-radius: 50%;
		border: 0.01rem solid #fff;
		text-align: center;
		vertical-align: middle;
		z-index: 1;
	}
	.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;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.popUpTitle{
		font-size: .44rem;
		font-family: HYb1gj;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center; 
		resize: none;
		 white-space: pre-line;
		 margin-bottom: 0.3rem;
	}
	.popUpTextBox{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0.3rem;
	}
	.popUpText{
		width: 100%;
		text-align: center;
		font-size: .3rem;
		font-family: HYg2gj;
		font-weight: 300;
		color: #FFFFFF;
		margin-top: .19rem;
		resize: none;
		 white-space: pre-line;
		 margin-bottom: 0.49rem;
	}
	.popUpImg{
		width: 3.24rem;
		height: 4.02rem;
		margin: 0 auto;
		margin-bottom: .17rem;
		img{
			height: 100%;
			display: block;
		}

}
.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

}
.popUpOpenCardBg{
	width:6.73rem;
		height:8.13rem;
		margin: 0 auto;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/194305/36/31844/12965/63b3d9e0F393b3457/375532c8c29860d4.png);
	    background-repeat: no-repeat;
        background-size: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
}
.popUpOpenCard{
	width: 1.68rem;
	height: 0.43rem;
	margin: 0 auto;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/135619/28/24151/1634/63b3dbacF8b58c08d/29ffe723a0b1c33e.png);
    background-repeat: no-repeat;
    background-size: 100%;
	margin-bottom: 0.36rem;
}
.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);
}
.popUpParticipationBtn{
	width: 1.68rem;
	height: 0.43rem;
	margin: 0 auto;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/188645/5/31649/1531/63ae9c46F4c08dd5d/a2cfa3c51f889ac3.png);
    background-repeat: no-repeat;
    background-size: 100%;
	margin-bottom: 0.36rem;
}
.addressForm{
	padding-top: 0.25rem;
}
.address{
	width: 6.17rem;
	height: 6.5rem;
	margin: 0 auto;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/170364/28/33694/41064/63b3f41eF761d25b1/78b048deb1db6a27.png);
    background-repeat: no-repeat;
	 background-size: 100%;
	padding: 0.5rem .84rem .3rem;
	position: relative;
	.van-cell-group{
      background-color: transparent;
	  border: inherit;
	  display: flex;
	  justify-content: left;
	}
	[class*=van-hairline]::after {
		border:inherit
	}
	.addressInner{
		border-bottom: 1px solid rgba(255,255,255,.3);
		margin-bottom: 0.5rem;
	}
	.addressName{
		font-size: .25rem;
		font-family: HYg2gj;
		font-weight: 300;
		color: #FFFFFF;
	}
	.addressLabel{
			font-size: .25rem;
		font-family: HYg2gj;
		font-weight: 300;
		color: #FFFFFF;
	}
		.addressInput {
		height: 0.39rem;
		width: 3.58rem;
		font-size: 0.28rem;
		color: #fff;
		padding: 0 .3rem;
		overflow-x: scroll;
		box-sizing: border-box;
	}
	.addressText{
		height: 0.39rem;
		width: 3.58rem;
		font-size: 0.28rem;
		color: #fff;
		padding: 0 .3rem;
		
	}
	.addressTextI{
		white-space: nowrap;
		overflow-x: scroll;
		text-align: left;

	}
	.addressTextareaAll{
		height: 0.39rem;
		padding-left: .3rem;
	}
	.addressTextarea {
		height: 0.39rem;
		font-size: 0.28rem;
		color: #fff;
		box-sizing: border-box;
		white-space: nowrap;
		overflow-x: scroll;
	}
	.Submit{
		width: 1.68rem;
		height: .43rem;
		margin: 0 auto;
		margin-top: .6rem;
		img{
			width: 100px;
			display: block;
		}
	}
	.hint{
		position: absolute;
		bottom: .08rem;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: .15rem;
		font-family: Singulier;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.78;
	}
	
}
.addressClose{
		position: absolute;
		bottom: -0.9rem;
		right: calc(50% - .73rem/2);
		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;
		
	}
	.prizePopTitle{
		font-family: HYb1gj;
		font-weight: 400;
		color: #FFFFFF;
		font-size: .44rem;
		text-align: center;
		margin-bottom: 0.1rem;
		white-space: pre-line;

	}
	.prizePopWord{
		font-size:.3rem;
		font-family: Singulier;
		font-weight: 300;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 0.08rem;
		white-space: pre-line;

	}
	.prizePopWord2{
		height: .64rem;
		width: 3.24rem;
		text-align: center;
		margin:0 auto ;

	}
	.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{
			width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
		}

	}
	.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;
	}
	.losingLotteryPopWord{
		font-size: .36rem;
		font-family: HYg2gj;
		font-weight: 400;
		color: #FFFFFF;
		line-height: .72rem;
		margin-bottom: 0.2rem;
	}
	.losingLotteryPopBtn{
		width: 2.01rem;
		height: 0.42rem;
		background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/162017/2/34167/2216/63b62d7fF1497a2c8/db8c5b8e5eae44af.png);
		background-repeat: no-repeat;
        background-size: 100%;
		margin: 0 auto;
	}
	.m-bottom-150{
		margin-bottom: 1.5rem !important;
	}
</style>
