<template>
	<view class="content">
		<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">¥ 0.00</view>
				</view>
				<view class="item  u-flex u-row-between">
					<view class="txt">待缴纳金额</view>
					<view class="txt">¥ {{settledInfo.record.deposit}}</view>
				</view>
			</view>
<!-- 			<view class="tips">你已缴纳金额：1000.00元</view>
			<view class="tips">充电桩安装需缴纳保证金：1000元待缴金额：1000元</view> -->
		</view>
		<view class="seat"></view>
		<view class="btn-wrap flex-xc">
			<button class="btn-submit" :disabled="saving" @click="paySubmit">
				{{saving ? '支付中……' : '微信支付'}}
			</button>
		</view>
	</view>
</template>

<script>
	import pingpp from '@/include/libs/pingpp.js'
	const globalUrl = process.uniEnv || {}
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				saving: false,
				paySuccess:false,
				payResult:{
					oid:''
				},
				isRefresh:false,
				settledInfo:null,
			}
		},
		onLoad(e) {
			
		},
		onShow(){
			if(!this.settledInfo){
				this.getBaseInfo()
			}
		},
		computed: {},
		watch:{
			isRefresh(val){
				this.getBaseInfo()
			}
		},
		components: {

		},
		methods: {
			successCallback(){
				uni.navigateTo({
					url:'/pages/settle/prompt'
				})
			},
			async getBaseInfo(){
				const app = getApp()
				const callBack = (vm,result)=>{
					vm.settledInfo = result
				}
				let settledInfo = app.globalData.settledInfo
				if(settledInfo){
					callBack(this,settledInfo)
					return
				}
				await app.getBaseInfo(this,callBack)
				
			},
			async pending(){
				// const timer = setTimeout(async ()=>{
				// 	clearTimeout(timer)
					const params = {
						...this.payResult
					}
					const res = await this.$u.api.getSettleDepositResult(params);
					if(res.status!==true){
						this.saving = false
						return 
					}
					uni.showToast({
						title:'支付成功',
					})
					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:util.getOpenid(),
					code:code
					// appid:'wxd1d6eede324b0465'
				}
				const response = await this.$u.api.paySettleDeposit(params)
				if (response.status!==true) {
					uni.showToast({
						title: response.message,
						icon:'none'
					})
					return
				}
				let timer = setTimeout(res=>{
					clearTimeout(timer)
					uni.showModal({
					    title: '提示',
					    content: '支付结果',
						confirmText:'成功',
						cancelText:'失败',
					    success: function (res) {
					        if (res.confirm) {
								// console.log(res.confirm,'res.confirm')
					            self.pending()
					        } else if (res.cancel) {
								self.saving = false
					            console.log('用户点击取消');
					        }
					    }
					});
				},1000)

				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。
						uni.showToast({
							title: '支付成功',
							icon:'none'
						})
					} else if (result == "fail") {
						// charge 不正确或者微信公众账号/QQ 公众号/支付宝口碑支付失败时会在此处返回
						// console.log(err.msg)
					} else if (result == "cancel") {
						// 微信公众账号、QQ 公众号、支付宝口碑支付取消支付
						uni.showToast({
							title: '您已经取消了支付',
							icon:'none'
						})
					}
				});
		},
	},
	}
</script>

<style lang="scss">
	.base-list {
		text-align: center;
		.txt{
			
			line-height: 50rpx;
			font-size:36rpx;
			color: #333;
		}
		.title{
			margin-top:120rpx;
			font-weight: bold;
			line-height: 50rpx;
			font-size:36rpx;
			color: #333;
		}
		.price{
			margin-top:120rpx;
			font-weight: bold;
			line-height: 90rpx;
			font-size:64rpx;
			color: #333;
			text{
				font-size:32rpx;
			}
		}
		.list{
			margin-top:200rpx;
			padding:0 50rpx;
			.item{
				padding:28rpx 0;
				border-bottom: 1rpx solid #FDFDFD;
			}
			.txt{
				line-height: 44rpx;
				font-size:32rpx;
				color: #333;
			}
		}
		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		position: fixed;
		// margin: px2rem(36);
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx 0;
		background: #f3f3f3;

		.btn-submit {
			width: 600rpx;
			border-radius: 52rpx;
			// left: 5%;
			// bottom: px2rem(36);
			height: 104rpx;
			line-height: 104rpx;
			background: #2272ff;
			font-size: 32rpx;
			color: #fff;

			&:disabled {
				border: 2rpx solid #999;
				background-color: #f3f3f3;
				color: #999;
			}
		}
	}
</style>
