<template>
	<view class="index home-bg" :style="[navBackground]">
		<!-- #ifdef MP-WEIXIN -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
			<u-navbar :border-bottom="false" :is-fixed="false" custom-class="home-bg" :background="navBackground"
				:is-back="true" backText=" " :title="title" title-color="#fff" backIconColor="#fff">
			</u-navbar>
		</u-sticky>
		<!-- #endif -->


		<view class="row-center balance" :style="{ paddingTop: topSpace + 'px' }">
			<view class="u-text-center w-full">
				<view class="text-fff" style="font-size: 96rpx;">{{ userInfo.user_money }}</view>
				<view class="text-fff nr">充值余额</view>
			</view>
		</view>

		<view class="content u-relative u-m-l-32 u-m-r-32" style="margin-top: 132rpx;">
			<view class="input row-center br16">
				<view class="input-money">
					<u-input v-model="number" placeholder="输入金额: 0" placeholder-style="color: #254062;"
						:custom-style="{ backgroundColor: 'transparent' }" input-align="center" />
				</view>
			</view>

			<view class="u-m-t-38" v-if="rechargeTemplate.length > 0">
				<view class="sm u-m-b-20 bold-400">选择充值套餐</view>
				<view class="grid-container">
					<!-- <view :class="['item', {'active': selectIndex === 0}]" v-for="(item, index) in rechargeTemplate" :key="index">	 -->
					<view class="item active" v-for="(item, index) in rechargeTemplate" :key="index"
						@tap="rechargeFun({ id: item.id })">
						<view class="xs text-666">充值</view>
						<view class="text-333 md u-m-t-4">￥{{ item.money }}</view>
						<view class="text-666 xxs u-m-t-2">赠送{{ item.give_money }}元</view>
					</view>
				</view>
			</view>

			<view class="u-m-t-56">
				<view class="sm u-m-b-20 bold-400">加赠券 价值10元</view>
				<view class="grid-container u-m-t-18">
					<view class="coupon u-text-center">
						<view class="sm text-666">赠券1张</view>
						<view class="text-333 md u-m-t-28">
							<price-format color="#FF0000" :price="10" :subscriptSize="22"
								:firstSize="52"></price-format>
						</view>
						<view class="text-666 sm u-m-t-30">满10元可用</view>
					</view>
				</view>
			</view>

			<view class="u-m-t-70 u-p-10">
				<view class="sm u-m-b-20 bold-400">充值说明</view>
				<view class="text-999">1. 账户充值仅限在线方式支付，充值金额实时到账；</view>
				<view class="text-999">2. 有问题请联系客服；</view>
			</view>

			<view class="u-m-t-42 u-p-b-20">
				<u-button @click="rechargeNow" hover-class="none"
					:customStyle="{ height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx' }"
					:hair-line="false">立即充值</u-button>
			</view>
		</view>
		<u-popup class="pay-popup" v-model="showPopup" closeable round mode="center">
			<view class="content bg-white">
				<image class="img-icon" :src="`${cloudPath}img/icon_paySuccess.png`"></image>
				<view class="xxl bold mt10">充值成功</view>
				<view v-if="rechargeInfo.give_integral || rechargeInfo.give_growth" class="lg u-mt-50">
					恭喜您获得
					<text>
						<text class="primary" v-if="rechargeInfo.give_integral">{{ rechargeInfo.give_integral }}</text>
						积分
					</text>
					<text v-if="rechargeInfo.give_growth"> + <text
							class="primary">{{ rechargeInfo.give_growth }}</text>成长值</text>
				</view>
				<u-button class="btn" @tap="onShowPopup" hover-class="none"
					:customStyle="{ backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '60rpx' }"
					:hair-line="false">好的</u-button>
			</view>
		</u-popup>
		<loading-view id="van-toast" v-if="showLoading" backgroundColor="rgba(0, 0, 0, 0)"></loading-view>
	</view>
</template>

<script>
import { rechargeTemplate, recharge, getUser } from '@/api/user';
export default {
	data() {
		return {
			title: '充值余额',
			statusBarHeight: 0, // 状态栏高度
			bgImageHeight: 244,// 背景图高度，单位px，根据实际情况调整
			selectIndex: 0,
			topSpace: 0,
			rechargeTemplate: [],
			userInfo: {
				user_money: 0 // Provide a default value to avoid undefined
			},
			showLoading: false,
			showPopup: false,
			rechargeInfo: {},
			number: '', // 输入金额
		}
	},

	onLoad() {
		uni.$on('payment', params => {
			if (params.result) {
				this.onShowPopup()
				this.getUserInfoFun()
				uni.navigateBack()
			}
		})

		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight

		// #ifdef MP-WEIXIN
		this.topSpace = (80 - this.statusBarHeight)
		// #endif


		// #ifndef MP-WEIXIN
		this.topSpace = (80 + 44)
		// #endif

		this.rechargeTemplateFun();
		this.getUserInfoFun();
	},

	onUnload() {
		uni.$off('payment')
	},

	methods: {
		onShowPopup() {
			this.showPopup = !this.showPopup
		},

		// 获取充值模板列表
		rechargeTemplateFun() {
			rechargeTemplate().then(res => {
				if (res.code == 1) {
					this.rechargeTemplate = res.data
				}
			});
		},

		// 获取用户信息
		getUserInfoFun() {
			getUser().then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			});
		},

		rechargeNow() {
			const {number} = this
			console.log("number>>>", number);
			
			this.rechargeFun({
				money: Number(number)
			});
		},

		// 充值
		rechargeFun(obj) {
			this.showLoading = true

			recharge(obj).then(({ code, data, msg }) => {
				if (code != 1) throw new Error(msg)

				this.rechargeInfo = data
				uni.navigateTo({
					url: `/pages/recharge/recharge?from=${'recharge'}&order_id=${data.id}`
				})
			}).catch(err => {
				console.log(err)
			}).finally(() => {
				this.showLoading = false
			})
		},

	},
	computed: {
		navBackground() {
			return {
				'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.index {
	background-size: 100% auto;
}

.home-bg {
	background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
	background-size: 100% auto;
}

.input {
	height: 124rpx;
	background: #D3E0F1;
	border: 2rpx solid #254062;
}

.input-money {
	width: 180rpx;
}

.item {
	width: 209rpx;
	height: 155rpx;
	background: #F5F5F5;
	border: 1rpx solid #F5F5F5;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	padding: 20rpx 20rpx 12rpx 20rpx;
}

.active {
	background: #F3F8FF;
	border: 1rpx solid #254062;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32rpx;
}

.coupon {
	width: 207rpx;
	height: 196rpx;
	background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
	background-size: cover;

	&>view:first-child {
		color: #845F2E;
		margin-top: 4rpx;
	}
}

.pay-popup {
	.content {
		padding: 40rpx 0;
		text-align: center;
		width: 560rpx;
		border-radius: 20rpx;
	}

	.img-icon {
		width: 168rpx;
		height: 168rpx;
		display: inline-block;
	}

	.btn {
		margin: 80rpx 60rpx 0;
	}
}
</style>