<template>
	<view class="recharge">
		<view class="action padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>充值金额
		</view>
		<view class=" cu-card article ">
			<view class="cu-item shadow">
				<view class="money text-df " v-for="(item,index) in payList" :key="index"
					@click="forPay(item.value,index)" :style="{backgroundImage : li == index ? 'linear-gradient(to right bottom, #34cb75, #27b764)' : 'white',
					 color : li == index ? '#fff' : '#808080'}">
					{{item.value == '自定义'?'': '¥'}}{{item.value}}
				</view>
			</view>
		</view>
		<view class="confirmRecharge">
			<button @click="affirm" class="bottom_submit">确认充值</button>
		</view>
		<!-- 充值弹窗 -->
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="cancel"
			:negative-top=300 confirmText="充值">
			<view style="width: 100%;">
				<input placeholder="请输入充值金额" v-model="moneyValue" type="digit" @input="handleInput"
					style="text-align: center;border: 1px solid #eee; border-radius: 8rpx;height: 60rpx;line-height: 60rpx;" />
			</view>
		</u-modal>
		<!--  -->
		<u-modal :show="motorShow" :showCancelButton="true" @confirm="motorConfirm" :content="content"
			@cancel="motorCancel" confirmText="去绑定">
		</u-modal>

	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import sheep from '@/sheep';
	// import {
	// 	AESEncrypt,
	// 	AESDecrypt
	// } from '../../../static/utils/encodes.js';

	import {
		reactive,
		ref,
		nextTick
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	// import {
	// 	log
	// } from '../../../static/mqtt/dist/mqtt.min.js';
	const payList = reactive([{
			value: 50
		}, {
			value: 100
		}, {
			value: 200
		}, {
			value: 500
		}, {
			value: 1000
		},
		{
			value: '自定义'
		},
	])
	const li = ref()
	const show = ref(false)
	const title = ref('请填写自定义金额')
	const moneyValue = ref()
	const pay_mount = ref()
	const motorShow = ref(false)
	const content = ref('tyuio')
	const throttleTimer = ref(null)
	// 
	onShow(() => {
		// 判断用户绑定车队没
		// uni.$request({
		// 	url: config.wxUrl_pay + "app-rest/account/getTeamAccount"
		// }).then(res => {
		// 	if (res.data.code == 200) {
		// 		motorShow.value = false
		// 	} else {
		// 		motorShow.value = true
		// 		content.value = res.data.msg
		// 	}
		// 	console.log(res, '=======res======!!!!!!!!!!!', res.data.msg);
		// }).catch(err => {
		// 	uni.$u.toast(err)
		// })
	})
	// 
	const handleInput = (event) => {
		if (event.target.value === '') return

		let value = event.target.value.trim();
		const reg = /^\d+(\.\d{0,2})?$/; // 正则表达式,限制只能输入整数或最多两位小数
		if (!reg.test(value)) {
			// 如果输入的格式不符合要求,则截取合法部分
			const matchRes = value.match(/^\d+(?:\.\d{0,2})?/)[0];
			value = matchRes;
		}
		nextTick(() => {
			moneyValue.value = value; // 赋值到输入框
		})



	}
	const motorCancel = () => {
		uni.navigateBack({
			delta: 1,
		});
	}
	const motorConfirm = () => {
		uni.navigateTo({
			url: '../../../pagesCenter/motorCade/motorCade'
		})
	}
	const forPay = (e, index) => {
		li.value = index
		pay_mount.value = e
		if (index == 5) {
			show.value = true
		}
	}
	const affirm = () => {
		throttle(() => {
			if (!pay_mount.value || pay_mount.value == '自定义') {
				uni.showToast({
					title: '请选择充值金额',
					duration: 2000,
					icon: 'error'
				});
				return
			} else {
				// uni.showLoading({
				// 	title: '去支付'
				// });

				submitRechargeOrder(pay_mount.value)
			}
		}, 500)();
	}
	const throttle = (fn, delay) => {
		return function(args) {
			if (throttleTimer.value) {
				return;
			}
			throttleTimer.value = setTimeout(() => {
				fn.apply(this, args);
				throttleTimer.value = null;
			}, delay);
		}
	}
	const submitRechargeOrder = (trAmt) => {
		// console.log(trAmt,'trAmt')
		let config_url = ''
		let bindType = 1
		if (uni.getStorageSync("version") == '个人版') {
			config_url = 'app-api/pay/wallet-recharge/create'
			bindType = 1
		}
		// console.log(uni.getStorageSync("captainOrNot"),'uni.getStorageSync("captainOrNot")')
		if (uni.getStorageSync("version") == '车队版' && uni.getStorageSync("captainOrNot") && uni.getStorageSync(
				"ispersonnel") == 2) {
			config_url = 'app-api/pay/wallet-recharge/createTeam'
			bindType = 2
		}
		if (uni.getStorageSync("version") == '车队版' && uni.getStorageSync("ispersonnel") == 1) {
			config_url = 'app-api/pay/wallet-recharge/create'
			bindType = 2
		}
		let param = {
			bindType: bindType,
			payPrice: trAmt * 100
		};
		uni.$request({
			url: config.baseUrl + config_url,
			method: 'POST',
			data: param,
		}).then(res => {
			console.log(res, '创建订单')
			if (res.data.code == 0) {
				handle_pay_money(res.data.data)
			}
		})
	}
	const handle_pay_money = async (e) => {
		sheep.$router.go('/pagesCenter/pay/index', {
			id: e.payOrderId,
			orderType: 'recharge',
		});
	}
	const confirm = () => {
		if (moneyValue.value >= 0.01 && moneyValue.value <= 1000) {
			pay_mount.value = payList[5].value = moneyValue.value
			show.value = false
			affirm()
		} else {
			uni.$u.toast('请填写0.01-1000以内的充值金额');
		}

	}
	const cancel = () => {
		payList[5].value = '自定义'
		moneyValue.value = ''
		show.value = false
	}
	const startPay = (data) => {
		let timeStamp = data.timeStamp;
		let nonceStr = data.nonceStr;
		let package1 = data.package;
		let signType = data.signType;
		let paySign = data.paySign;
		uni.requestPayment({
			'timeStamp': timeStamp, //当前时间戳
			'nonceStr': nonceStr, //随机字符串长度
			'package': package1, //统一下单
			'signType': signType, //签名算法,应与后台下单时的值一致
			'paySign': paySign, //签名
			success: (res) => {
				var retStr = JSON.stringify(res);
				console.log("requestPayment->retStr:", retStr);
				if (res.errMsg == 'requestPayment:ok') {
					// wx.navigateTo({
					// 	url: '../../usercenter/user'
					// });
				} else {
					uni.showToast({
						title: '充值付款失败,请重试',
						duration: 1500,
						icon: 'error'
					});
				}
			},
			fail: (res) => {
				uni.showToast({
					title: '已取消',
					duration: 1000,
				});
				return false;
			}
		})
	}
</script>

<style lang="scss" scoped>
	.recharge {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
	}

	.money {
		width: 164rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		border: 1px solid #EBEDF0;
		color: #808080;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 32rpx;
		border-radius: 8px;
	}

	.cu-card>.cu-item {
		display: flex;
		flex-wrap: wrap;
	}

	.confirmRecharge {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	}

	.textBlue {
		color: #27b764;
	}

	.style {
		color: #303133;
		font-size: 15px;
		text-align: center;
	}

	.bottom_submit {
		background: linear-gradient(to right bottom, #34cb75, #27b764);
		border-radius: 40rpx;
		font-size: 14px;
		color: #fff;
	}
</style>