<template>
	<view class="page" style="height:100vh">
		<!-- #ifdef MP-WEIXIN -->
		<image class="turnTable-home" @click="getHome" src="../../static/home.png"></image>
		<!-- #endif -->
		<image class="turnTable-bg" mode="aspectFill" src="https://zxzhdc.zx-xcx.com/dining/turnTable-bg.png"></image>
		<view class="header-t">
			幸运大转盘
		</view>
		<view class="main flex-y-center">
			<view class="canvas-container flex-center" 
			style="background-image: url(https://zxzhdc.zx-xcx.com/dining/canvas-container.png);">
				<view class="canvas-container-home">
					<view :animation="animationData"
						:class="is_anim==1?'animationintel':is_anim==2?'animationintel_amd':''" class="canvas-content"
						id="zhuanpano">
						<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="../../static/xiaolian.png"
										v-if="iteml.type ==0"></image> -->
									<!-- 	<image v-else class="canvas-item-text-img" src="../../static/youhuiquan.png">
									</image> -->
								</view>
							</view>
						</view>
					</view>
					<view class="canvas-btn flex-center">
						<image src="https://zxzhdc.zx-xcx.com/dining/zheng.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="turnTable-btn">
			<view class="turnTable-btn-wd flex-center">
				<image class="turnTable-btn-icon" src="../../static/btn.png"></image>
				<view v-if="!is_tab" class="turnTable-btn-cj flex-center" @click="playReward">
					立即抽奖
				</view>
				<view v-else class="turnTable-btn-cj flex-center" @click="stopDraw">
					停止抽奖 <block v-if="is_stop">({{time_out+'s'}})</block>
				</view>
			</view>
		</view>

		<view class="turnTable-tip">
			注：中奖后请找商家领取礼品哦
		</view>

		<view class='main-content flex-center' v-if="showShareModal">
			<view class="share-modal">
				<view class='modal-box-type1' style="width: 500rpx;" v-if="skip.skip_type==0">
					<view class='modal-text'>{{hear_title}}</view>
				</view>
				<view class='modal-box-type1' v-if="skip.skip_type==1">
					<view class='modal-text'>{{hear_title}}</view>
					<view class='modal-text'> <text>添加微信了解更多优惠</text></view>
					<image class="modal-img" @click="previewImage" :src="URL+skip.group_qrcode"></image>
					<view class="modal-box-tip">
						<!-- #ifdef MP-WEIXIN -->
						请点击图片，保存图片识别
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						请点击图片，进行截图识别添加
						<!-- #endif -->
					</view>
				</view>
				<view class='modal-box-type2' v-if="skip.skip_type==2"
					style='background-image: url(https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/share_modal_bg.png)'>
					<view class='modal-text' :style="'margin-bottom:'+(is_hear==2?'80rpx':'32rpx')">{{hear_title}}
					</view>
					<view class='modal-text'> <text>{{is_hear==1?'前往了解更多优惠':''}}</text></view>
					<view @click="goTo" class='flex flex-row flex-x-center hongbao-info-btn'>
						<view class='flex-y-center'>{{is_hear==1?'前往了解':'确定'}}</view>
					</view>
				</view>
				<view @tap='closeShareModal' class='modal-close'>
					<image :src='page_img.close'></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	let hideLoading = true;
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				bg_img: 'https://zxzhdc.zx-xcx.com/dining/circle1.png',
				awardsConfig: {
					chance: true, //是否有抽奖机会
					list: [], //奖品列表 
				},
				background: "",
				awardsList: {},
				animationData: {},
				lotteryNum: 0,
				is_anim: 0,
				is_tab: false,
				runDeg: 0,
				is_stop: false,
				page_img: {
					wechat: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/wechat.png",
					close: "https://www.zx-app.cn/addons/zjhj_mall/core/web/statics/images/fxhb/close.png"
				},
				showShareModal: false,
				time_out: 5,
				skip: {},
				// store_id: "",
				hear_title: "您已参与过活动，谢谢关注！",
				is_hear: 1
			}
		},
		computed: {
			...mapState(['setColor', 'store_id', 'userInfo', 'turntable_id']),
			dateRange() {
				const {
					turntable_id,
					store_id,
					userInfo
				} = this;
				return {
					turntable_id,
					store_id,
					userInfo,
				}
			}
		},
		
		onLoad: function(e) {
			console.log(e, "e")
			// 获取奖品列表
			if (this.store_id && this.userInfo.id && this.turntable_id) {
				this.initdata();
				this.copy();
			}
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
		},
		watch: {
			
			setColor(val) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.$store.state.color,
				})
			},
			
			dateRange: {
				handler(val) {
					console.log(val, "val")
					if (val.store_id && val.turntable_id && val.userInfo.id) {
						this.initdata();
						this.copy();
					}
				},
				deep: true,
			},
		},

		methods: {
			/**
			 * @param  需结合实体大转盘
			 */

			copy() {
				if (getApp().globalData.isApp) {
				this.$http.request('xcx/funeng', {
					store_id: this.store_id,
				}, "", "", hideLoading).then(res => {
					getApp().globalData.isApp = false
					let way_power = res.data.way_power;
					let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
					// console.log(content)
					uni.setClipboardData({
						data: content,
						success: function (r) {
							console.log('success',r);
						}
					});
					// // #ifdef MP-WEIXIN
					// 	wx.showLoading();
					// 	uni.setClipboardData({
					// 		data: content,
					// 		success: (res) => {
					// 			// console.log('赋能：', res)
					// 			wx.hideLoading()
					// 		}
					// 	});
					// // #endif
					// // #ifdef MP-ALIPAY
					// uni.setClipboard({
					// 	text: content,
					// 	success: (res) => {
					// 		// console.log('赋能：', res)
					// 	}
					// });
					// // #endif
				})
						}
			},

			// 预览
			previewImage() {
				let URL = this.URL + this.skip.group_qrcode;
				uni.previewImage({
					urls: [URL] // 需要预览的图片http链接列表
				})
			},

			// 跳转其他小程序
			goTo() {
				// #ifdef MP-WEIXIN
				var appId = this.skip.mini_appid,
					path = this.skip.mini_pages;
				// #endif
				// #ifdef MP-ALIPAY
				var appId = this.skip.alipay_appid,
					path = this.skip.alipay_pages;
				// #endif
				uni.navigateToMiniProgram({
					appId: appId,
					path: path,
					extraData: {
						foo: 'bar'
					},
					envVersion: 'release',
					success(res) {
						// 打开成功
					}
				})
			},

			closeShareModal() {
				this.showShareModal = false;
			},

			getHome() {
				uni.reLaunch({
					url: "../index/index"
				})
			},

			// 查看奖品
			getmyPrize() {
				// let user_token=this.user_token,power_id=this.power_id;
				uni.navigateTo({
					url: "../coupon/coupon"
				})
				return;
			},

			close() {
				this.$refs.popup.close();
			},

			// 初始化抽奖数据
			initdata: function(id) {
				this.$http.request('activity/getDialData', {
					id: this.turntable_id,
					user_id: this.userInfo.id,
				}, "", "", hideLoading).then(res => {
					if (res.code == "200") {
						let list = [],
							remark = res.data.remark,
							obj = {};
						this.skip = res.data.skip;
						for (let i in remark) {
							if (remark[i]) {
								list.push({
									name: remark[i],
									idx: i
								})
							}
						}
						obj = {
							list: list,
							lottery_num: res.data.lottery_num,
						}
						this.awardsConfig = obj;
						this.lotteryNum = obj.lottery_num;
						this.awardsConfig.list.forEach(function(element, index) {
							element.index = index
						})
						this.drawAwardRoundel();
					}
				}).catch((res) => {
					console.log(res, "666")
				});
			},
			//画抽奖圆盘
			drawAwardRoundel: function() {
				var awards = this.awardsConfig.list;
				var awardsList = [];
				var turnNum = 1 / awards.length * 360;
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg', //每个奖品块旋转的角度
						lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
						award: awards[i].name, //奖品的名字,
					});
				}
				this.awardsList = awardsList;
			},
			// 启动转盘
			playReward() {
				if (this.lotteryNum <= 0) {
					this.showShareModal = true;
					this.is_hear = 1;
					// skip_type 1:进群码 2：小程序
					return
				}
				this.$http.request('activity/startDial', {
					id: this.turntable_id,
					user_id: this.userInfo.id,
				}, "", "", hideLoading).then(res => {
					if (res.code == '200') {
						this.is_tab = !this.is_tab;
						this.is_anim = 1;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				})
			},

			// 暂停转盘
			stopDraw() {
				if (this.is_stop) {
					return
				}
				let that = this;
				this.$http.request('activity/stopDial', {
					id: this.turntable_id,
					user_id: this.userInfo.id,
				}, "", "", hideLoading).then(res => {
					console.log(res.data)
					if (res.code == '200') {
						// 停止秒数，默认5s
						var _timer = setInterval(() => {
							if (this.time_out <= 0) {
								this.time_out = 6;
								clearInterval(_timer)
							}
							this.time_out--
						}, 1000)
						this.is_stop = true;
						var awardIndex = Number(res.data.num - 1); //中奖奖品
						var awardsNum = this.awardsConfig.list.length; //奖品列表
						var runNum = 1; //旋转周  
						var duration = 2000; //时长 
						// 旋转角度
						that.runDeg = that.runDeg || 0;
						// let preDeg = that.runDeg;
						// console.log(awardIndex, awardsNum, "awardIndex")
						that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 /
							awardsNum)) + 1
						var animationRun = uni.createAnimation({
							duration: duration,
							timingFunction: 'ease'
						})
						animationRun.rotate(that.runDeg).step();
						that.animationData = animationRun.export();
						setTimeout(() => {
							this.is_anim = 3;
							this.is_tab = !this.is_tab;
							this.is_stop = false;
							this.lotteryNum = Number(this.lotteryNum) - 1;
							this.showShareModal = true;
							this.hear_title = res.message;
							this.is_hear = 2;
						}, 5000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
				})
			},


		}
	}
</script>
<style>
	page {
		width: 100%;
		background: #FFFFFF;
		overflow-x: hidden;
	}

	.page {
		height: 100%;
		/* background: rgb(245,76,102); */
	}

	.turnTable-home {
		position: fixed;
		left: 20rpx;
		top: 100rpx;
		width: 66rpx;
		height: 61rpx;
		z-index: 999;
	}

	.main {
		height: 100%;
	}

	.animationintel {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.animationintel_amd {}

	.header-t {
		position: absolute;
		width: 100%;
		text-align: center;
		font-size: 100rpx;
		color: #FFFFFF;
		z-index: 4;
		top: 150rpx;
		left: 0;
		font-family: PingFang SC, PingFang SC-Semibold;
	}

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

	.turnTable-bg {
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.turnTable-btn {
		position: absolute;
		width: 100%;
		bottom: 8%;
		z-index: 99;
	}

	.turnTable-tip {
		position: absolute;
		width: 100%;
		bottom: 4%;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.turnTable-btn-wd {
		position: relative;
	}

	.turnTable-btn-cj {
		width: 100%;
		height: 104rpx;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		color: #BC333B;
	}

	.turnTable-btn-icon {
		width: 514rpx;
		height: 126rpx;
	}

	/* 转盘 */
	.canvas-container {
		width: 750upx;
		height: 750upx;
		background-size: cover;
		border-radius: 50%;
		position: relative;
	}

	.canvas-container-home {
		position: relative;
		width: 600upx;
		height: 600upx;
	}

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

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

	.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: 26rpx;
	}

	.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: 228rpx;
		top: 199rpx;
		z-index: 4;
		width: 150rpx;
		height: 189rpx; */
		left: 163rpx;
		top: 155rpx;
		z-index: 4;
		width: 280rpx;
		height: 280rpx;
		border-radius: 50%;
		background: rgb(253, 92, 66);
		border: 4rpx solid rgb(252, 191, 90);
		color: #f4e9cc;
		line-height: 80rpx;

		text-align: center;
		font-size: 26rpx;
	}

	.canvas-btn image {
		width: 100%;
		height: 80%;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 100rpx;
		top: -66rpx;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 40upx;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: rgb(253, 92, 66);
	}

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

	.main-content {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 210;
		width: 100%;
		height: 100%;
		transition: 150ms;
	}

	.share-modal .modal-text {
		text-align: center;
		color: #888;
		margin-bottom: 32rpx;
		padding: 0 50rpx;
		/* margin-bottom: 80rpx; */
	}

	.modal-box-type1 {
		padding: 40rpx 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		text-align: center;
		width: 85%;
		margin: 0 auto;
	}

	.modal-box-tip {
		font-size: 26rpx;
		color: #999;
	}

	.modal-box-type2 {
		height: 816rpx;
		width: 606rpx;
		background-size: 100% 100%;
		background-color: #fff;
		border-radius: 16rpx;
		padding-top: 464rpx;
	}

	.modal-img {
		width: 350rpx;
		height: 350rpx;
	}

	.share-modal .modal-text text {
		font-size: 36rpx;
		color: #ffc73f;
		font-weight: bold;
	}

	.share-modal .modal-close {
		/* 	padding: 25rpx;
		position: fixed;
		left: 50%;
		margin-left: -50rpx;
		top: 50%;
		margin-top: 420rpx; */
		text-align: center;
		padding-top: 19rpx;
	}

	.share-modal .modal-close image {
		width: 70rpx;
		height: 70rpx;
	}

	.hongbao-info-btn {
		border-radius: 100px;
		height: 88rpx;
		border-radius: 999rpx;
		text-align: center;
		background: #ff5c5c;
		color: #fff;
		margin: 0 40rpx;
		position: relative;
	}

	.hongbao-info-btn image {
		width: 45rpx;
		height: 45rpx;
		margin-right: 20rpx;
		display: block;
	}

	.hongbao-info-btn .share-btn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		opacity: 0;
	}

	.share-btn {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		opacity: 0;
	}
</style>
