<template>

	<view class="page">

		<view class="pages">
			<image class="page-bg" src="../../merchant/static/images/darw/FoIzpLTMwSQZDcJYrL_FD_07iBte.png" mode=""></image>
			<image class="page-title animate_top_down" src="../../merchant/static/images/darw/FrKRY-mHF7fQmkO3lUQjWRCDlCRI.png" mode=""></image>
			<image class="page-round" src="../../merchant/static/images/darw/Fv1xujnIn1r7XecrvEc-Mp9dqM4C.png" mode=""></image>
			<image class="page-bage" src="../../merchant/static/images/darw/bage.png" mode=""></image>
			<image class="page-tai" src="../../merchant/static/images/darw/FrnXmarfaxXY9i3FCkZGuQJyR6Rj.png" mode=""></image>
			<!-- <image src="../../merchant/static/images/darw/musicIocn.png" id="music" class="music" /> -->
			<image @click="getmyPrize" class="page-my" src="../../merchant/static/images/darw/FltcHBBH8X84Uzs5llLo_pGBnuvv.png" />
		</view>
		<view class="header">
			<view class="header-title">
				<view class="left">
					次数：<text style="color: #E4431A;">{{chishu<=0?0:chishu}}</text>
				</view>
				<view class="right" @click="bindrule">
					规则 >
				</view>
			</view>
		</view>
		<view class="egg-content">
			<view class="egg-content-pr">
				<view class="egg-content-home">
					<image v-for="(item,index) of list" :style="'width:'+eggWidth+'px'" :key='index' @click="onHiting(index)" 
					 class="egg"
					 :src="item.type==2?eggIcon2:eggIcon" mode=""></image>
				</view>
			</view>

			<view class="hammer" v-show="isplay" :style="'top:'+hammerPosY+'px'+';'+'left:'+hammerPosX+'px'">
				<image src="../../merchant/static/images/darw/hammer.png"> </image>
			</view>
			<!-- <view class="hammers" v-if="!isplay" :class="hammerMace ? 'mace' : ''">
				<image src="../../merchant/static/images/darw/img-6.png"> </image>
			</view> -->
		</view>

		<uni-popup ref="popup" type="top">
			<view class="popup-content">
				<image class="page-title" style="height: 500rpx;" src="../../merchant/static/images/darw/core-wrap.png" mode=""></image>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif
	export default {
		data() {
			return {
				list: [{
					type: 1
				}, {
					type: 1
				}, {
					type: 1
				}, ],
				hammerMace: false,
				hammerPosX: 0,
				hammerPosY: 0,
				smashingDuration: 1500, // 砸金蛋持续时间，单位 ms
				eggCol: 3, // 金蛋列数
				eggWidth: 100, // 金蛋大小，单位 rpx
				isplay: false,
				eggIcon: "../../merchant/static/images/darw/egg_1.png",
				eggIcon2: "../../merchant/static/images/darw/egg_2.png",
				card_num: "",
				chishu: 0,
				is_draw: false,
				is_hit:true,
				content:"",super_id:"",
			}
		},
		onLoad: function(e) {
			// 获取奖品列表
			function getUrlParam(paraName) {
				let url = window.location.href;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arr;
					for (var i = 0; i < arrObj.length; i++) {
						arr = arrObj[i].split("=");
						console.log(arr)
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
					return "";
				} else {
					return "";
				}
			}
			this.run();
			this.card_num = getUrlParam('card_num');
			this.http(getUrlParam('card_num'));
		},

		onReady() {
			const query = wx.createSelectorQuery()
			query.select('.egg-content-home').boundingClientRect((res) => {
				this.offTop = res.top;
			}).exec()
		},
		methods: {
			http(card_num) {
				this.request({
					url: "funeng/scan",
					data: {
						card_num: card_num,
					},
				}).then(res => {
					if (res.code == '200') {
						this.super_id=res.data.super_id;
						this.power_id = res.data.id;
						this.content = res.data.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
						this.http_rule();
						if (res.data.type == 7) {
							if(res.data.wx_state==1){
								uni.setNavigationBarTitle({
									title: res.data.wx_title
								});
							}
							this.wxShare(res);
						}
						if (uni.getStorageSync("user_token")) {
							this.user_token = uni.getStorageSync("user_token");
							this.initdata(this.user_token);
						} else {
							this.isweb(res.data.id);
						}
					}
				}).catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration:5000,
						})
				});
			},
			
			wxShare(res) {
				var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
				let super_id=this.super_id;
				getWXSign(super_id).then(r => {
					console.log(r, "imgURL")
					if (r) {
						if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
							this.$wx.updateAppMessageShareData({
								title: res.data.wx_title ? res.data.wx_title : "", // 分享标题
								desc: res.data.wx_desc ? res.data.wx_desc : "", // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
							this.$wx.updateTimelineShareData({
								title: res.data.wx_title, // 分享标题
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
						} else {
							// alert("pc")
							this.$wx.onMenuShareTimeline({
								title: res.data.wx_title, // 分享标题
								desc: res.data.wx_desc, // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
							this.$wx.onMenuShareAppMessage({
								title: res.data.wx_title, // 分享标题
								desc: res.data.wx_desc, // 分享描述
								link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: imgUrl, // 分享图标
								success: (res) => {
									// 设置成功
									console.log("设置成功", res)
								}
							})
						}
					}
				})
			},
			http_rule() {
				this.request({
					url: "game/gameRule",
					data: {
						power_id: this.power_id,
					},	
					is_agent:'member',
					
				}).then(res => {
					if (res.code == '200') {
						this.rule = res.data;
					}
				})
			},
			
			bindrule(e) {
				uni.showModal({
					title: '规则说明',
					content: this.rule||'',
					showCancel: false,
					success: function() {
						// 置空style  否则动画不生效
					}
				});
			},
			
			// 公众号授权
			isweb(id) {
				function GetRequest() {
					var url = location.search; //获取url中"?"符后的字串
					var theRequest = new Object();
					if (url.indexOf("?") != -1) {
						//判断是否有参数
						var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
						var strs = str.split("&");
						console.log(strs)
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
						}
					}
					return theRequest;
				}
				if (GetRequest().code) {
					//发起网络请求
					this.request({
						url: "wechat/webLogin",
						data: {
							code: GetRequest().code,
							type:3,
						},
						is_agent:'member',
					}).then(res => {
						console.log(res, "res")
						this.user_token = res.data.token;
						uni.setStorageSync("user_token", res.data.token)
						this.initdata(res.data.token)	
					}).catch((res) => {
						console.log("message", res)
						if (res.message == "获取openid失败") {
							return
						}
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					});
				} else {
					this.gzhurl(id);
				}
			},
			
			gzhurl(id) {
				this.request({
					url: "wechat/getLoginUrl",
					data: {
						type: 3,
						power_id: id,
						card_num: this.card_num,
						super_id:this.super_id,
					},
					is_agent:'member',
				}).then(res => {
					if (res.data.url) {
						window.location.href = res.data.url
					}
				}).catch((res) => {
					console.log("message", res)
				});
			}, 
			// 查看奖品
			// 初始化抽奖数据
			initdata: function(token) {
				let that = this;
				this.request({
					url: "game/prizeList",
					data: {
						card_num:this.card_num,
						token,
					},
					is_agent:'member',
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						that.chishu = res.data.luckdraw;
					}	
				}).catch((res) => {
				   if(res.code==1004){
					   uni.removeStorageSync("user_token")
					  this.gzhurl(this.power_id);
				   }else{
					   uni.showToast({
						title: res.message,
						icon: 'none'
					   })
				   }
				});
			},

			getmyPrize() {
				let user_token = this.user_token,
					power_id = this.power_id;
				uni.navigateTo({
					url: `./prize?token=${user_token}&power_id=${power_id}`
				})
				return;
			},

			onHiting: function onHiting(index) {
				if (this.chishu <= 0) {
					uni.showToast({
						title: '次数已经用完',
						icon: 'none'
					})
					return
				}
				if(!this.is_hit){
					return
				}
				this.is_hit=false;
				this.chishu = this.chishu - 1;
				setTimeout(() => {
					this.isplay = false;
					this.list[index].type = 2;
					this.playReward();
				}, 1000)
				this.isplay = true;
				var x = ((wx.getSystemInfoSync().windowWidth - this.eggWidth * 3) / 2) + (this.eggWidth * index) - 50;
				this.hammerPosX = x;
				this.hammerPosY = this.offTop - 80 - 45;
				this.copy();
			},
			
			copy(e) {
				let content = this.content;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				return result
			},
			run: function run() {
				if (!this.hammerTimer) {
					this.hammerTimer = this.maceAnim(400);
				}
			},

			maceAnim: function maceAnim(ts) {
				var _this2 = this;
				return setInterval(function() {
					_this2.hammerMace = !_this2.hammerMace;
				}, ts);
			},
			playReward: function() {
				var that = this
				this.request({
					// url: "Youxifuneng/getPrize",
					// data: {
					// 	token: this.user_token,
					// 	power_id: this.power_id,
					// },
					url: "game/getPrize",
					data: {
						token: this.user_token,
						power_id: this.power_id,
					},
					is_agent:'member',
					showLoading:true,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						if ("谢谢参与" != res.data.title) {
							this.$refs.popup.open();
							this.is_draw = true;
						}else{
							uni.showToast({
								title:"很遗憾,没中奖！",
								image: '../../merchant/static/images/darw/yh.png',
								
							})
						}
						setTimeout(()=>{
							this.list=[
							{
								type: 1
							}, {
								type: 1
							}, {
								type: 1
							}, ];
							this.is_hit=true;
						},2e3)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;

	}

	.popup-content {
		width: 100%;
		margin-top: 200rpx;
		text-align: center;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* height: 246upx; */
		padding-top: 48upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}

	.header-title {
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		padding: 0 48upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.header-title>view {
		padding: 8upx 16upx;
		border: 1px solid #d89720;
		color: #d89720;
		font-size: 28upx;
		border-radius: 26upx;
	}

	.page {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.pages {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		overflow: hidden;

		.music {
			position: fixed;
			z-index: 99;
			top: 8%;
			left: 5%;
			width: 80rpx;
			height: 80rpx;
			-webkit-animation: music 2s linear infinite;
		}

		@-webkit-keyframes music {
			0% {
				transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
			}

			to {
				transform: rotate(-360deg);
				-webkit-transform: rotate(-360deg);
			}
		}

		.page-bg {
			width: 100%;
			height: 215%;
		}

		.page-title {
			width: 100%;
			height: 213px;
			position: absolute;
			top: 80rpx;
			left: 0px;
		}

		.page-round {
			width: 100%;
			height: 213px;
			position: absolute;
			top: 180rpx;
			left: 0px;
		}

		.page-bage {
			width: 100%;
			height: 377px;
			position: absolute;
			top: 148px;
			left: 0px;
			-webkit-animation: a_t_d .5s ease-in-out 1;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-delay: 0s
		}

		.page-my {
			width: 60px;
			height: 60px;
			position: absolute;
			bottom: 249px;
			right: 7px;
			z-index: 999;
		}

		.animate_top_down {
			-webkit-animation: a_t_d .5s ease-in-out 1;
			-webkit-animation-iteration-count: 1;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-delay: 0s
		}

		@-webkit-keyframes a_t_d {
			0% {
				transform: translateY(-200px)
			}

			to {
				transform: translateY(0px)
			}
		}

		.page-tai {
			position: absolute;
			bottom: -81px;
			left: 0;
			width: 100%;
			height: 500px;
		}
	}

	.egg-content {
		position: relative;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.hammers {
			-webkit-transform-origin: right bottom;
			transform-origin: right bottom;
			-webkit-transform: rotate(15deg);
			transform: rotate(15deg);
			position: absolute;
			top: 20px;
			right: 0;

			image {
				width: 80px;
				height: 80px;
			}
		}

		.mace {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		.hammer {
			position: absolute;
			z-index: 10;
			width: 6.5rem;
			display: block;
			max-width: none;
			-webkit-animation: hammer 0.5s alternate;
			animation: hammer 0.5s alternate;
			transform-origin: bottom left;
			-webkit-transform-origin: bottom left;

			image {
				width: 100px;
				height: 80px;
			}
		}

		@keyframes hammer {
			50% {
				transform: rotate(15deg);
			}

		}

		@-webkit-keyframes hammer {
			50% {
				-webkit-transform: rotate(15deg);
			}
		}

		.egg-content-pr {
			position: absolute;
			bottom: -22px;
			width: 100%;

			.egg-content-home {
				position: relative;
				bottom: 125px;
				width: 100%;
				text-align: center;

				.egg {
					width: 200rpx;
					height: 240rpx;
				}

			}

		}
	}
</style>
