<template>
	<div class="pay-main">
		<div class="pay-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">
					<span class="success-icon"></span>
					<span class="success-info">订单提交成功，请您及时付款，以便尽快为您发货~~</span>
				</h4>
				<div class="paymark">
					<span class="fl"
						>请您在提交订单<em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。订单号：<em>{{ orderID }}</em></span
					>
					<span class="fr"
						><em class="lead">应付金额：</em><em class="orange money">￥{{ payInfo.totalFee | numberFix }}</em></span
					>
				</div>
			</div>
			<div class="checkout-info">
				<h4>重要说明：</h4>
				<ol>
					<li>尚品汇商城支付平台目前支持<span class="zfb">支付宝</span>支付方式。</li>
					<li>其它支付渠道正在调试中，敬请期待。</li>
					<li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
				</ol>
				<h4>支付宝账户信息：（很重要，<span class="save">请保存！！！</span>）</h4>
				<ul>
					<li>支付帐号：11111111</li>
					<li>密码：111111</li>
					<li>支付密码：111111</li>
				</ul>
			</div>
			<div class="checkout-steps">
				<div class="step-tit">
					<h5>支付平台</h5>
				</div>
				<div class="step-cont">
					<ul class="payType">
						<li><img src="./images/pay2.jpg" /></li>
						<li><img src="./images/pay3.jpg" /></li>
					</ul>
				</div>
				<div class="hr"></div>

				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付网银</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li><img src="./images/pay10.jpg" /></li>
							<li><img src="./images/pay11.jpg" /></li>
							<li><img src="./images/pay12.jpg" /></li>
							<li><img src="./images/pay13.jpg" /></li>
							<li><img src="./images/pay14.jpg" /></li>
							<li><img src="./images/pay15.jpg" /></li>
							<li><img src="./images/pay16.jpg" /></li>
							<li><img src="./images/pay17.jpg" /></li>
							<li><img src="./images/pay18.jpg" /></li>
							<li><img src="./images/pay19.jpg" /></li>
							<li><img src="./images/pay20.jpg" /></li>
							<li><img src="./images/pay21.jpg" /></li>
							<li><img src="./images/pay22.jpg" /></li>
						</ul>
					</div>
				</div>
				<div class="hr"></div>

				<div class="submit">
					<!-- <router-link class="btn" to="/paysuccess">立即支付</router-link> -->
					<a class="btn" @click="openpay">立即支付</a>
				</div>
				<div class="otherpay">
					<div class="step-tit">
						<h5>其他支付方式</h5>
					</div>
					<div class="step-cont">
						<span><a href="weixinpay.html" target="_blank">微信支付</a></span>
						<span>中国银联</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import QRCode from 'qrcode'
export default {
	name: 'Pay',
	data() {
		return {
			payInfo: {},
			// 定时器名称 默认为空
			timer: null,
			// 支付成功返回的code
			// 作用是防止用户`支付成功`后跳转页面
			code: 200
		}
	},
	mounted() {
		this.getpaymessage()
	},
	computed: {
		// 获取url地址上的query参数
		orderID() {
			return this.$route.query.orderID
		}
	},
	methods: {
		async getpaymessage() {
			let result = await this.$API.getpaymessage(this.orderId)
			if (result.code == 200) {
				alert('获取订单支付信息成功')
				// 存储订单支付信息
				this.payInfo = result.data
			} else {
				alert('获取订单支付信息失败')
			}
		},
		// 支付二维码
		async openpay() {
			// 生成二维码  根据订单号获取订单支付信息  this.payInfo.codeUrl是支付二维码地址
			// QRCode.toDataURL返回的是Promise函数,要用async,await来接收成功resolve的结果
			// let url = await QRCode.toDataURL(this.payInfo.codeUrl)
			let url = await QRCode.toDataURL(this.payInfo.codeUrl)
			this.$alert(`<img src=${url} />`, '请你微信支付', {
				dangerouslyUseHTMLString: true,
				center: true,
				// 展示取消按钮
				showCancelButton: true,
				// 展示确定按钮
				showConfirmButton: true,
				// 取消和确定的文本
				cancelButtonText: '支付遇见问题',
				confirmButtonText: '已支付成功',
				// 不显示右侧关闭按钮
				showClose: false,
				// 关闭弹出框的提示 type区分取消还是确定,instance当前组件实例,done函数关闭弹出框的方法
				beforeClose: (type, instance, done) => {
					if (type == 'cancel') {
						alert('请联系管理员王先生')
						// 清除定时器 下方的定时器只有在
						clearInterval(this.timer)
						this.timer = null
						// 关闭弹出框
						done()
					} else if (type == 'confirm') {
						// 支付成功返回的code如果为200就能跳转页面
						if (this.code == 200) {
							// 1.清除定时器
							clearInterval(this.timer)
							this.timer = null
							// 2.关闭弹出框
							done()
							// 3.跳转路由
							this.$router.push('/paySuccess')
						} else {
							// 1.清除定时器
							clearInterval(this.timer)
							this.timer = null
							alert('交钱啊啊啊啊啊啊啊啊啊!!!!!!')
							done()
						}
					}
				}
			})
			// 支付成功，路由跳转 支付失败，提示信息
			// 设置一个定时器 每隔1s请求接口 查看订单支付的状态
			if (!this.timer) {
				this.timer = setInterval(async () => {
					// 传递订单号获取订单
					let result1 = await this.$API.searchOrder(this.orderID)
					// 支付成功
					if (result1.code == 200) {
						// 1.清除定时器
						clearInterval(this.timer)
						this.timer = null
						// 2.保存支付成功返回的code
						this.code = result1.code
						// 3.关闭弹出框
						this.$msgbox.close()
						// 4.跳转支付成功
						this.$router.push('/paySuccess')
					}
				}, 1000)
			}
		}
	},
	filters: {
		// 保留两位小数
		numberFix(value) {
			return parseInt(value).toFixed(2)
		}
	}
}
</script>

<style lang="less" scoped>
.pay-main {
	margin-bottom: 20px;

	.pay-container {
		margin: 0 auto;
		width: 1200px;

		a:hover {
			color: #4cb9fc;
		}

		.orange {
			color: #e1251b;
		}

		.money {
			font-size: 18px;
		}

		.zfb {
			color: #e1251b;
			font-weight: 700;
		}

		.checkout-tit {
			padding: 10px;

			.tit-txt {
				font-size: 14px;
				line-height: 21px;

				.success-icon {
					width: 30px;
					height: 30px;
					display: inline-block;
					background: url(./images/icon.png) no-repeat 0 0;
				}

				.success-info {
					padding: 0 8px;
					line-height: 30px;
					vertical-align: top;
				}
			}

			.paymark {
				overflow: hidden;
				line-height: 26px;
				text-indent: 38px;

				.fl {
					float: left;
				}

				.fr {
					float: right;

					.lead {
						margin-bottom: 18px;
						font-size: 15px;
						font-weight: 400;
						line-height: 22.5px;
					}
				}
			}
		}

		.checkout-info {
			padding-left: 25px;
			padding-bottom: 15px;
			margin-bottom: 10px;
			border: 2px solid #e1251b;

			h4 {
				margin: 9px 0;
				font-size: 14px;
				line-height: 21px;
				color: #e1251b;
			}

			ol {
				padding-left: 25px;
				list-style-type: decimal;
				line-height: 24px;
				font-size: 14px;
			}

			ul {
				padding-left: 25px;
				list-style-type: disc;
				line-height: 24px;
				font-size: 14px;
			}
		}

		.checkout-steps {
			border: 1px solid #ddd;
			padding: 25px;

			.hr {
				height: 1px;
				background-color: #ddd;
			}

			.step-tit {
				line-height: 36px;
				margin: 15px 0;
			}

			.step-cont {
				margin: 0 10px 12px 20px;

				ul {
					font-size: 0;

					li {
						margin: 2px;
						display: inline-block;
						padding: 5px 20px;
						border: 1px solid #ddd;
						cursor: pointer;
						line-height: 18px;
					}
				}
			}
		}

		.submit {
			text-align: center;

			.btn {
				display: inline-block;
				padding: 15px 45px;
				margin: 15px 0 10px;
				font: 18px '微软雅黑';
				font-weight: 700;
				border-radius: 0;
				background-color: #e1251b;
				border: 1px solid #e1251b;
				color: #fff;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
				user-select: none;
				text-decoration: none;
			}
		}
	}
}
</style>
