<template>
	<view class="paymethod-content">
		<text class="payment-header u-border-bottom">{{$t('payMethodGroup.paymentMode')}}</text>
		<u-checkbox-group v-model="props.modelValue" class="payment-group" iconPlacement="right" size="32" @change="checkboxGroupChange" activeColor="#0129D3">
			<u-checkbox shape="circle" class="item-radio radio0" :name="0" :value="0">
				<view class="flex-row">
					<image src="../../../static/icons/payment/integral.png" class="group-icon"></image>
					<text class="u-font-28">{{$t('payMethodGroup.integral')}}：{{ data.integral }}</text>
					<text style="margin-left: 40rpx" class="u-font-24">({{$t('payMethodGroup.maximumDiscount')}}：{{ props.max }})</text>
				</view>
			</u-checkbox>
			<u-checkbox shape="circle" class="item-radio radio1" :name="1" :value="1">
				<view class="flex-row">
					<image src="../../../static/icons/payment/integral.png" class="group-icon"></image>
					<text class="u-font-28">{{$t('payMethodGroup.balance')}}：{{ data.balanceMoney }}</text>
				</view>
			</u-checkbox>
			<u-checkbox shape="circle" class="item-radio radio1" :name="2" :value="2">
				<view class="flex-row">
					<image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>
					<text class="u-font-28">{{$t('AlipayPay')}}</text>
				</view>
			</u-checkbox>
			<!--			<u-checkbox shape="circle" class="item-radio radio1" :name="2" :value="2">-->
			<!--				<view class="flex-row">-->
			<!--					<image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>-->
			<!--					<text class="u-font-28">{{$t('payMethodGroup.balance')}}：{{ data.balanceMoney }}</text>-->
			<!--				</view>-->
			<!--			</u-checkbox>-->
			<!--			<u-radio class="item-radio radio1" :name="1">-->
			<!--				<view class="flex-row">-->
			<!--					<image src="../../../static/icons/payment/payPay.png" class="group-icon"></image>-->
			<!--					<text class="u-font-28">PayPay支付</text>-->
			<!--				</view>-->
			<!--			</u-radio>-->
			<!--			<u-radio class="item-radio radio2" :name="2">-->
			<!--				<view class="flex-row">-->
			<!--					<image src="../../../static/icons/payment/wechat.png" class="group-icon"></image>-->
			<!--					<text class="u-font-28">微信</text>-->
			<!--				</view>-->
			<!--			</u-radio>-->
			<!-- <u-radio class="item-radio radio3" :name="3">
				<view class="flex-row">
					<image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>
					<text class="u-font-28">支付宝</text>
				</view>
			</u-radio> -->
		</u-checkbox-group>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, onMounted, reactive, defineEmits } from 'vue'
	import { findUserWallet } from "../../../common/request/api/api";
	const emits = defineEmits(['change'])
	const props = defineProps({
		modelValue: {
			type: Array,
			default: []
		},
		coursePrice: Number,
		max: Number
	})
	const data = reactive({
		modelValue: [],
		balanceMoney: '',
		integral: ''
	})

	onMounted(() => {
		findUserWallet().then((res) => {
			if (res.code === 200) {
				data.balanceMoney = res.data.balanceMoney;
				data.integral = res.data.integral;
			}
		})
	})
	const checkboxGroupChange = (e) => {
		data.modelValue = e
		emits('change', e)
		// if()
	}
</script>

<style lang="scss" scoped>
	.paymethod-content {
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.payment-header {
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.payment-group {
			padding: 32rpx;

			.item-radio {
				width: 100%;
				margin-bottom: 48rpx;

				@for $i from 0 through 3 {
					&.radio#{$i} {
						opacity: 0;
						animation-name: slide-in-left;
						animation-duration: 0.5s;
						animation-fill-mode: forwards;
						animation-delay: calc($i/10) + s;
					}
				}

				&:last-child {
					margin-bottom: unset;
				}
			}

			.group-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>