<template>
	<view class="">

		<view class="index-home">
			<!-- 	<view class="logo">
				<image src="../static/images/logo.png" mode="widthFix"></image>
			</view> -->

			<view class="title1">
				{{codeMess ? codeMess.name : '扫码领红包'}}
			</view>
			<!-- <view class="rule" @click="rule">
				扫码赢红包活动规则>
			</view> -->
			<view class="packet" v-if="wxStatus==0 && redStatus==false" :style="{backgroundImage:'url('+ (codeMess.cover ? codeMess.cover : '') +')'}">
				<view class="btimg" v-if="is_wait_money!==1">
				
				</view>
				<button :class="status==0 ? 'chai' : 'chai1'" @click="openPacket()" v-if="is_wait_money!==1"
					:disabled="chai">
					開
				</button>
			</view>
			<view class="packet" v-else   style="background-image: url(../static/images/bg-2.png);background-size: 300rpx;background-position: center 26%;">
				<view class="btimg">
					<!-- <image src="../static/images/bt.png" mode=""></image> -->
					<view class="content-con" v-if="wxStatus==1">
						<view class="">
							<view class="money" style="font-size: 32px;margin-top: 40px;padding-top: 20px;">
								无效码请重试
							</view>
						</view>
						<view class="history" @click="skipDetail()">
							红包领取记录>
						</view>
					</view>
					<view class="content-con" v-if="wxStatus==2">
						<view class="">
							<view class="money" style="font-size: 32px;margin-top: 40px;padding-top: 20px;">
								红包已领取
							</view>
					
						</view>
						<view class="history" @click="skipDetail()">
							红包领取记录>
						</view>
					</view>
					<view class="content-con" v-if="wxStatus==0">

						<view class="" v-if="type==0 &&money=='0.00'">
							<view class="money" style="font-size: 32px;margin-top: 40px;">
								抱歉，没有中奖
							</view>
							<view class="money" style="font-size: 15px;margin-top: 20px;font-weight: 600;">
								本次未中奖哦，再接再厉
							</view>
						</view>
						<!-- 当为现金红包时 -->
						<view class="" v-if="type==0 && money!=='0.00'">
							<view class="title">
								恭喜发财，大吉大利
							</view>
							<view class="money">
								<text>
									{{money}}<text class="money1">元</text>
								</text>
							</view>
						</view>
						<!-- 	<view class="tips" v-if="type==0">
							红包可能会延迟几分钟到账
						</view> -->
						<view class="history" @click="skipDetail()">
							红包领取记录>
						</view>
					</view>
				</view>

			</view>
			<!-- <view class="content">
				<view class="content-top">

				</view>
			</view> -->
			<!-- 无效码时 -->
			<!-- 
			<view class="history" @click="statistics()">
				领取记录>
			</view> -->
		</view>

	</view>
</template>

<script>
	var app = getApp()

	let countTime
	export default {
		data() {
			return {
				prop: false,
				imageDetails: '', //奖品详情
				status: 0,
				lng: 113.66072,
				lat: 34.79977,
				redStatus: false,
				key: "",
				product: app.globalData.product,
				money: '',
				userStatus: '',
				is_auth: '',
				code: 'mead',
				wxStatus: 0, //是否为无效码0否，1是
				subscribe: '',
				frameShow: false, //扫码弹框
				is_wait_money: 0,
				chai: true,
				type: 0, //红包，1实物
				spoil: '', //实物信息
				canclick: false, ///是否可以点击
				innerAudioContext: '',
				codeMess:{
					name:'',
					cover:''
				}
			}
		},

		onLoad(options) {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = false;
			this.innerAudioContext.src = '../static/images/bgm_1.mp3';

			let that = this
			// this.code = options.code
			if (options.state) {
				this.code_no = options.state
				app.globalData.code_no = options.state
			} else {
				this.code_no = options.no
				app.globalData.code_no = options.no
			}


			// uni.showLoading({
			// 	mask: true
			// })
			countTime = setInterval(function() {
				if (uni.getStorageSync('token')) {
					that.subscribe = app.globalData.subscribe
					let params = {
						code_no: that.code_no,
						// 线上代码替换下边
						// code_no: 'aWQyrv2GgrPGw9FPYxlU6A7canandgXO'
					}
					that.codeStatus(params)
					console.log('定时器')
					clearInterval(countTime)
				} else {

					console.log('这是首页')
				}
			}, 100)
		},
		methods: {
			goHistory() {
				uni.navigateTo({
					url: './record'
				})
			},
			closeImage() {
				this.prop = false
			},
			//查看奖品详情
			lookDetail() {
				this.imageDetails = this.spoil.cover
				this.prop = true
			},
			closeFrame: function() {
				this.frameShow = false
			},
			//关注公众号
			followPublic: function() {
				this.frameShow = true
			},
			//活动规则
			rule: function() {
				uni.navigateTo({
					url: './rule'
				})
			},
			//判断码状态
			codeStatus: function(params) {
				uni.showLoading({
					mask: true
				})
				app.request('/trace/status', params, 'get').then(res => {
					console.log(res, "码状态")
					uni.hideLoading();
					if (res.code == 200) {
						this.codeMess=res.data.product
						let codeStatus = res.data.status
						this.wxStatus = 0
						this.chai = false

						if (codeStatus == false) {
							this.redStatus = true
							this.wxStatus = 2
						}
					} else if (res.code == 422001) {
						this.wxStatus = 1
						console.log('ooooo')

					} else {

						uni.showToast({
							title: res.message,
							icon: 'none'
						})

					}

				}).catch(err => {
					console.log(err, '码状态1')
					// uni.showToast({
					// 	title: res.data.message,
					// 	icon: 'none'
					// })
					uni.hideLoading()
				})
			},
			skipDetail: function() {
				uni.navigateTo({
					url: './record'
				})
			},
			// 拆红包
			openPacket: function() {
				let that = this
				let subscribe = app.globalData.subscribe
				let is_auth = uni.getStorageSync('is_auth')
				let token = uni.getStorageSync('token')

				//线上代码解开下边
				if (!this.code && !token) {
					console.log(this.code)
					let code_no = this.code_no
					window.location.replace(
						"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx22dc4d8cbc0a192ds&redirect_uri=http://l4j.cn&response_type=code&scope=snsapi_base&state=${code_no}#wechat_redirect"
					)
					return
				}

				if (this.canclick == true) {
					uni.showToast({
						title: '红包正在开启',
						icon: 'none'
					})
					return
				} else {

					this.canclick = true
					uni.showLoading({
						title: '排队中...',
						mask: true
					})

					this.status = 1
					let data = {
						// key: this.key,
						// code_no: 'Na2xn7b5c0rAHvHiQ9HJ7KjtRJx6PkjQ',
						// lat: 31.325152,
						// lng: 120.558957,
						//线上代码去掉替换上边
						code_no: this.code_no,
						// lat: app.globalData.latitude,
						// lng: app.globalData.longitude,
					}
					app.request('/trace/rob-hot-money', data, 'post').then(res => {
						this.canclick = false
						uni.hideLoading()
						if (res.code == 200) {
							//播放开红包声音特效

							this.innerAudioContext.play(() => {
								console.log('开始播放');
							});
							this.innerAudioContext.onError((res) => {
								console.log(res.errMsg);
								console.log(res.errCode);
							});
							setTimeout(function() {
								console.log(res, '开红包')
								that.money = res.data.money
								that.is_wait_money = res.data.is_wait_money
								if (res.data.type) {
									this.type = res.data.type
								} else {
									this.type = 0
								}
								that.spoil = res.data.spoil
								that.redStatus = true

							}, 500)



						} else if (res.code == 425001) {
							this.redStatus = true
							this.wxStatus = 2
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})

						}

					}).catch(err => {
						console.log(err, 'cuowu')
						uni.showToast({
							title: '请求超时请重试',
							icon: 'none'
						})
						this.canclick = false
					})
				}
				// }
				setTimeout(function() {
					that.status = 0
				}, 2000)

			},
			statistics() {
				uni.navigateTo({
					url: './statistics'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.5);
		text-align: center;

		image {
			height: 250px;
			width: 250px;
			margin: 0 auto;
			margin-top: 40%;
		}

		.cha {
			height: 40px;
			width: 40px;
			border: solid 1px #FFFFFF;
			border-radius: 50%;
			margin: 0 auto;
			margin-top: 20px;
			display: block;

		}
	}

	page {
		background: linear-gradient(134deg, #ff714e 0%, #eeaca3 100%);
		height: 100vh;

		.frame {
			background-color: rgba($color: #000000, $alpha:0.6);
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			z-index: 999999;
			width: 100%;
			text-align: center;

			.frame-title {
				font-size: 32rpx;
				margin-top: 30rpx;
				color: #FFFFFF;
			}

			.frame-cha {
				height: 60rpx;
				margin-top: 20%;
				width: 60rpx;
			}
		}

		.frame-image {
			height: 250px;
			width: 250px;
			margin-top: 45%;
		}

		.guanzhu {
			height: 50px;
			line-height: 50px;
			padding: 0 50rpx;
			font-size: 16px;
			background-color: #FFFFFF;
			display: flex;
			border-top: solid 1px #FF9541;
			color: #fff;
			background: linear-gradient(#FF9541, #ffb885);

			.guanzhu-left {
				flex: 1;
			}

			.guanzhu-right {
				flex: 0 0 70px;
				height: 30px;
				font-size: 14px;
				text-align: center;
				line-height: 30px;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin-top: 10px;
				background-color: #DE6301;
			}
		}

		.index-home {
			position: relative;

			.title1 {
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				margin-bottom: 20px;
				// margin-top: 20px;
				padding-top: 20px;
				color: #ebcd9a;
			}

			.history {
				// position: absolute;
				// right: 5px;
				padding: 5px 10px;
				// top: 5px;
				// margin-top: 10px;
				font-size: 16px;
				font-family: PingFang SC;
				// font-weight: bold;
				text-align: center;
				line-height: 21px;
				// background-color: #007AFF;
				color: #AC5102;
				opacity: 1;
			}


			.rule {
				text-align: center;
				font-size: 28rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #AC5102;
			}

			.packet {
				margin: 0 auto;
				width: 90%;
				overflow: hidden;
				min-height: 70vh;
				// margin-top: 50px;
				padding: 30px 0;
				// background: linear-gradient(180deg, #F53A1D 0%, #F32A0A 100%);
				background-color:#F53A1D;
				// background-image: url(../static/images/img-bg.jpg);
				// background-position: center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				opacity: 1;
				border-radius: 16px;
				position: relative;
				z-index: 85;



				.tips {
					position: absolute;
					z-index: 50;
					font-size: 14px;
					color: #fee6ce;
					width: 100%;
					text-align: center;
					// bottom: 40px;
					top: 300px;
					left: 0;
				}

				.wuxiao {
					position: absolute;
					top: 90px;
					width: 120px;
					height: 120px;
					left: 90px;
				}

				.wuxiao-tips {
					position: absolute;
					top: 250px;
					color: #fee6ce;
					font-size: 16px;
					text-align: center;
					width: 100%;
					// background-color: #007AFF;

				}

				.btimg {
					position: absolute;
					width: 100%;
					// top: 200px;
					bottom: -0px;
					// bottom: 0;
					z-index: 10;
					height: 280px;
					background-image: url(../static/images/bt.png);
					background-size: 100%;
					background-position: bottom;
					background-repeat: no-repeat;
					// background-color: #007AFF;
					left: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.chai {
					position: absolute;
					z-index: 20;
					bottom: 90px;
					height: 100px;
					left: 35%;
					width: 100px;
					border-radius: 50%;
					// background: linear-gradient(180deg, #FDDEB6 0%, #FEBD87 100%);
					background-color: #ebcd9a;
					border-radius: 50%;
					font-size: 45px;
					font-family: PingFang SC;
					// font-weight: 550;
					line-height: 100px;
					text-align: center;
					// color: #F73517;
					color: #3b3b3b;

					opacity: 1;
				}

				.chai1 {
					position: absolute;
					z-index: 20;
					// top: 190px;
					bottom: 90px;
					height: 100px;
					left: 35%;
					margin: 0 auto;
					width: 100px;
					border-radius: 50%;
					// background: linear-gradient(180deg, #FDDEB6 0%, #FEBD87 100%);
					background-color: #ebcd9a;
					border-radius: 50%;
					font-size: 45px;
					font-family: PingFang SC;
					// font-weight: 550;
					line-height: 100px;
					text-align: center;
					// color: #F73517;
					color: #3b3b3b;
					-webkit-transition: 1s;
					transition: 1s;
					-webkit-transform: rotateY(360deg);
					transform: rotateY(360deg);
					opacity: 1;
				}

				.content-con {
					// height: 300px;
					// background-image: url(../static/images/bt.png);
					// background-position: center;
					// background-size: 100% auto;
					// background-repeat: no-repeat;
					// margin-top: -60px;
					// padding-top: 50px;
					margin-top: 145px;

					.title {
						text-align: center;
						// font-size: 40px;
						// font-family: HelloFont WenYiHei;
						// font-weight: 700;
						// line-height: 21px;
						color: #ebcd9a;
						// opacity: 1;
						// text-align: center;
						// margin-top: 30px;
						// margin-bottom: 30px;
					}

					.money {
						font-size: 50px;
						font-weight: bold;

						color: #ffd999;
						opacity: 1;
						text-align: center;
						// margin-top: 30px;
						letter-spacing: 2px;
						// margin-bottom: 10px;

						.money1 {
							font-size: 16px;
							color: #ffd999;
							font-weight: 400;
							margin-left: 2px;
							opacity: 1;
							text-align: center;
							// margin-top: 30px;
							// margin-bottom: 30px;
						}
					}

					// .tips {
					// 	text-align: center;
					// 	color: #ebcd9a;
					// 	font-size: 14px;

					// }

					.history {
						color: #ebcd9a;
						font-size: 14px;
					}

					// border-radius: 0 0 35% 35%;
				}

			}

			.content {
				height: 100vh;
				width: 100%;
				background-color: #f35543;

				.content-top {
					height: 60%;
					width: 100%;
					background-image: url(../static/images/img-bg.jpg);
					// background-position: center;
					background-repeat: no-repeat;
					background-size: 100% auto;

				}



				// .title {
				// 	font-size: 48px;
				// 	font-family: HelloFont WenYiHei;
				// 	font-weight: 700;
				// 	line-height: 21px;
				// 	color: #FFDDBB;
				// 	opacity: 1;
				// }

			}

			.saoma {
				margin-bottom: 30px;

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

			.saomiao-gz {
				font-size: 16px;
				color: #AC5102;
				margin-top: 10px;
				line-height: 25px;

				.font {
					color: #F73517;
					font-weight: 600;
				}
			}

			.step {
				width: 100%;
				margin-top: -30px;
				height: 60px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bottom {
				padding: 20px 50px;
				margin: 0;
				// background: linear-gradient(134deg, #FF9541 0%, #FF9541 100%);

				.border {
					padding: 17px 54px;
					height: 100%;
					border-radius: 20upx;
					// margin:20px 50px;
					background-color: #DE6301;

					.pic {
						// height:80px;
						width: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.pic1 {
						width: 100%;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.text {
						text-align: center;
						border-radius: 8px;
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 400;
						// line-height: 21px;
						margin-top: 20upx;
						color: #FFFFFF;
						opacity: 1;
					}
				}
			}
		}
	}
</style>
