<template>
	<view>
		<!-- 支付页面 -->
		<view class="head">
			<div class="df head-order">
				<div>订单编号</div>
				<div>{{list.order_no}}</div>
			</div>
			<div class="df head-number">
				<div>应收金额</div>
				<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
				<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
				<div v-else>￥{{list.goods_money}}</div>
			</div>
			<div class="df head-number">
				<div>已收金额</div>
				<div v-if="list.sales_money>0">￥{{pexync}}</div>
				<div v-else-if="list.order_money>0">￥{{houtaitwo}}</div>
				<div v-else>￥{{list.goods_money}}</div>
			</div>
			<div class="df head-confirmed">
				<div>待支付金额</div>
				<div v-if="list.sales_money>0">￥{{pay_money_no}}</div>
				<div v-else-if="list.order_money>0">￥{{houtaisui}}</div>
				<div v-else>￥{{list.goods_money}}</div>
			</div>
			<div class="df head-pay">
				<div class="df aic">本次支付</div>
				<div>
					<input type="text" v-model="amount" @blur="blur" placeholder="请输入充值金额">
					<div class="arr">￥</div>
					<div class="box">元</div>
				</div>
			</div>
			<div class="head-prepare">
				<!-- <view class="df jcsb aic head-prepara">
					<div>预存款支付</div>
					<div class="df" @click="vacancies">
						余额：00.00<u-icon name="arrow-right"></u-icon>
					</div>
				</view> -->
				<div class="head-dotted"></div>
				<view class="df jcsb aic head-prepara">
					<div>填写转账记录</div>
					<div class="df" @click="transfer">
						<u-icon name="arrow-right"></u-icon>
					</div>
				</view>
				<!-- <div class="head-dotted"></div>
				<view class="df jcsb aic head-prepara">
					<div>微信二维码收款</div>
					<div class="df" @click="QRcode">
						<u-icon name="arrow-right"></u-icon>
					</div>
				</view> -->
				<!-- <div class="head-dotted"></div>
				<view class="df jcsb aic head-prepara">
					<div>支付宝二维码收款</div>
					<div class="df" @click="show3=true">
						<u-icon name="arrow-right"></u-icon>
					</div>
				</view> -->

			</div>
		</view>
		<u-overlay :show="show" @click="show = false">
			<div class="shade">
				<div>提示</div>
				<div>预存款不足</div>
				<div class="df aic jcsa">我知道了</div>
			</div>
		</u-overlay>
		<u-overlay :show="show1" @click="show1 = false">
			<div class="shade-coin">
				<div>提示</div>
				<div class="df fdc aic jcsb">
					<text>是否使用预存款支付金额</text>
					<text>￥500.00</text>
				</div>
				<div class="df">
					<view class="shade-cancel df aic jcsa">取消</view>
					<view class="shade-affirm df aic jcsa">确认</view>
				</div>
			</div>
		</u-overlay>
		<u-overlay :show="show2" @click="show2 = false">
			<div class="qr-code">
				<div class="qr-barcode">
					<div>本次支付金额</div>
					<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
					<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
					<div v-else>￥{{list.goods_money}}</div>
					<div>
						<image :src="$util.img('/upload/weapp/user/erweima.gif')" mode=""></image>

					</div>
					<div>请在12月21日 17:30前支付订贷商扫码向我付款</div>
				</div>
				<div class="qr-barcodexx df aic jcsa">×</div>
			</div>
		</u-overlay>
		<u-overlay :show="show3" @click="show3 = false">
			<div class="qr-code">
				<div class="qr-barcode">
					<div>本次支付金额</div>
					<div v-if="list.sales_money>0">￥{{list.sales_money}}</div>
					<div v-else-if="list.order_money>0">￥{{list.order_money}}</div>
					<div v-else>￥{{list.goods_money}}</div>
					<div>
						<image :src="$util.img('/upload/weapp/user/erweima.gif')" mode=""></image>

					</div>
					<div>请在12月21日 17:30前支付订贷商扫码向我付款</div>
				</div>
				<div class="qr-barcodexx df aic jcsa">×</div>
			</div>
		</u-overlay>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				show3: false,
				list: [],
				amount: '',
				order: '',
				member: '',
				order_id: '',
				member_id: '',
				pay_money_no: '',
				pexync: '',
				houtaione: '',
				houtaitwo: '',
				houtaisui: 0
			};
		},
		onLoad(e) {
			this.order = e.id
			this.member = e.di
			uni.$on('Collection', (data) => {
				console.log(data, '新增收款');
				this.list = data

				if (data.sales_money > 0) {
					this.$api.sendRequest({
						url: '/api/salasmanorder/getOrderPayList',
						data: {
							order_id: data.order_id, //订单id
							member_id: data.member_id //订单客户id

						},
						success: res => {
							console.log(res.data, '收款记录');
							this.pay_money_no = res.data.pay_money_no
							// this.list = res.data.list
							// this.pay_money = res.data.pay_money
							// this.pay_money_yes = res.data.pay_money_yes
							// this.pay_money_no = res.data.pay_money_no
							this.amount = res.data.pay_money_no
							this.pexync = Number(res.data.pay_money) - res.data.pay_money_no
						}
					})

					return
				}
				if (data.order_money > 0) {
					this.$api.sendRequest({
						url: '/api/salasmanorder/getOrderPayList',
						data: {
							order_id: data.order_id, //订单id
							member_id: data.member_id //订单客户id

						},
						success: res => {
							console.log(res.data, '收款记录');
							this.houtaisui = res.data.pay_money_no
							// this.list = res.data.list
							// this.pay_money = res.data.pay_money
							// this.pay_money_yes = res.data.pay_money_yes
							// this.pay_money_no = res.data.pay_money_no
							this.amount = res.data.pay_money_no
							this.houtaitwo = Number(res.data.pay_money) - res.data.pay_money_no
						}
					})

					return
				}
				this.amount = data.goods_money
			})

		},
		onUnload() {
			uni.$off('Collection')
		},
		methods: {
			blur(value) {
				console.log(value.detail.value);
				this.amount = (Number(value.detail.value)).toFixed(2)
			},
			vacancies() {
				// this.show=true
				this.show1 = true
			},
			QRcode() {
				this.show2 = true
			},
			transfer() {
				console.log(this.list.goods_money);
				if (this.list.sales_money) {
					this.list.goods_money = this.list.sales_money
				}
				console.log(this.list.order_money);
				console.log(this.list.goods_money);
				console.log(this.amount);
				let _this = this
				if (this.amount == 0) {
					this.$util.showToast({
						title: '请填写支付金额'
					});
					return
				}
				if (this.list.sales_money > 0) {
					if (this.list.sales_money > 0) {
						if (Number(this.amount) > Number(this.pay_money_no)) {
							this.$util.showToast({
								title: '不能超过应收金额'
							});
							return
						}
					} else {
						if (Number(this.amount) > Number(this.list.goods_money)) {
							this.$util.showToast({
								title: '不能超过应收金额'
							});
							return
						}
					}
				}

				if (this.list.order_money > 0) {
					// if (_this.list.order_money > 0) {
						// if (Number(_this.amount) > Number(_this.houtaisui)) {
						// 	console.log(Number(_this.amount), Number(_this.houtaisui));
						// 	this.$util.showToast({
						// 		title: '不能超过应收金额'
						// 	});
						// 	return
						// }
					// } else {
						if (Number(this.amount) > Number(this.list.goods_money)) {
							this.$util.showToast({
								title: '不能超过应收金额'
							});
							return
						}
					// }
				}

				setTimeout(() => {
					uni.$emit('money', this.amount)
				}, 500)
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url: `/page_salesman_order/Offline_transfer/Offline_transfer?id=${this.order}&di=${this.member}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		margin: 24rpx;
		width: 702rpx;
		// height: 712rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.head-order {
			padding: 32rpx 0 0 32rpx;
		}

		.head-order div:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		.head-order div:nth-child(2) {
			margin-left: 68rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.head-number {
			padding: 24rpx 0 0 32rpx;
		}

		.head-number div:nth-child(1) {

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		.head-number div:nth-child(2) {
			margin-left: 68rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.head-confirmed {
			padding: 24rpx 0 0 32rpx;
		}

		.head-confirmed div:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		.head-confirmed div:nth-child(2) {
			margin-left: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.head-pay {
			padding: 24rpx 0 0 32rpx;
		}

		.head-pay div:nth-child(2) {
			margin-left: 68rpx;
			position: relative;

			input {
				// border: 1rpx solid red;
				width: 458rpx;
				height: 70rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				padding: 0 68rpx;
				box-sizing: border-box;
			}

			.arr {
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #21BBF3;
				line-height: 44rpx;
				position: absolute;
				top: 50%;
				left: -44rpx;
				transform: translateY(-50%);
			}

			.box {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
			}
		}

		.head-prepare {
			// height: 100rpx;
			padding: 0 24rpx 0 32rpx;

			.head-dotted {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
			}

			.head-prepara {
				height: 100rpx;
			}
		}
	}

	.shade {
		box-sizing: border-box;
		width: 540rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 24px 24px 24px 24px;
		position: fixed;
		top: 556rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.shade div:nth-child(1) {
		text-align: center;
		margin-top: 40rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
	}

	.shade div:nth-child(2) {
		margin-top: 8rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 44rpx;
	}

	.shade div:nth-child(3) {
		width: 444rpx;
		height: 72rpx;
		background: #21BBF3;
		border-radius: 40rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 56rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.shade-coin {
		box-sizing: border-box;
		width: 540rpx;
		height: 340rpx;
		background: #FFFFFF;
		border-radius: 24px 24px 24px 24px;
		position: fixed;
		top: 556rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.shade-coin div:nth-child(1) {
		margin-top: 40rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
	}

	.shade-coin div:nth-child(2) {
		width: 444rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 44rpx;
		margin: 0 auto;
		margin-top: 8rpx;
	}

	.shade-coin div:nth-child(3) {
		margin-top: 30rpx;

		.shade-cancel {
			width: 206rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #E8E8E8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin: 0 32rpx 0 48rpx;
		}

		.shade-affirm {
			width: 206rpx;
			height: 72rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}

	}

	.qr-code {
		box-sizing: border-box;

		.qr-barcode {
			width: 540rpx;
			height: 546rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: fixed;
			top: 332rpx;
			left: 50%;
			transform: translateX(-50%);

		}

		.qr-barcode div:nth-child(1) {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		.qr-barcode div:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F33B50;
			line-height: 44rpx;
			text-align: center;
			margin-top: 12rpx;
		}

		.qr-barcode div:nth-child(3) {
			width: 270rpx;
			height: 270rpx;

			margin: 0 auto;
			margin-top: 20rpx;

			image {
				width: 270rpx;
				height: 270rpx;
			}
		}

		.qr-barcode div:nth-child(4) {
			width: 310rpx;
			height: 68rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 34rpx;
			margin: 0 auto;
			margin-top: 22rpx;
			text-align: center;
		}

		.qr-barcodexx {
			width: 36rpx;
			height: 36rpx;
			border: 2rpx solid #fff;
			color: #fff;
			border-radius: 50%;
			position: fixed;
			top: 912rpx;
			left: 50%;
			transform: translateX(-50%);

		}
	}
</style>