<template>
	<view class="content">
		<Settle :index="5">
			<view class="base-list">
				<view class="title">您还需缴纳配件押金</view>
				<view class="price"><text>¥ </text>{{settledInfo.record.deposit}}</view>
				<view class="list">
					<view class="item u-flex u-row-between">
						<view class="txt">已缴纳金额</view>
						<view class="txt-value">¥ 0.00</view>
					</view>
					<view class="line-view"></view>
					<view class="item u-flex u-row-between">
						<view class="txt">待缴纳金额</view>
						<view class="txt-value">¥ {{settledInfo.record.deposit || '--'}}</view>
					</view>
				</view>
				<!-- 			<view class="tips">你已缴纳金额：1000.00元</view>
			<view class="tips">充电桩安装需缴纳保证金：1000元待缴金额：1000元</view> -->
			</view>

			<template v-slot:bottom>
				<view class="btn-wrap flex-xc">
					<button class="btn-submit" :disabled="saving" @click="paySubmit">
						<image class="button-image" mode="widthFix" :src="weixinImage"></image>
						<text>{{saving ? '支付中……' : '微信支付'}}</text>
					</button>
				</view>
			</template>
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	import pingpp from '@/include/libs/pingpp.js'
	const globalUrl = process.uniEnv || {}
	import util from '@/utils/util.js'
	export default {
		components: {
			Settle
		},
		data() {
			return {
				saving: false,
				paySuccess: false,
				payResult: {
					oid: ''
				},
				isRefresh: false,
				settledInfo: {
					record: {
						deposit: ''
					}
				},
			}
		},
		onLoad(e) {
			getApp().trackPage('入驻配件押金支付页')
		},
		onShow() {
			if (!this.settledInfo.record.deposit) {
				this.getBaseInfo()
			}
		},
		computed: {
			weixinImage() {
				return process.uniEnv.qn_base_url + 'weixin.png'
			},
			settled() {
				return this.vuex_settled && this.vuex_settled.record || null
			},
		},
		watch: {
			isRefresh(val) {
				this.getBaseInfo()
			}
		},
		components: {

		},
		methods: {
			successCallback() {
				uni.navigateTo({
					url: '/pages/settle/prompt' + '?pageIndex=' + '4'
				})
			},
			async getBaseInfo() {
				let self = this
				const app = getApp()
				const callBack = (vm, result) => {
					vm.settledInfo = result
				}
				if (self.settled) {
					callBack(self, self.vuex_settled)
					return
				}
				await app.getBaseInfo(self, callBack)

			},
			async pending() {
				// const timer = setTimeout(async ()=>{
				// 	clearTimeout(timer)
				const params = {
					...this.payResult
				}
				const res = await this.$u.api.getSettleDepositResult(params);
				if (res.data !== true) {
					this.saving = false
					return
				}
				uni.showToast({
					title: '支付成功',
				})
				// 完成入驻后事件
				getApp().track('settle_success', {
					settle_id: this.settledInfo.record.id
				});
				let timer = setTimeout(() => {
					clearTimeout(timer)
					this.successCallback()
				}, 3000)
			},
			getCode: async function() {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				return new Promise((resolve, reject) => {
					uni.login({
						// #ifdef MP-ALIPAY
						scopes: 'auth_user',
						// #endif
						success: function(res) {
							if (res.code) {
								resolve(res.code)
								//resolve(res.code);
							} else {
								reject('未取得code');
							}
						},
						fail: function(res) {
							reject('用户授权失败wx.login');
						},
						complete() {
							uni.hideLoading()
						}
					});
				});
			},
			async paySubmit() {
				const self = this
				this.saving = true
				uni.showLoading({
					title: '支付中……'
				})
				
				// 提交支付订单
				const code = await this.getCode()
				const params = {
					oid: this.settledInfo.record.id,
					type: 'wx_lite',
					openid: this.vuex_wx_uid,
					code: code
					// appid:'wxd1d6eede324b0465'
				}
				const response = await this.$u.api.paySettleDeposit(params)
				if (response.code !== 200) {
					this.saving = false
					uni.showToast({
						title: response.message,
						icon: 'none'
					})
					return
				}

				const {
					charge,
					oid
				} = response.data;
				this.payResult.oid = oid
				//Web 与微信内支付
				pingpp.createPayment(charge, (result, err) => {
					if (result == "success") {
						// 只有微信公众账号 (wx_pub)、微信小程序 (wx_lite)、QQ 公众号 (qpay_pub)、支付宝口碑 (alipay_qr)
						// 支付成功的结果会在这里返回，其他的支付结果都会跳转到 extra 中对应的 URL。
						this.showPopView()
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
					} else if (result == "fail") {
						// charge 不正确或者微信公众账号/QQ 公众号/支付宝口碑支付失败时会在此处返回
						this.showPopView()
					} else if (result == "cancel") {
						// 微信公众账号、QQ 公众号、支付宝口碑支付取消支付
						this.saving = false
						uni.showToast({
							title: '您已经取消了支付',
							icon: 'none'
						})
					}
				});
			},
		showPopView() {
			// let timer = setTimeout(res => {
			// 	clearTimeout(timer)
				uni.showModal({
					title: '提示',
					content: '支付结果',
					confirmText: '成功',
					cancelText: '失败',
					success: ((res) => {
							if (res.confirm) {
								this.pending()
							} else if (res.cancel) {
								this.pending()
							}
					})
				});
			// }, 1000)
		}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y:auto;
	}

	.base-list {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		min-height: 160rpx;
		// margin-bottom: 188rpx;
		text-align: center;

		.txt {

			line-height: 50rpx;
			font-size: 36rpx;
			color: #333;
		}

		.title {
			margin-top: 80rpx;
			font-weight: bold;
			line-height: 50rpx;
			font-size: 40rpx;
			color: #333;
		}

		.price {
			margin-top: 100rpx;
			font-weight: bold;
			line-height: 90rpx;
			font-size: 64rpx;
			color: #2272FF;

			text {
				font-size: 32rpx;
			}
		}

		.list {
			margin-top: 200rpx;
			padding: 0 50rpx;

			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				width: 100%;
			}

			.item {
				padding: 28rpx 0;
			}

			.txt {
				line-height: 44rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.txt-value {
				line-height: 44rpx;
				font-size: 28rpx;
				color: #333;
			}
		}

		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		width: 100%;
		.button-image {
			width: 38rpx;
			padding-right: 20rpx;
		}

		.btn-submit {
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272FF;
			font-size: 32rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			&[disabled] {
				background-color: #D1D4D4;
				color: #FFFFFF;
			}
		}
	}
</style>
