<template>
	<view class="conbox">
		<view class="container">
			<!-- 背景 -->
			<image src="../../merchant/static/images/darw/bg.png" class="cont" mode=""></image>
			<image src="../../merchant/static/images/darw/caidai.png" class="caidai" mode=""></image>
			<view class="header">
				<view class="header-title">
					<view class="left">
						次数： <text style="color: #E4431A;">{{chishu}}</text>
					</view>
					<view class="right" @click="getmyPrize">
						我的奖品 >
					</view>
				</view>
			</view>
			<view class="main">
				<view class="canvas-container">
					<view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
						<!-- <view :animation="animationData" class="canvas-content" id="zhuanpano"  :style="[{transform:'rotate('+runDeg+')'}]"> -->
						<!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
						<view class="canvas-line">
							<view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" 
							:style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
						</view>
						<view class="canvas-list">
							<view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList" 
							:key="index2">
								<view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
									<text class="text-1">{{iteml.award}}</text>
									<image class="canvas-item-text-img" src="../../merchant/static/images/darw/xiaolian.png" v-if="iteml.type ==0"></image>
									<image v-else class="canvas-item-text-img" src="../../merchant/static/images/darw/youhuiquan.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始 </view>
				</view>
			</view>
			<!-- 现金抽奖 -->
			<view class="typecheckbox">
				<!-- 		<view :class="mold==1?'left active':'left'" @click="choosetype(1)">
					幸运抽奖
				</view>
				<view :class="mold==2?'left active':'left' " @click="choosetype(2)">
					现金抽奖
				</view> -->
			</view>
			<!-- 规则 -->
			<view class="guize">
				<view class="title">
					规则说明
				</view>
				<view class="g_item">
					{{rule}}
				</view>
<!-- 				<view class="g_item">
					2.用户点击大转盘抽奖按钮，有积分和现金两种方式可参与抽奖，没抽一次消耗1次抽奖机会
				</view>
				<view class="g_item">
					3.用户获得的奖品，可在我的道具里查看
				</view> -->
			</view>
			
			<!-- 我的奖品 -->
			<view class="shadowbox" v-if="r_flg" @click="closeshadow">
				<view class="myrewards" @click.stop="openshadow">
					<view class="title">
						我的奖品
					</view>
					<view class="itembox">
						<view class="item" v-for="(items,i) in myPrizelist" :key="i">
							<text class="left">{{items.title}}</text>
							<text class="right">{{items.createtime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="top">
			<view class="popup-content">
				<image class="page-title"
				 src="../../merchant/static/images/darw/core-wrap1.png" mode=""></image>
				 <view class="page-title-text">
					 <view class="page-title-text1 ">
					 	<text style="font-size: 36rpx;">中奖啦!</text> 
					 	<view class="text-2 ft26" style="margin-top: 10rpx;">
					 		获得{{darw_title}}
					 	</view>
					 </view>
				 </view>
				 <view class="page-title-close" @click="close">
				 	<image  src="../../static/images/shanchu.png" mode=""></image>
				 </view>
			</view>
		</uni-popup>
	
	</view>
	
	
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif
	
	export default {
		data() {
			return {
				awardsConfig: {
					chance: true, //是否有抽奖机会
					lists: [], //奖品列表 
				},
				awardsList: {},
				animationData: {},
				btnDisabled: '',
				thanksarr: [], //存储谢谢参与的索引
				chishu: 0,
				mold: 1,
				r_flg: 0,
				myPrizelist: [],
				card_num: "",
				user_token: '',
				power_id: '',
				rule:"",
				content:"",
				darw_title:"",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.card_num = getUrlParam('card_num');
			this.http(getUrlParam('card_num'));
		},
		
		onReady: function(e) {
		},
	
		methods: {
			http(card_num) {
				this.request({
					url: "funeng/scan",
					data: {
						card_num: card_num,
					},
				}).then(res => {
					if (res.code == '200') {
						this.power_id = res.data.id;	
						this.super_id=res.data.super_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();
						 }
					}
				}).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,
						token:this.user_token,
					},	
					is_agent:'member',
				}).then(res => {
					if (res.code == '200') {
						this.rule = res.data;
					}
				})
			},
			
			// 公众号授权
			isweb() {
				let id=this.power_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)
				});
			},
			
			// 查看奖品
			getmyPrize() {
				let user_token=this.user_token,power_id=this.power_id;
				uni.navigateTo({
					url:`./prize?token=${user_token}&power_id=${power_id}`
				})
				return;
			},

			openshadow() {
				this.r_flg = 1
			},

			closeshadow() {
				this.r_flg = 0
			},
			close(){
				this.$refs.popup.close();
			},
			// 初始化抽奖数据
			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.awardsConfig = res.data;
						that.chishu = res.data.luckdraw;
						// 获取奖品的个数
						let awarrlength = that.awardsConfig.lists.length
						// push 谢谢参与奖项
						for (var i = 0; i <= 3 * 2; i++) {
							if (i % 3 == 0) {
								that.thanksarr.push(i)
								that.awardsConfig.lists.splice(i, 0, {
									title: '谢谢参与',
									type: 0
								});
							}
						}
						// 为每一项追加index属性
						that.awardsConfig.lists.forEach(function(element, index) {
							element.index = index
						})
						// 画转盘
						that.drawAwardRoundel();
					}
				}).catch((res) => {
				   if(res.code==1004){
					   uni.removeStorageSync("user_token")
						this.gzhurl(this.power_id);
				   }else{
					   uni.showToast({
						title: res.message,
						icon: 'none'
					   })
				   }	
				});
			},
			
			//画抽奖圆盘  
			drawAwardRoundel: function() {
				// 拿到奖品列表
				var awards = this.awardsConfig.lists;
				var awardsList = [];
				// 每份奖品所占角度
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  
				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg', //每个奖品块旋转的角度
						lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
						award: awards[i].title, //奖品的名字,
						type: awards[i].type,
						id: awards[i].type,
					});
				}
				this.btnDisabled = this.chishu ? '' : 'disabled';
				this.awardsList = awardsList;
			},
			
			playReward: function() {
				var that = this;
				if (this.chishu == 0) {
					uni.showToast({
						title: '抽奖次数已经用完',
						icon: 'none'
					})
					return
				}
				this.request({
					url: "game/getPrize",
					data: {
						token: this.user_token,
						power_id: this.power_id,
					},
					is_agent:'member',
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.playRewards(res.data);
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
				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
			},

			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
			},
			
			//发起抽奖  
			playRewards: function(data) {
				var that = this
				// 获取奖品
				var awardIndex = 3
				that.awardsList.forEach(function(element, index) {
					if (element.award == data.title) {
						awardIndex = index
					}
				})
				//中奖index  
				var awardsNum = that.awardsConfig.lists;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数  
				var runNum = 4; //旋转8周  
				var duration = 4000; //时长  
				// 旋转角度  
				that.runDeg = that.runDeg || 0;
				let preDeg = that.runDeg
				that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length)) + 1
				//创建动画  
				if (process.env.VUE_APP_PLATFORM == 'h5') {
					// document.styleSheets[0]
					document.getElementById('zhuanpano').style = 'animation:rotate_before 4s 0ms ease forwards;'
					if (document.styleSheets[0].cssRules.length > 0) {
						Array.from(document.styleSheets[0].cssRules).forEach(function(element, index) {
							if (element.name == 'rotate_before') {
								// 删除上次插入的动画
								document.styleSheets[0].deleteRule(index)
							}
						})
					}
					// console.log(document.styleSheets[0].cssRules)
					// console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
					// 插入定义的动画
					document.styleSheets[0].insertRule("@keyframes rotate_before{from{ transform: rotate(" + preDeg +
						"deg); }to{ transform: rotate(" + that.runDeg + "deg);}}", 8);
				} else {
					var animationRun = uni.createAnimation({
						duration: duration,
						timingFunction: 'ease'
					})
					animationRun.rotate(that.runDeg).step();
					that.animationData = animationRun.export();
				}
				that.btnDisabled = 'disabled';
				// 中奖提示  
				var awardsConfig = that.awardsConfig;
				var awardType = awardsConfig.lists[awardIndex].type;
				that.chishu = that.chishu - 1;
				if (awardType != 0) {
					
					setTimeout(function() {
						this.$refs.popup.open();
						this.darw_title=awardsConfig.lists[awardIndex].title;
						
						that.btnDisabled = '';
						setTimeout(function() {
								document.getElementById('zhuanpano').style = ''
						}, 500)
						// uni.showModal({
						// 	title: '恭喜',
						// 	showCancel: false,
						// 	success: function() {
						// 		setTimeout(function() {
						// 			document.getElementById('zhuanpano').style = ''
						// 		}, 500)
						// 	}
						// });
					}.bind(that), duration);
					
				} else {
					setTimeout(function() {
						that.btnDisabled = '';
						uni.showToast({
								title: '很遗憾！没中奖',
								image: '../../merchant/static/images/darw/yh.png',
								duration:3000
						})
						setTimeout(function() {
								document.getElementById('zhuanpano').style = ''
						}, 500)
						// uni.showModal({
						// 	title: '很遗憾',
						// 	content: '没中奖 ' + (awardsConfig.lists[awardIndex].title),
						// 	showCancel: false,
						// 	success: function() {
						// 		setTimeout(function() {
						// 			document.getElementById('zhuanpano').style = ''
						// 		}, 500)
						// 	}
						// });
					}.bind(that), duration);
					
				}
			},

		}

	}
</script>
<style scoped>
	
	.popup-content {
		width: 100%;
		margin-top: 200rpx;
		text-align: center;
		position: relative;
	}
	
	.page-title {
		width: 100%;
		height:600rpx;
		position: absolute;
		top: 80rpx;
		left: 0px;
		z-index: 500;
	}
	
	.page-title-close {
		width: 100%;
		height:100rpx;
		position: absolute;
		top: 600rpx;
		left: 0px;
		z-index: 500;
		text-align: center;
	}
	.page-title-close  image{
		width: 60rpx;
		height:60rpx;
	}
	
	.page-title-text{
		    position: absolute;
		    top: 375rpx;
		    z-index: 501;
		    width: 100%;
			text-align: center;
			color: yellow;
	}
	
	.page-title-text1{
		  width:300rpx;
		  margin: 0 auto;
	}
	
	.text-1{
		    display: block;
		    width: 200rpx;
	}
	.conbox {
		width: 750upx;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.container,
	image.cont {
		width: 750upx;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	image.cont {
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 0;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	.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;
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 600upx;
		height: 600upx;
		background: url(../../merchant/static/images/darw/circle.png) no-repeat;
		background-size: cover;
		border-radius: 50%;
	}

	.canvas {
		width: 100%;
		height: 100%;
		display: block !important;
		border-radius: 50%;
	}

	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		width: 600upx;
		height: 600upx;
		border-radius: inherit;
		/* background-clip: padding-box; */
		/* background-color: #ffcb3f; */
	}

	.canvas-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 46upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FB778B;
	}

	.canvas-item-text text {
		font-size: 30upx;
	}

	.canvas-item-text-img {
		width: 50upx;
		height: 50upx;
		margin-top: 56upx;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 300upx;
		top: 0;
		width: 3upx;
		height: 300upx;
		background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	/**  
* 抽奖按钮  
*/
	.canvas-btn {
		position: absolute;
		left: 260upx;
		top: 260upx;
		z-index: 4;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		color: #f4e9cc;
		background-color: #e44025;
		line-height: 80upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 12upx;
		top: -44upx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #e44025;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #b07a7b;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #b07a7b;
	}

	.canvas-btn-table {
		color: #A83FDB;
		width: 120upx;
		text-align: center;
		position: absolute;
		left: 240upx;
		top: 360upx;
		font-size: 26upx;
		background-color: #FFFFFF;
		opacity: 0.9;
	}

	.typecheckbox {
		width: 100%;
		position: relative;
		z-index: 3;
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28upx;
		top: -120upx;
		flex-direction: column;
		height: 180upx;
		align-items: flex-end;
		/* padding-top: 46upx; */
	}

	.typecheckbox view {
		border: 1px solid #FF3637;
		background: transparent;
		color: #FF3637;
		display: flex;
		height: 60upx;
		width: 140upx;
		border-radius: 50upx;
		align-items: center;
		justify-content: center;
		display: flex;
		margin-left: 20upx;
	}

	.typecheckbox view.active {
		background: #FF3637;
		color: #fff;
	}

	.guize {
		width: 502upx;
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		margin: 0 auto;
		margin-top: -104upx;
		padding: 48upx;
		/* box-sizing: border-box; */
		color: #fff;
	}

	.guize .title {
		text-align: center;
		margin-bottom: 28upx;
	}

	.guize .g_item {
		font-family: PingFang-SC-Medium;
		font-size: 24upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;    
		word-break: break-all;
	}

	.shadowbox {
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.myrewards {
		width: 600upx;
		min-height: 80upx;
		background: #FFEEDF;
		border: 10upx solid #F2692F;
		color: #333;
		font-size: 24upx;
		font-family: PingFang-SC-Medium;
		border-radius: 40upx;
		padding-bottom: 20upx;
	}

	.myrewards .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding-top: 36upx;
		justify-content: center;
	}

	.myrewards .itembox {

		max-height: 320upx;
		overflow-y: auto;
	}

	.myrewards .item {
		width: 100%;
		height: 66upx;
		padding: 0 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
