<template>
	<view class="coffeeIndex">
		<view class="topBox" :style="{paddingTop:`${statusNavBar}px`}">
			<view class="bg1"></view>
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/bg.png"
				mode="widthFix" style="width: 100vw;height: auto;" class="bg2"></image>
			<view class="nav">
				<u-icon name="arrow-left" size="40" @click="back"></u-icon>
			</view>
			<view class="welcomeText">
				你好,同学
			</view>
			<view class="scanBtn" @click="showPopup">
				<image
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/ScanCode.png"
					mode="heightFix" style="height: 37rpx; width: auto;margin-right: 10px;"></image>
				<text>消费码</text>
			</view>
		</view>
		<view class="goods">
			<view class="goodsItem goodsItem1">
				<view class="num">
					<text>{{pageData.SurplusBugNum||0}}</text>
					<text class="unit">杯</text>
				</view>
				<view class="goodsinfo">
					<view class="left">
						<view class="goodsinfoTitle">
							剩余已购
						</view>
					</view>
					<image
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png"
						mode="heightFix" style="height: 90rpx;width: auto;"></image>
				</view>
			</view>
			<view class="goodsItem goodsItem2">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/free.png"
					mode="heightFix" class="freeLogo"></image>
				<view class="num">
					<text>{{pageData.FreeNum||0}}</text>
					<text class="unit">杯</text>
				</view>
				<view class="goodsinfo">
					<view class="left">
						<view class="goodsinfoTitle">
							剩余赠送
						</view>
						<view class="validate">
							有效期:当月
						</view>
					</view>
					<image
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png"
						mode="heightFix" style="height: 90rpx;width: auto;"></image>
				</view>
			</view>
		</view>
		<view class="buyBtn" @click="jump('/coffee/buy')">
			<text>立即购买</text>
			<view class="tipBox" v-if="pageData.GiveAwayList&&pageData.GiveAwayList.length>0">
				<view class="tipText">
					买{{getGive().BuyNum}}赠{{getGive().GiveAwayNum}}
				</view>
				<view class="tipIcon"></view>
			</view>
		</view>
		<view class="logBtn">
			<view class="logitem buy" @click="jump(`/coffee/myOrder?addr=${pageData.Address}`)">
				购买记录
			</view>
			<view class="logitem spend" @click="jump('/coffee/mySpend')">
				消费记录
			</view>
		</view>

		<u-popup v-model="isShowQrcode" mode="center" @close="closeQrcode">
			<view class="qrcodeBox">
				<Qrcode ref="qrcode" :modal="modal_qr" :url="qrData" @hideQrcode="hideQrcode" themeColor="#000000"
					is_themeImg :themeImg="headImg" />
			</view>
		</u-popup>
		<u-popup v-model="isShowSuccess" :maskCloseAble="false" mode="center" @close="closePopup">
			<view style="margin: 60rpx;">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup3.png"
					mode="widthFix" style="width:546rpx;height:auto;display: block;"></image>
				<view class="viewBox">
					<view class="successText">
						使用成功
					</view>
					<view class="cup">
						1杯
					</view>
				</view>
				<view class="closeIcon" @click="closePopup">
					<u-icon name="close" color="#fefefe" size="60"></u-icon>
				</view>
			</view>
		</u-popup>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
	</view>
</template>

<script>
	import Qrcode from "./qrcode/ay-qrcode.vue"
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			Qrcode,
			auth
		},
		data() {
			return {
				statusNavBar: 0,
				modal_qr: false,
				UserId: 0,
				timestamp: 0,
				qrData: '', // 要生成的二维码值
				isShowQrcode: false,
				headImg: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png",
				pageData: {
					GiveAwayList: []
				},
				isShowSuccess: false,
				timer: null,
				flag: false, //是否继续请求扫码结果
				showAuth: false,
			}
		},

		onLoad() {
			if (!uni.getStorageSync("mall_UserInfo")) {
			  this.showAuth = true;
			}
			this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
			let userInfo = uni.getStorageSync('mall_UserInfo')
			if (userInfo.Photo) {
				this.headImg = userInfo.Photo
			}
			this.UserId = userInfo.UserId
			this.getData()
		},
		onHide() {
			this.flag = false
		},
		methods: {
			getGive() {
				let res = {}
				for (let i = 0; i < this.pageData.GiveAwayList.length; i++) {
					if (this.pageData.GiveAwayList[i].GiveAwayNum > 0) {
						res = this.pageData.GiveAwayList[i]
						break
					}
				}
				return res
			},
			showPopup() {
				this.timestamp = new Date().getTime()
				this.qrData = encodeURIComponent(JSON.stringify({
					UserId: this.UserId,
					timestamp: this.timestamp
				}))
				this.showQrcode() //生成二维码
				this.isShowQrcode = true
				setTimeout(() => {
					this.flag = true
					this.getVerificat()
				}, 2000)
			},
			back() {
				uni.navigateBack()
			},
			// 展示二维码
			showQrcode() {
				let _this = this;
				setTimeout(async () => {
					this.modal_qr = true;
					await _this.$refs.qrcode.crtQrCode()
				}, 50)
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
			jump(url) {
				uni.navigateTo({
					url: "/pages" + url,
				})
			},
			getData() {
				this.request2({
						url: '/api/AppletCoffee/GetMyCoffeeCouponsInfo',
						data: {}
					},
					res => {
						this.pageData = res.data
					}
				);
			},
			getVerificat() {
				this.request2({
						url: '/api/AppletCoffee/GetMyCoffeeVerificatInfo',
						data: {
							Code: this.timestamp
						}
					},
					res => {
						if (res.data.State === 1) {
							this.isShowQrcode = false
							this.isShowSuccess = true
							this.getData()
							clearTimeout(this.timer)
						} else if (res.data.State === 2 && this.flag) {
							this.timer = setTimeout(() => {
								this.getVerificat()
							}, 2000)
						}
					}
				);
			},
			closePopup() {
				this.isShowSuccess = false
			},
			closeQrcode() {
				this.modal_qr = false
				this.flag = false
				clearTimeout(this.timer)
			},
			reloadUserinfo() {
				this.getData()
			},
			//关闭登录窗口
			gbAuth() {
			  this.showAuth = false;
			  uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coffeeIndex {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.topBox {
		height: 725rpx;
		position: relative;
	}

	.bg1 {
		width: 600rpx;
		height: 420rpx;
		border-radius: 50%;
		background-color: #EFE9DA;
		position: absolute;
		top: -190rpx;
		left: -195rpx;
	}

	.bg2 {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
	}

	.nav {
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}

	.welcomeText {
		font-size: 46rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #232323;
		position: absolute;
		top: 150rpx;
		left: 65rpx;
	}

	.scanBtn {
		width: 185rpx;
		height: 78rpx;
		background-color: #3E766E;
		border-radius: 39rpx;
		position: absolute;
		top: 235rpx;
		left: 65rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		// font-weight: 500;
		color: #FFFFFF;
	}

	.goods {
		position: relative;

		.goodsItem {
			width: 320rpx;
			height: 216rpx;
			background: linear-gradient(90deg, #F7F7F7, #FFFFFF);
			box-shadow: 0px 27rpx 40rpx 0rpx rgba(76, 76, 76, 0.1);
			border-radius: 20rpx;
			position: absolute;
			top: -40rpx;
			padding: 40rpx 25rpx 30rpx 30rpx;

			.num {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
				margin-bottom: 15rpx;
				line-height: 40rpx;

				.unit {
					font-size: 28rpx;
					margin-left: 10px;
					font-weight: 500;
				}
			}
		}

		.goodsinfo {
			display: flex;
			justify-content: space-between;

			.goodsinfoTitle {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin: 10rpx 0;
			}

			.validate {
				font-size: 20rpx;
				font-weight: 500;
				color: #CCCCCC;
			}
		}

		.goodsItem1 {
			left: 40rpx;
		}

		.goodsItem2 {
			right: 40rpx;
			overflow: hidden;

			.freeLogo {
				height: 80rpx;
				width: auto;
				position: absolute;
				top: 0;
				right: 0;
				border-top-right-radius: 20rpx;
			}
		}
	}

	.buyBtn {
		width: 656rpx;
		height: 90rpx;
		background-color: #3E766E;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 295rpx auto 0;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: relative;

		.tipBox {
			position: absolute;
			top: -20rpx;
			left: 390rpx;

			.tipText {
				width: 146rpx;
				height: 45rpx;
				background-color: #F3ED4A;
				border-radius: 22.5rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #484501;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.tipIcon {
				width: 0;
				height: 0;
				border-top: 15rpx solid #F3ED4A;
				border-right: 10rpx solid transparent;
				border-left: 6rpx solid transparent;
				margin-left: 20rpx;
			}
		}
	}

	.logBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 90rpx;

		.logitem {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3E766E;
		}

		.buy {
			margin-right: 130rpx;
		}
	}

	.viewBox {
		width: 546rpx;
		height: 286rpx;
		background-color: #FFFFFF;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		padding-top: 40rpx;

		.cup {
			font-size: 40rpx;
			font-weight: 800;
			color: #3E766E;
			text-align: center;
			margin-bottom: 6rpx;
		}

		.successText {
			font-size: 32rpx;
			color: #111111;
			font-weight: 700;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.user {
			font-size: 28rpx;
			font-weight: 500;
			color: #888888;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.closeIcon {
		margin: 35rpx auto 0;
		display: flex;
		justify-content: center;
	}

	.qrcodeBox {
		width: 220px;
		height: 220px;
		border: 1px solid #000000;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 5;
	}
</style>