<template>
	<view class="container">
		<view>
			<image style="width: 100%;display: none;" src="../../static/img/123456.png" mode="aspectFit"></image>
		</view>
		<view id="showTips">
			<image src="../../static/img/shareImg.png" mode="aspectFit"></image>
		</view>
		<view id="qrcode" ref="qrcode">
			<image class="bg" src="../../static/img/qrcode_bg.png" mode="aspectFill">
			</image>
			<view class="main">
				<h5 id="school_name">安智教育学校</h5>
				<view class="info" style="padding-top: 50rpx;">
					<view class="top_tip">(二维码仅限教职工使用)</view>
					<view class="class_name">企业微信教职工采集签约助手</view>
					<view class="qrcode_box">
						<view id="comFirmCode"></view>
						<image src="../../static/img/logo.png" class="sub" mode="aspectFit"></image>
					</view>
					<view class="tip">扫码或长按识别二维码<br />登录校智付小程序</view>
					<view class="top_tip" id="DateTime">过期</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	console.log(location.href)
	var HOST = location.host;
	var fromApp = ''; //校智付还是光海   wxwork / ghwxwork
	export default {
		name: "WxworkTearch",
		data() {
			return {

			}
		},
		created: function() {

		},
		mounted: function() {
			let {
				screenHeight
			} = uni.getSystemInfoSync()
			console.log(screenHeight / 750);
			if (this.WxWordBro()) { //企微
				$('#showTips').css('display', 'block');
				weui.topTips('请在微信中打开');
				return
			}
			if (!this.getQueryParams('hex')) {
				weui.topTips('跳转参数hex不能为空');
				return
			}
			if (!this.getQueryParams('app')) {
				weui.topTips('跳转参数app不能为空');
				return
			}
			let this_ = this;
			this.$nextTick(function() {
				$('#qrcode').css('display', 'block');
				$('#school_name').html(decodeURI(this_.getQueryParams('schoolname')));
				fromApp = this_.getQueryParams('app');
				setTimeout(function() {
					this_.CreateQrCode(screenHeight / 750);
					this_.getDate();
				}, 300)
			})
		},
		methods: {
			//获取参数
			getQueryParams(params) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == params) {
						return pair[1];
					}
				}
				return (false);
			},
			//生成二维码
			CreateQrCode(pit) {
				var qrCode = new QRCode(document.getElementById("comFirmCode"), {
					width: 201 * pit,
					height: 201 * pit
				})
				var url = `https://${HOST}/wechat/qr/${fromApp}?hex=${this.getQueryParams('hex')}&et=123456`;
				console.log('url = ' + url)
				qrCode.makeCode(url);
			},
			//判断是否企微浏览器
			WxWordBro() {
				var agent = navigator.userAgent.toLowerCase();
				if (agent.match(/WxWork/i) == "wxwork") {
					return true;
				} else {
					return false;
				}
			},
			//设置二维码有效期为1个月
			getDate() {
				let addZero = (num) => (num < 10 ? '0' + num : num),
					date = new Date(),
					m = date.getMonth();
				date.setMonth(m + 1);
				let endTime = date.getFullYear() + '年' + addZero(date.getMonth() + 1) + '月' + addZero(date.getDate()) +
					'日';
				document.getElementById('DateTime').innerText = endTime + '过期';
			}


		}
	}
</script>

<style scoped lang="scss">
	body {
		margin: 0;
		overflow: hidden;
	}

	#qrcode {
		top: 20vh;
		display: none;
		position: relative;
		text-align: center;
	}

	.top_tip {
		color: #AAAAAA;
		font-size: 14rpx;
		margin-top: 5rpx;
	}

	#showTips {
		text-align: center;
		display: none;
		overflow: hidden;
		width: 100vw;
		height: 100vh;
		background: #F9F9F9;
	}

	#showTips>image {
		margin-top: 40rpx;
	}

	.qrcode_box {
		position: relative;
	}

	.class_name {
		font-size: 14rpx;
		margin-bottom: 10rpx;
	}

	.main {
		position: absolute;
		top: 0;
		width: 70vw;
		margin-left: 15vw;
	}

	.bg {
		width: 70%;
		height: 750rpx;
	}

	.tip {
		margin: 10rpx 0;
		font-size: 14rpx;
	}

	#comFirmCode {
		margin-left: 80rpx;
	}


	.sub {
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		left: 31vw;
		top: 20vw;
	}

	#school_name {
		font-size: 25rpx;
		line-height: 47rpx;
		color: #FFFFFF;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 30rpx;
	}

	@media screen and (min-width: 900rpx) {
		#qrcode {
			top: 0;
			position: relative;
			margin: 10vh auto;
		}

		.bg {
			width: 360rpx;
			height: 490rpx;
			margin: 0;
		}

		#school_name {
			line-height: 65rpx;
		}

		.top_tip {
			color: #AAAAAA;
			font-size: 16rpx;
			margin: 10rpx 5rpx;
		}

		.main {
			width: 360rpx;
			margin-left: 0;
			left: calc(50vw - 180rpx);
		}


		.sub {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			left: 160rpx;
			top: 80rpx;
		}
	}
</style>
