<script setup>
	/**
	 * 余额充值
	 */

	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import util from '@/common/js/util';
	import api from '@/api/index.js';
	import {
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	// 表单
	const form = reactive({
		totalAmount: '',
	})
	// 支付列表
	const paymentList = reactive([{
			img: '/static/shop-alipay-payment.png',
			name: '支付宝',
			provider: 'alipay',
			apiRequest: (event) => {
				return handleAlipayPay(event)
			}
		},
		{
			img: '/static/shop-weixin-pay.png',
			name: '微信支付',
			provider: 'wxpay',
			apiRequest: (event) => {
				return handleWeChat(event)
			}
		},
	])
	// 支付列表下标
	const paymentIndex = ref(0)
	// 当前支付方式
	const payment = computed(() => paymentList[paymentIndex.value])

	onLoad((option) => {
		if (option.amount) form.totalAmount = option.amount
	})

	/**
	 * 选择支付方式
	 * @param {Object} event
	 */
	function handlePaymentIndex(event) {
		const index = event.detail.value
		if (paymentIndex.value === index) return
		paymentIndex.value = index
	}

	// 充值
	function handleSubmit() {
		// 验证
		util.isAuth({
			success: rs => {
				handlePayment()
			},
		})
	}

	// 调用支付
	function handlePayment() {
		if (!form.totalAmount) {
			util.alert('金额不正确')
			return
		}

		// 调用支付方式
		payment.value.apiRequest()
	}

	// 支付宝支付
	function handleAlipayPay() {
		api.mine.alipayPay({
			query: {
				...form,
			},
		}).then(rs => {
			// 唤起支付
			callPayment({
				response: rs,
				paymentParams: {
					orderInfo: rs.msg,
				},
			})
		})
	}

	// 微信支付
	function handleWeChat() {
		api.mine.wechatPay({
			query: {
				...form,
			},
		}).then(rs => {
			console.log('wechatPay', rs)
			// 唤起支付
			callPayment({
				response: rs,
				paymentParams: {
					orderInfo: rs.data,
				},
			})
		})
	}

	/**
	 * 唤起支付
	 * @param {Object} params 
	 */
	function callPayment(params = {}) {
		if (params.response.code == 200) {
			console.log('requestPayment', {
				provider: payment.value.provider,
				...params.paymentParams,
			})
			uni.requestPayment({
				provider: payment.value.provider,
				...params.paymentParams,
				success: rs => {
					util.getPurse()
					uni.navigateBack()
				},
				fail: err => {
					console.log('fail err', err)
				}
			})
			return
		}
		util.alert({
			content: params.response.msg,
			showCancel: false,
		})
	}
</script>

<template>
	<view class="appbw">
		<!--  -->
		<view class="form mtb30 mlr30">
			<view class="line ptb20">
				<view class="key f36">充值金额</view>
				<view class="value mt10">
					<view class="rows">
						<view class="c333 f40 b">￥</view>
						<input type="text" v-model="form.totalAmount" placeholder="输入金额" />
					</view>
				</view>
			</view>

			<view class="line ptb20">
				<view class="key f36">充值方式</view>
				<view class="value payment mt10">
					<picker :range="paymentList" range-key="name" @change="handlePaymentIndex">
						<view class="list rows ptb10">
							<image class="wh60" :src="payment.img" mode="aspectFit" />
							<view class="f1 mlr20 c333 f30">{{payment.name}}</view>
							<uni-icons type="right" color="#999" size="40rpx" />
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="footer plr30 shadow bfff">
			<view class="btn lg colourful" @click="handleSubmit">充值</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 表单
	.form {
		.line {
			border-bottom: 1rpx solid #ccc;
		}
	}
</style>