<template>
	<view class="box" :style="{paddingTop: top + 'px'}">
		<u-navbar
			title="充值缴费"
			bgColor="transparent"
			leftIconSize="20px"
			:autoBack="true"
		/>
		<view class="msg">
				账户余额(元)
				<view>{{money}}</view>
				<image src="https://static.hshuishang.com/kitchen/recharge_img.png" mode="widthFix" />
		</view>

		<view class="recharge">
				<view class="rechargeTit">充值金额</view>
				<view class="iptbox">
						<view>￥</view>
						<input type="number" :value="amount" @input="headerAmountClick" placeholder="请输入充值金额" placeholder-style="color: #999999;font-size: 24rpx;" />
				</view>
				<view class="btn" @click="headerSubmitClick">
						确认充值
				</view>
		</view>
	
	</view>
	
</template>

<script>
	import { menuButtonInfo, request, getProviderPromise } from '../../utils/index';
	import { apiArr } from '../../api/kitchen';
	import { apiPay } from '../../api/pay';
	
	export default {
		data() {
			return {
				top: 0,
				money: 0, // 账户余额
				amount: '',
				goodsMsg: {},
			};
		},
		onLoad() {
			console.log('页面战', getCurrentPages());
			const meun = menuButtonInfo();
			this.top = meun.height + meun.top;
			this.init();
		},
		
		methods: {
			
			async init(){
			 const res = await request(apiArr.balance, 'POST',{});
				this.money = res?.money || 0
			},
			
			headerAmountClick(e) {
				this.amount = e.detail.value
			},
			
			async headerSubmitClick() {
				uni.showLoading({
					title: '充值中...',
					mask: true
				});
				const res = await request(apiArr.recharge, 'POST', {money: Number(this.amount)}, {silent: false});
				console.log('apiArr.recharge res', res);
				this.goodsMsg = res;
				this.pay(res);
			},
			
			async pay(res) {
				const _this = this;
				const res1 = await request(apiPay.pay, 'POST', {
					address: '',
					goods_id: String(res.id),
					merchant_no: res.merchant_no,
					out_trade_no: res.order_no,
					quantity: 1,
					remark: '',
					subject: '用户充值',
					term_no: res.term_no,
					total_amount: String(res.money * 100),
				//   total_amount:String(1),
					user: String(uni.getStorageSync('userId')),
					user_id: uni.getStorageSync('openId')
				}, { silent: false });
				console.log('拉卡拉预下单接口调用成功', res1);
				
				const {resp_data,msg} = res1;
				uni.hideLoading()
				if(msg == '成功'){
					const provider = await getProviderPromise('payment');
					console.log('获取当前支付渠道', provider);
				  uni.requestPayment({
						provider: provider[0],
				    timeStamp: String(resp_data.acc_resp_fields.time_stamp),
				    nonceStr:String(resp_data.acc_resp_fields.nonce_str),
				    package:String(resp_data.acc_resp_fields.package),
				    signType:String(resp_data.acc_resp_fields.sign_type),
				    paySign:String(resp_data.acc_resp_fields.pay_sign),
				    success(res){
				      console.log('1111', res);
				      _this.amount = '';
				      _this.queryPay()
				    },
				    fail(fal){
				      console.log('支付异常', fal);
				    }
				  })
				}
			},
			

			async queryPay(){
				let that = this
				const { goodsMsg } = that;
				console.log('queryPayqueryPayqueryPayqueryPayqueryPay', goodsMsg);
				const res = await request(apiPay.queryPay, 'POST', {
					merchant_no: goodsMsg.merchant_no,
					term_no: goodsMsg.term_no,
					out_trade_no: goodsMsg.order_no
				}, { silent: false })
				uni.hideLoading();
				if(res.statusCode == '200'){
					uni.showToast({
						title: '支付成功！',
						success() {
							// setTimeout(() => {
							// 	that.getBanlance()
							// }, 1500)
						}
					})
				}else{
					uni.showToast({
						title: res.msg,
					})
				}
					
			},

		},
	}
	
</script>

<style>
	@import url("./index.css");
</style>