<template>
	<view class="cart">
		<!-- 自定义导航栏 -->
		<uniNavBar class="interval" @clickLeft="goBack" title="确定支付" left-text="关闭" fixed="true" ></uniNavBar>
		<view class="pay-main">
			<!-- 加label就算点击文字或者图片都能选中 -->
			<radio-group @change="radioChange">
				<label for="" @tap="goPayment">
					<view class="pay-item">
						<image class="pay-img" src="../../static/image/zfb.png" mode=""></image>
						<view>
							<view>支付宝支付</view>
							<view class="pay-txt">推荐支付宝用户使用</view>
						</view>
						<label class="radio">
							<radio v-if="vkPay.status == 0"  value="alipay"
								:checked="form1.provider == 'alipay'" color="#FF3333" /><text></text>
						</label>
					</view>
				</label>
				<label for="" @tap="goPayment">
					<view class="pay-item" >
						<image class="pay-img" src="../../static/image/wxf.png" mode=""></image>
						<view>
							<view>微信支付</view>
							<view class="pay-txt">推荐微信用户使用</view>
						</view>
						<label class="radio">
							<radio v-if="vkPay.status == 0"  value="wxpay"
								:checked="form1.provider == 'wxpay'" color="#FF3333" /><text></text>
						</label>
					</view>
				</label>
			</radio-group>
		</view>
		<!-- 	<view>
			你选择的商品为：{{details.name}}</text>
		</view> -->


		<!-- vue2版本的支付组件开始 -->
		<!-- #ifndef VUE3 -->
		<vk-uni-pay ref="vkPay" :status.sync="vkPay.status" :code-url.sync="vkPay.codeUrl"
			:qrcode-image.sync="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow" :polling="vkPay.polling" :return-url="vkPay.returnUrl"
			:await-notify="vkPay.awaitNotify" :pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
		<!-- #endif -->
		<!-- vue2版本的支付组件结束 -->

		<!-- vue3版本的支付组件开始 -->
		<!-- #ifdef VUE3 -->
		<vk-uni-pay ref="vkPay" v-model:status="vkPay.status" v-model:codeUrl="vkPay.codeUrl"
			v-model:qrcodeImage="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow" :polling="vkPay.polling" :return-url="vkPay.returnUrl"
			:await-notify="vkPay.awaitNotify" :pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
		<!-- #endif -->
		<!-- vue3版本的支付组件结束 -->


		<!-- 弹窗开始 -->

		<!-- 二维码支付弹窗开始 -->
		<view class="pay-qrcode-popup" v-if="vkPay.status < 2 && vkPay.codeUrl">
			<view class="pay-qrcode-popup-mask" @click="cancelPay"></view>
			<view class="pay-qrcode-popup-content">
				<image v-if="vkPay.qrcodeImage" :src="vkPay.qrcodeImage" class="pay-qrcode-popup-image"></image>
				<vk-uni-qrcode v-else :text="vkPay.codeUrl" :size="450"></vk-uni-qrcode>
				<view class="pay-qrcode-popup-info">
					<view>
						<text class="pay-qrcode-popup-info-fee">{{ (form1.total_fee / 100).toFixed(2) }}</text>
						<text>元</text>
					</view>
					<view v-if="form1.provider == 'wxpay'">请用微信扫码支付</view>
					<view v-else-if="form1.provider == 'alipay'">请用支付宝扫码支付</view>
				</view>
				<button v-if="vkPay.status == 1" type="primary" @click="queryPayment">我已完成支付</button>
			</view>
		</view>
		<!-- 二维码支付弹窗结束 -->

		<!-- 外部浏览器H5支付弹窗确认开始 -->
		<view class="pay-confirm-popup" v-if="vkPay.confirmShow">
        	<view class="pay-confirm-popup-content">
        		<view class="pay-confirm-popup-title">请确认支付是否已完成</view>
        		<view><button type="primary" @click="queryPayment">已完成支付</button></view>
        		<view class="pay-confirm-popup-refresh"><button type="default" @click="afreshPayment">支付遇到问题，重新支付</button></view>
        		<view class="pay-confirm-popup-cancel" @click="vkPay.confirmShow = false">暂不支付</view>
        	</view>
        </view>
		<!-- 外部浏览器H5支付弹窗确认结束 -->

		<!-- 弹窗结束 -->

	</view>
</template> 

<script>
	import uniNavBar from '../../components/uni/uni-nav-bar/uni-nav-bar.vue'
	import process from '../../utils/process.js'
	const db = uniCloud.database();
	export default {
		data() {
			return {
				details: {
					name: null,
					id: null,
					imgUrl: null,
					price: 0
				},
				orderId: String,
				vkPay: {
					/**
					 * 查询支付状态的云函数配置
					 * 如果是非路由框架，则action为字符串，值为云函数名称
					 * 如果是路由框架，则按下方配置填写
					 * 注意：queryPaymentAction内参数用默认即可，无需更改。（除非你已经知道参数的意义）
					 */
					queryPaymentAction: {
						name: "vk-pay", // 云函数名称
						action: "pay/queryPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址，渲染二维码需要自己写，可以参考示例中的二维码组件 vk-uni-qrcode
					codeUrl: "",
					qrcodeImage: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
					// 微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
					// 如果此值为空，则默认使用返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
					returnUrl: "",
					// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
					confirmShow: false,
					// 支付成功后，是否需要等待异步回调全部执行完成后才通知前端
					awaitNotify: true,
					// 支付成功后，是否需要返回支付订单数据
					payOrderInfo: true,
				},
				// 表单请求数据
				form1: {
					provider: "",
					total_fee: null,
					out_trade_no: "",
					subject: "测试订单标题",
					body: "订单详情",
					type: "recharge",
					openid: ""
				}
			}
		},
		components: {
			uniNavBar,
		},
		onLoad(options) { //option为object类型，会序列化上个页面传递的参数
			//判断options.dataList是否为空 不然会因为json.parse解析undefined报错
			if (options.dataList) {
				this.details = JSON.parse(options.dataList);
				console.log(options.dataList); //查看传入的id值 打印出上个页面传递的参数。	
			}
			// 此处是因为微信H5外部浏览器支付后微信会重新打开指定页面，我们需要做一个弹窗让用户自己点下是否支付成功，同时云函数会去请求微信服务器检查是否真的付款成功。
			this.vkPay.confirmShow = options.confirmShow || false;
			if (options.out_trade_no) this.form1.out_trade_no = options.out_trade_no;
			if (options.code && options.state) {
				// 获取微信公众号的openid
				setTimeout(() => {
					this.getOpenid({
						code: options.code
					});
				}, 300);
			}
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			this.vkPay.pageShow = true;
			// process.pageState[0] = process.pageState[0]  + 1;
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			this.vkPay.pageShow = false;
		},
		methods: {
			goBack() {
				//返回上一页（选择商品样式）返回到选择棉花糖样式的界面
				uni.reLaunch({
					url:'/pages/productlist/productlist'
				})
			},
			//发起支付
			goPayment(obj = {}) {
				//生成订单号
				let {
					form1
				} = this;
				
				function setTimeDateFmt(s) {
					return s < 10 ? '0' + s : s;
				}
				function orderNumber() {
					const now = new Date(); //当前时间
					let fullYear = now.getFullYear(); //年
					let month = setTimeDateFmt(now.getMonth() + 1); //月
					let day = setTimeDateFmt(now.getDate()); //日
					let hour = setTimeDateFmt(now.getHours()); //时
					let minutes = setTimeDateFmt(now.getMinutes()); //分
					let seconds = setTimeDateFmt(now.getSeconds()); //秒
					//年月日时分秒后添加 随机数
					let orderCode = fullYear + month + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000));
					return orderCode;
				}
				this.orderId = orderNumber();
				console.log(this.orderId)
				//把商品价格、名称、id 、图片 传给数据库  云数据库库添加数据	
				db.collection("CommodityOrder").add({
					CommodityName: this.details.name,
					CommodityPrice: this.details.price,
					CommodityImg: this.details.imgUrl,
					CommodityID: this.details.id,
					Order_ID: this.orderId,
					OrderStatus: "未支付", //1未支付 当支付完徐娅改成2 表示支付完成
				}).then((res) => { // res 为数据库查询结果 
					// console.log(res)	  
				})
				//然后从云端下载订单号 ,怎么获取最新的订单号
				db.collection('CommodityOrder').where(
					//查询最新的订单号
					{
						Order_ID: this.orderId 
					}).get().then((res) => {
					const DownloadData = res.result.data[0]
					//查询到的订单号、金额后弹出扫码界面
					console.log(DownloadData.Order_ID)

					//当支付完后再出现提示支付完成，或者支付失败 都跳转到选中商品中
					// 发起支付
					// 这里的订单号\金额等数据应该是从数据库里获取的,这里为演示需要,故直接本地生成.
					form1.out_trade_no = DownloadData.Order_ID; //订单号
					form1.subject = DownloadData.CommodityName; //商品名称	
					form1.total_fee = DownloadData.CommodityPrice; //金额
					// #ifdef MP-WEIXIN
					form1.provider = "wxpay";
					// #endif
					// #ifdef MP-ALIPAY 
					form1.provider = "alipay";
					// #endif
					this.$refs.vkPay.createPayment({
						// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
						// 如果是路由框架，则按下方配置填写
						// 如果云函数为 vk-pay，则无需改动 action
						action: {
							name: "vk-pay", // 云函数名称
							action: "pay/createPayment", // 路由模式下云函数地址
							actionKey: "action", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
							dataKey: "data" // 路由模式下云函数请求参数的识别key
						},
						// 请求数据（data内的参数会传给云函数，云函数中通过 data.xxx 的方式获取）
						data: {
							provider: form1.provider,
							total_fee: form1.total_fee,
							out_trade_no: form1.out_trade_no,
							subject: form1.subject,
							body: form1.body,
							type: form1.type,
							openid: form1.openid // 如果是微信公众号支付，则openid不能为空
						},
						// 成功回调
						success: res => {
							// 此处一般是写支付成功的提示或跳转到支付成功的页面。
							this.toast("支付成功", "success");
							console.log("paySuccess", res);
							//支付成功后需要把数据库的商品状态改成2
							db.collection('CommodityOrder').where({
								CommodityID: this.details.id
							}).update({
								OrderStatus: "已支付", //2为该订单支付成功
							}).then((res) => {
								console.log(res)
							})
							// 成功后跳转到做糖的交互页面
							uni.navigateTo({
								url: '/pages/cottonCandy/SugarMaking'
							})
						},
						// 失败回调
						fail: res => {
							if (res.failType === "create") {
								// 创建支付失败时提示
								this.alert(res.msg);
							} else if (res.failType === "request") {
								// 请求支付失败时提示
								this.toast("请求支付失败");
							} else if (res.failType === "result") {
								// 支付结果失败时提示
								this.toast("支付失败");
							}
						},
						// 取消回调
						cancel: res => {
							this.toast("用户取消支付");
						}
					});
				});
			},
			// 支付状态查询
			queryPayment() {
				// 支付状态查询你可以直接查你的订单表，看订单是否已支付（因为最终判定用户是否支付成功应该以你的订单表为准）
				// 如果vkPay.queryPayment接口返回支付成功，但你的订单表查询到未支付，代表你的异步回调函数写的有问题。
				this.$refs.vkPay.queryPayment({
					title: "查询中...",
					data: {
						out_trade_no: this.form1.out_trade_no
					},
					needAlert: true,
					success: data => {
						this.vkPay.status = 2; // 标记为已支付
						this.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
						this.toast(data.msg);
					},
					fail: (res = {}) => {
						if (res.msg === "订单已退款") {
							this.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
						}
					}
				});
			},
			// 退款，此为演示，实际业务开发不应该写在前端，而是写在云函数中。
			refund() {
				this.callFunction({
					title: "退款中...",
					name: "vk-pay",
					data: {
						action: "pay/refund",
						data: {
							out_trade_no: this.form1.out_trade_no,
							//refund_fee: 1, // 退款金额，100=1元（单位分）不填则全额退款
						}
					},
					success: data => {
						this.toast(data.msg);
					}
				});
			},
			// 获取微信支付v3版本的微信平台证书
			getWxpayPublicCert() {
				this.callFunction({
					title: "请求中...",
					name: "vk-pay",
					data: {
						action: "pay/getWxpayPublicCert",
						data: {

						}
					},
					success: data => {
						this.alert("请按F12 看浏览器控制台的输出内容");
						let wxpayPublicCertSn = data.wxpayPublicCertSn;
						let wxpayPublicCertContent = data.wxpayPublicCertContent;
						console.log('wxpayPublicCertSn: ', wxpayPublicCertSn)
						console.log(`wxpayPublicCertContent: 请将它压缩成一行（复制下面的证书，用""引号框住证书内容，按一下回车，自动把换行转为\\n`)
						console.log(wxpayPublicCertContent)
					}
				});
			},
			cancelPay() {
				this.vkPay.status = 0;
				this.vkPay.codeUrl = "";
			},
			// 云函数调用简易封装，你也可以用你原本框架的云函数请求封装方法来调用云函数。
			callFunction(obj = {}) {
				let {
					needAlert = true
				} = obj;
				if (obj.title) uni.showLoading({
					title: obj.title
				});
				uniCloud.callFunction({
					...obj,
					success: (result = {}) => {
						if (obj.title) uni.hideLoading();
						let res = result.result;
						if (res.code === 0) {
							if (typeof obj.success == "function") obj.success(res);
						} else {
							if (needAlert && res.msg) this.alert(res.msg);
							if (typeof obj.fail == "function") obj.fail(res);
						}
					},
					fail: (res = {}) => {
						if (obj.title) uni.hideLoading();
						if (needAlert && res.msg) this.alert(res.msg);
						if (typeof obj.fail == "function") obj.fail(res);
					}
				});
			},
			// 选择支付方式
			radioChange(e) {
				this.form1.provider = e.detail.value;
			},
			// 获取公众号code
			getWeiXinJsCode(scope = "snsapi_base") {
				let appid = "wx2ebf03d174875bed"; // 填写公众号的appid
				let redirect_uri = window.location.href.split("?")[0];
				let url =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
				window.location.href = url;
			},
			// 获取公众号openid
			getOpenid(data) {
				let {
					code
				} = data;
				this.callFunction({
					title: "请求中...",
					name: "vk-pay",
					data: {
						action: "pay/code2SessionWeixinH5",
						data
					},
					success: res => {
						if (res.openid) {
							this.form1.openid = res.openid;
							this.toast("已获取到openid，可以开始支付", );
						}
					}
				});
			},
			// uni.showToast的简易封装
			toast(title, icon = "none", mask = false) {
				uni.showToast({
					title,
					icon,
					mask,
					duration: 1500
				});
			},
			// uni.showModal的简易封装
			alert(content, title = "提示") {
				uni.showModal({
					title,
					content,
					showCancel: false
				});
			}
		},
		// 计算属性
		computed: {
			// h5运行环境
			h5Env() {
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger' && (ua.match(/miniprogram/i) == 'miniprogram')) {
					// 微信小程序
					return "mp-weixin";
				}
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					// 微信公众号
					return "h5-weixin";
				}
				if (ua.match(/alipay/i) == 'alipay' && ua.match(/miniprogram/i) == 'miniprogram') {
					// 支付宝小程序
					return "mp-alipay";
				}
				if (ua.match(/alipay/i) == 'alipay') {
					// 支付宝内
					return "h5-alipay";
				}
				// 外部 H5
				return "h5";
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>
	.interval{
		margin-top: 20rpx;
	}
	.pay-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.pay-txt {
		color: #CCCCCC;
	}

	.pay-img {
		width: 100rpx;
		height: 100rpx;
	}

	.page-content {
		padding: 15px;

		.input {
			height: 46px;
			border: solid 1px #dddddd;
			border-radius: 5px;
			margin-bottom: 15px;
			padding: 0px 15px;
		}

		.button {
			margin-bottom: 15px;
		}
	}



	.pay-confirm-popup {
		position: fixed;
		z-index: 2;
		width: 100vw;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);

		.pay-confirm-popup-content {
			width: 550rpx;
			margin: 50% auto 0 auto;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 40rpx;

			.pay-confirm-popup-title {
				text-align: center;
				padding: 20rpx 0;
				margin-bottom: 30rpx;
			}

			.pay-confirm-popup-refresh {
				margin-top: 20rpx;
			}

			.pay-confirm-popup-cancel {
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}

	/* 二维码支付弹窗开始 */
	.pay-qrcode-popup {
		 position: fixed;
		   top: 0;
		   left: 0;
		   width: 100vw;
		   height: 100vh;
		   display: grid;          /* 启用 Grid 布局 */
		   place-items: center;   /* 单行属性实现居中 */
		   z-index: 1000;
    
		
		.pay-qrcode-popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.pay-qrcode-popup-content {
			position: relative;
			width: 500rpx;
			// margin: 40% auto 0 auto;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 40rpx;
			box-sizing: content-box;
			text-align: center;

			.pay-qrcode-popup-info {
				text-align: center;
				padding: 20rpx;

				.pay-qrcode-popup-info-fee {
					color: red;
					font-size: 60rpx;
					font-weight: bold;
				}
			}

			.pay-qrcode-popup-image {
				width: 450rpx;
				height: 450rpx;
			}
		}
	}
</style>
