<template>
	<div class="payQrCode">
		<!-- <m-header v-if="headerStatus" /> -->

		<div class="payCode" v-if="payment">
			<!-- <h3 class="popup-title">请在60S内完成支付</h3> -->
			<h3 class="popup-title">请截图下方二维码<br />登录{{ payTypeString }}扫码支付</h3>
			<!-- @click="onChangeCode" -->
			<div id="qrcode">
				<!-- :logoSrc="config.imagePath" -->
				<vue-qr v-if="config.value" :text="config.value" :margin="10" :size="250" />
			</div>
			<p class="code-tips" v-if="codeRefreshStatus">点击二维码进行刷新</p>
			<p class="popup-tips">
				使用说明：<br/>
				1.长按二维码保存图片到相册(或截屏保存到相册)<br/>
				2.打开{{ payTypeString }}扫一扫<br/>
				3.选择相册中的二维码
			</p>
		</div>
	</div>
</template>

<script>
// /* eslint-disable */
import VueQr from 'vue-qr'
// import MHeader from '@/components/MHeader'
import { paymentResult } from "./AdapayApi"
// import qs from 'qs' executePayment
// changeTwoDecimal,
// 	getUrlCode
//  browser,
import { browser } from '@/utils/common'
export default {
	name: 'payQrCode',
	components: {
		VueQr
	},
	data() {
		let query = this.$route.query
		return {
			headerStatus: false,
			codeRefreshStatus: false, // 是否进行刷新
			// 支付宝: alipay_qr;  微信: wx_pub
			payType: query.payType, // 支付方式
			payTypeString: query.payType == 'wx_pub' ? '微信' : '支付宝',
			payment: query.payment ? JSON.parse(query.payment) : null, // 对象
			openId: null,
			config: {
				value: null,//显示的值、跳转的地址
				// imagePath: require('../../assets/images/icon_app.png')//中间logo的地址
				// imagePath: query.payType == 'wx_pub' ? require('../../assets/images/wx_icon.png') : require('../../assets/images/zfb.png')
			},
			orderTimer: null,
			platform: query.platform
			// query.platform
		}
	},
	mounted() {
		// 判断是否在app里面
		if (!browser().android && !browser().iPhone) {
			this.headerStatus = true
		} else {
			document.title = '支付扫码'
		}
		if(this.platform == 'manager') { // 如果是教务端则显示头部
			this.headerStatus = true
		}
		document.title = '支付扫码'
		// 判断是否有支付对象
		if(!this.payment || !this.payType) {
			this.$dialog.alert({
				message: '支付订单信息错误请重新支付'
			}).then(() => {
				this.$router.back()
			})
		} else {
			// 判断是否是微信浏览器支付 并且是微信支付
			// 微信支付
			let { orderNo, sign, amount, orderBody, orderSubject } = this.payment.payMap
			this.config.value = window.location.origin + '/#/payCenter?orderNo=' + orderNo + '&sign=' + sign + '&amount=' + amount + '&payType=' + this.payType + '&orderBody=' + orderBody + '&orderSubject=' + orderSubject
			setTimeout(() => {
				this.getPaymentOrderStatus()
			}, 3000)
		}
	},
	methods: {
		getPaymentOrderStatus() { // 循环查询订单
			let { orderNo } = this.payment.payMap
			let orderTimer = setInterval(() => {
				// 判断是否在当前路由，如果不是则清除定时器
				if(this.$route.name != 'payQRCode') {
					clearInterval(orderTimer)
					return
				}
				this.orderTimer = orderTimer
				paymentResult({ orderNo: orderNo }).then(res => {
					let result = res.data
					if(result.code == 200) {
						let tempOrder = result.data.examRegistrationPayment
						if(tempOrder.transStatus != 'ING') {
							clearInterval(orderTimer)
							this.onCallBackUrl(orderNo)
						}
					} else {
						clearInterval(orderTimer)
						this.onCallBackUrl(orderNo)
					}
				}).catch(() => {
					clearInterval(orderTimer)
				})
			}, 5000)
		},
		onCallBackUrl(orderNo) {
			this.$router.replace({
				path: '/paymentResult',
				query: {
					orderNo: orderNo
				}
			})
		}
	},
	beforeDestroy() {
		clearInterval(this.orderTimer)
		this.orderTimer = null
	},
	destroyed() {
		this.$toast.clear()
		clearInterval(this.orderTimer)
		this.orderTimer = null
		window.removeEventListener("popstate", ()=>{})
	}
}
</script>

<style lang="less" scoped>
.payQrCode {
	overflow: hidden;
	// background: #fff;
	min-height: 100vh;
}

.payCode {
	width: 90%;
	margin: .3rem 5%;
	background: #fff;
	padding: .4rem 0;
}

.popup-title {
	padding-bottom: .2rem;
	text-align: center;
	font-size: .16rem;
	color: #4F4F4F;
	font-weight: bold;
}

.code-tips {
	text-align: center;
    padding-top: .05rem;
    color: red;
}
.popup-tips {
	margin: .15rem;
	margin-bottom: 0;
	padding: .1rem .12rem;
	font-size: .12rem;
	background: #EBEBEB;
}

// .button-group {
// 	padding: .15rem;
// 	font-size: .14rem;
// 	color: #009688;
// 	text-align: center;
// }

// .loading-section {
// 	width: 200px;
// 	height: 200px;
// 	background: #fff;
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// }

#qrcode {
	background: #fff;
	// padding: .05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
}

// .pay-section {
// 	margin-top: .05rem;
// }

// .title {
// 	font-size: .16rem;
// 	color: #444;
// 	font-weight: bold;
// }

// .pay-name {
// 	padding-left: .1rem;
// }

// .orderno {
// 	font-size: .14rem;
// 	color: #777777;
// }
</style>
