<template>
	<view>
		<!-- 店铺扫码支付页 -->
		<view class="content">
			<view class="main">
				<view class="title">
					<image class="shop-images" src="https://img.agrimedia.cn/APP-ZhiFuBusiness/shop.png"></image>
					<view class="name">{{form.name? form.name : '--'}}</view>
				</view>
				<view class="money" @click="inputClick()">
					<view class="input">
						<text class="txt">消费金额</text>
						<view class="flex wrap">
							<input class="num" type="text" v-model="money" disabled="true" />
							<text class="line" v-if="!money">|</text>
						</view>
					</view>
				</view>
				<view class="container">
					<view class="list-item" @click="rateTypeClick(2)">
						<text class="titles">抵用券抵扣</text>
						<view class="right-section">
							<text>{{(Number(broker) + Number(vouchers)).toFixed(2) == 0? '0.00' : (Number(broker) + Number(vouchers)).toFixed(2)}}</text>
							<view class="wx_flex wx_flex-items-center">
								<image style="width: 31rpx;height: 31rpx; margin-top: 10rpx"
									:src="couponUsed==1?'https://imgs.agrimedia.cn/shop/select_icon.png':'https://imgs.agrimedia.cn/shop/unselect_icon.png'"
									mode=""></image>
							</view>
						</view>
					</view>

					<!-- 实际支付 -->
					<view class="payment-section">
						<text class="titles">实际支付</text>
						<text class="payment-amount">¥{{actualPayment}}</text>
					</view>
				</view>
			</view>
			
			<view class="pay-btn" @click="keyConfirm">
				去支付
			</view>
			
			<!-- <monokeyboard 
				ref="mono" 
				:value="money" 
				:show="keyshow"
				@confirm="keyConfirm"
				@change="keyChange"
				:isPay="a">
			</monokeyboard> -->

			<!-- <view class="shadow" v-if="loading"></view> -->
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import monokeyboard from '@/components/mono-keyboard/mono-keyboard.vue';
	import OnlineShop from '@/components/OnlineShop.vue';
	
	import UrlUtils from '@/utils/urlUtils.js';
	import getUrlParam from '@/utils/utils.js';
	import {
		middleLogin,
		computedOrder,
		gzhcomputedOrder,
		getMerchantInfo,
		doOrder,
		dogzhOrder,
		cancelPay,
		getMerchantInfoByCode
	} from '@/api/index';

	export default {
		components: {
			monokeyboard,
			OnlineShop
		},
		data() {
			return {
				authKey: '',
				bindPhone: '',
				keyshow: true,
				token: '',

				qrcode: '',
				merchant_id: '', //下单店铺id
				ID: '',
				form: {},
				money: '', // 手动输入
				couponUsed: false, // 抵用券使用状态
				commissionUsed: false, // 佣金使用状态
				vouchers: '',
				broker: '',
				actualPayment: '', // 实际支付金额
				a: false,
				hasAssigned: false, // 标志变量
				loading: true,
				amountInfo: {},

				dikou: 0,
			

				order_id: '',  // 查询订单号
				dat: '',  // 直接支付的参数
				tabIndex: '', // 支付结束的tab选项
				orderData: {}  // 显示的价格  { price: '100' }
			}
		},

		watch: {
			money: {
				handler: function(newV, oldV) {
					this.getTotal()
				},
				deep: true
			}
		},

		onLoad() {
			const url = window.location.href;
			const cleanUrl = this.cleanUrl(url);
						
			const token = getUrlParam('token') || this.$store.state.app.token;
			if (token) {
				this.$store.commit('UPDATE_LOGIN', token);
				
				// 扫码店铺支付
				if (getUrlParam('merchant_id') && !getUrlParam('from_type')) {
					this.getData(getUrlParam('merchant_id'));
				} else if (getUrlParam('code')) {
					this.getQrData(getUrlParam('code'));
				} else {
					uni.showToast({
						title: '店铺码为空',
						icon: 'none'
					});
				}
			} else {
				// 没有token，拼接当前url跳转到登录页
				console.log(encodeURIComponent(cleanUrl), '跳转');
				window.location.replace(`${HTTP_REQUEST_URL}/api/v2/routine/gzhLogin?back_url=${encodeURIComponent(cleanUrl)}`);
			}
		},

		methods: {
			// 清理URL格式，处理多个问号的情况 将多个连续的?替换为单个&
			cleanUrl(url) {
				let cleanUrl = url.replace(/\?+/g, '?');
				const firstQuestionMarkIndex = cleanUrl.indexOf('?');
				if (firstQuestionMarkIndex !== -1) {
					const beforeParams = cleanUrl.substring(0, firstQuestionMarkIndex + 1);
					const afterParams = cleanUrl.substring(firstQuestionMarkIndex + 1).replace(/\?/g, '&');
					cleanUrl = beforeParams + afterParams;
				}
				return cleanUrl;
			},

			// ID获取店铺
			getData(id) {
				getMerchantInfo({
					id: id
				}).then(res => {
					this.form = res.data;
					this.merchant_id = res.data.merchant_id
					this.a = true;
					this.loading = false;
					// 获取商户信息后，初始化抵用券信息
					this.calculatePayment();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: 'none'
					})
					this.loading = false
				})
			},

			// CODE获取商户信息
			getQrData(qrcode) {
				let that = this;
				this.qrcode = qrcode;
				getMerchantInfoByCode({
					code: qrcode
				}).then(res => {
					this.form = res.data.merchantInfo;
					this.merchant_id = res.data.merchantInfo.merchant_id;
					this.a = true;
					this.loading = false;
					
					// 获取商户信息后，初始化抵用券信息
					this.calculatePayment();
				}).catch(error => {
					// 返回的文字判断，优先显示未绑定码牌
					this.loading = false
					this.showModal = true;
					this.form.merchantInfo = 0;
					this.form.status = 1;
				})
			},

			// 抵用券状态变化
			rateTypeClick(val) {
				if (this.money > 0 || this.money !== '') {
					if (val == 1) {
						this.commissionUsed = !this.commissionUsed;
						this.couponUsed = !this.couponUsed
					} else {
						this.couponUsed = !this.couponUsed
						this.commissionUsed = !this.commissionUsed;
					}
					this.getTotal();
				} else {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
				}
			},

			// 实际支付展示
			getTotal() {
				if (Number(this.amountInfo.broker_balance) + Number(this.amountInfo.coin_balance) >= Number(this.money) &&
					Number(this.money) && this.couponUsed) {
					this.actualPayment = 0.01
					this.dikou = (Number(this.money) - (Number(this.amountInfo.broker_balance) + Number(this.amountInfo
						.coin_balance))).toFixed(2);
				} else if (Number(this.money) && this.couponUsed) {
					this.actualPayment = (Number(this.money) - (Number(this.amountInfo.broker_balance) + Number(this
						.amountInfo.coin_balance))).toFixed(2);
					this.dikou = (Number(this.amountInfo.broker_balance) + Number(this.amountInfo.coin_balance)).toFixed(
					2);
				} else {
					this.actualPayment = this.money;
				}
			},

			// 查询抵用券余额
			async calculatePayment() {
				const params = {
					pay_price: this.money || 0,
					use_coin: this.couponUsed ? 1 : 0,
					use_broker: this.commissionUsed ? 1 : 0
				};

				try {
					const apiCall = Number(this.isAllApi) === 1 ? computedOrder : gzhcomputedOrder;
					const res = await apiCall(params);

					this.actualPayment = res.data.real_pay_price;
					this.amountInfo = res.data;

					if (!this.hasAssigned) {
						this.hasAssigned = true;
						this.vouchers = res.data.coin_balance;
						this.broker = res.data.broker_balance;
					}
				} catch (error) {
					// console.error('获取抵用券余额失败:', error.msg);
					uni.showToast({
						title: error.msg,
						icon: 'none'
					});
				}
			},


			async keyConfirm(e) {
				// 输入验证
				if (isNaN(this.money)) {
					uni.showToast({
						title: '请输入正常的数字',
						icon: 'none'
					});
					return;
				}
				if (Number(this.money) >= 1000000) {
					uni.showToast({
						title: '支付金额不能大于一百万',
						icon: 'none'
					});
					return;
				}
				if (Number(this.money) <= 0) {
					uni.showToast({
						title: '支付金额不能为0',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: "正在跳转中",
					mask: true
				});

				if (!this.merchant_id) return;

				try {
					// 准备支付参数
					const params = {
						pay_price: Number(this.money),
						use_coin: this.couponUsed ? 1 : 0,
						use_broker: this.commissionUsed ? 1 : 0,
						merchant_id: this.merchant_id,
						code: this.qrcode,
						is_middle_pay: 1
					};

					// 执行支付
					const apiCall = Number(this.isAllApi) ? doOrder : dogzhOrder;
					const res = await apiCall(params);
					const jsConfig = res.data;
					const order_sn = jsConfig.order_sn;

					// 检查环境
					const ua = window.navigator.userAgent.toLowerCase();
					const isWechat = ua.includes('micromessenger');
					const isH5 = typeof window !== 'undefined';

					if (!isH5 || !isWechat) {
						uni.hideLoading();
						uni.showToast({
							title: '请在微信浏览器中使用微信支付功能',
							icon: 'none',
							duration: 3000
						});
						this.cancelVideo();
						return;
					}

					// 微信支付处理
					if (!jsConfig) {
						uni.showToast({
							title: '支付参数错误',
							icon: 'none'
						});
						uni.hideLoading();
						return;
					}

					const onBridgeReady = () => {
						window.WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								'appId': jsConfig.appId,
								'timeStamp': jsConfig.timeStamp,
								'nonceStr': jsConfig.nonceStr,
								'package': jsConfig.package,
								'signType': jsConfig.signType,
								'paySign': jsConfig.paySign
							}, (res) => {
								const isSuccess = res.err_msg === 'get_brand_wcpay_request:ok';
								uni.hideLoading();
								uni.showToast({
									title: isSuccess ? "支付完成" : "取消支付",
									icon: isSuccess ? 'success' : 'none',
									duration: 2000,
								});

								this.clearPaymentData();
								if (!isSuccess) this.cancelVideo();

								setTimeout(() => {
									const url =
										`/pages/Paysuccessful/jxPaysuccessful?merchant_name=${this.form.name}&order_sn=${order_sn}&Status=${isSuccess ? 1 : 2}&isAllApi=${this.isAllApi}`;
									uni.redirectTo({
										url
									});
								}, 2000);
							}
						);
					};

					if (typeof window.WeixinJSBridge === "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady.bind(this), false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady.bind(this));
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady.bind(this));
						}
					} else {
						onBridgeReady.call(this);
					}
				} catch (err) {
					uni.hideLoading();
					uni.showToast({
						title: err.msg || err.message || err.data.message || '支付处理失败',
						icon: 'none',
						duration: 2000
					});
				}
			},

			keyChange(e) {
				if (this.isTwoDecimalPlaces(e)) {
					console.log(e, '123')
					this.money = e
				}
			},

			inputClick() {
				uni.showToast({
					title: '使用键盘输入',
					icon: 'none'
				})
			},

			isTwoDecimalPlaces(num) {
				const numStr = num.toString();
				const decimalIndex = numStr.indexOf('.');

				// 如果没有小数点，或者小数点后的位数不超过 2 位
				if (decimalIndex === -1 || numStr.length - decimalIndex - 1 <= 2) {
					return true; // 输入到了小数点后两位
				} else {
					return false; // 没有输入到小数点后两位
				}
			},


			// 清理支付数据
			clearPaymentData() {
				this.money = '';
				this.actualPayment = '';
				this.couponUsed = false;
				this.commissionUsed = false;
				if (this.$refs.mono) {
					this.$refs.mono.money = '';
				}
			},

			// 取消发声
			cancelVideo() {
				cancelPay({
					merchant_id: this.merchant_id
				}).then(res => {
					console.log(res)
				}).catch(error => {
					console.error('取消支付播报失败:', error);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 auto;
		margin-top: 20rpx;
		height: 100vh;
		overflow: hidden;
		.main {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				margin-top: 30rpx;

				.shop-images {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				.name {
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.money {
				text-align: left;
				padding: 30rpx 40rpx;
				font-size: 42rpx;
				font-weight: 600;
				margin-top: 40rpx;
				background-color: #f8f8f8;
				border-radius: 20rpx;

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 38rpx;

					.txt {
						width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 600;
						margin-right: 30rpx;
					}

					.num {
						font-weight: 600;
						text-align: right;
						font-size: 38rpx;
					}

					// /deep/ .u-input--radius {
					// 	background-color: transparent !important;
					// 	border: none !important;
					// }
					.wrap {
						position: relative;

						.line {
							position: absolute;
							top: 10rpx;
							right: 14rpx;
							animation: blink 1s infinite;
							color: #556dea;
						}
					}
				}
			}
		}
	}


	/* 光标闪烁动画 */
	@keyframes blink {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;

		.titles {
			font-size: 32rpx;
		}
	}

	.right-section {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.payment-section {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 20rpx;
		font-weight: bold;
		font-size: 38rpx;

		.titles {}
	}

	.payment-amount {
		color: #ff2d55;
		font-size: 38rpx;
	}

	.shadow {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: .5;
		width: 100%;
		height: 100vh;
		z-index: 999999;
	}
	.pay-btn {
		background-color: #07c160;
		width: 200rpx;
		margin: 0 auto;
		text-align: center;
		padding: 20rpx 10rpx;
		color: #fff;
		border-radius: 20rpx;
		font-size: 38rpx;
		font-weight: 600;
		margin-top: 80rpx;
	}
</style>