<template>
	<view style="padding: 30rpx">
		<view>
			<view style="font-size: 30rpx; color: #949494">当前增值收益 ￥{{ user.money2 }}</view>
			<view style="height: 20rpx"></view>
			<up-input :customStyle="{ backgroundColor: '#ffffff' }" type="number" placeholder="请输入充值金额" border="surround" v-model="form.money"></up-input>
			<view style="font-size: 30rpx; color: #949494; margin-top: 16rpx;">最小充值金额为{{ rechargeConfig.min_money }}元</view>
		</view>
		<view style="height: 30rpx"></view>
		<view style="background-color: #fff; padding: 30rpx; border-radius: 10rpx">
			<view style="font-size: 28rpx;#606266">支付方式</view>
			<view style="height: 20rpx"></view>
			<up-radio-group v-model="form.pay_type" iconPlacement="right" :borderBottom="true" placement="column">
				<up-radio :name="1">
					<view class="up-flex up-flex-y-center" style="display: flex; align-items: center">
						<up-icon name="/static/icon/weixin.png" imgMode="widthFix" size="50rpx" />
						<view style="width: 20rpx"></view>
						<view>
							<view style="font-size: 30rpx">微信支付</view>
							<view style="font-size: 28rpx; color: #909399">微信快捷支付</view>
						</view>
					</view>
				</up-radio>
			</up-radio-group>
		</view>
		<view style="height: 100rpx"></view>
		<up-button type="primary" @click="getRecharge">立即支付</up-button>
		<view style="height: 100rpx"></view>
	</view>
</template>

<script setup>
import { rechargeAllinPay, getAppConfig } from '@/api/api.js';
import { ref, reactive } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { userHook } from '@/hooks/userInfo.js';
const { user } = userHook();

const form = reactive({
	money: '',
	pay_type: 1
});

let rechargeConfig = ref();

onLoad(() => {
	getAppConfig().then((res) => {
		console.log(res);
		const walletConfig = res?.find(item => item.configKey === "shop_recharge")
		const configValue = walletConfig ? walletConfig.configValue : {}
		rechargeConfig.value = JSON.parse(configValue);
	});
});

onShow(async () => {
	let options = uni.getEnterOptionsSync();
	const shop_order_pay_show = uni.getStorageSync('shop_order_pay_show');
	let appId = 'wxef277996acc166c3';
	if (options.scene == '1038' && options.referrerInfo.appId == appId && shop_order_pay_show == 1) {
		uni.setStorageSync('shop_order_pay_show', 0);
		// 代表从收银台小程序返回
		let extraData = options.referrerInfo.extraData;
		if (!extraData) {
			// "当前通过物理按键返回，未接收到返参，建议自行查询交易结果";
			uni.showModal({
				title: '提示',
				content: '未检测到支付结果',
				success: (res) => {
					if (res.confirm) {
					}
				}
			});
		} else {
			if (extraData.code == 'success') {
				// "支付成功";
				uni.showToast({
					title: '支付成功',
					icon: 'none'
				});
				uni.navigateBack();
			} else if (extraData.code == 'cancel') {
				// "支付已取消";
				uni.showToast({
					title: '支付已取消',
					icon: 'none'
				});
			} else {
				// "支付失败：" + extraData.errmsg;
				uni.showToast({
					title: '支付失败：' + extraData.errmsg,
					icon: 'none'
				});
			}
		}
	}
});

const getRecharge = () => {
	rechargeAllinPay(form).then((res) => {
		uni.openEmbeddedMiniProgram({
			appId: res.appid,
			extraData: res.extraData,
			success(res) {
				// 打开成功
				uni.setStorageSync('shop_order_pay_show', 1);
			}
		});
	});
};
</script>

<style lang="scss">
.xkl-no {
	background-color: #f1f1f1;
}

.xkl-cur {
	background-color: #2cce7f;
	color: #ffffff;
}
</style>
