<template>
	<!-- 充值 -->
	<view>
		<u-navbar leftIconColor="#fff" :placeholder="true" title="会员中心" bgColor="#1D1E24" :autoBack="true"></u-navbar>
		<view class="blackBg">
			<view class="topBox">
				<image class="bg" src="/static/mineIc/vipBg.png" mode=""></image>
				<view class="tipBox">
					<view class="balanceBox">
						<view class="tip">余额(元)</view>
						<view class="balance flexA">
							<text>￥</text>
							<view class="balances">{{balance}}</view>
						</view>
					</view>
					<view class="photo flexA">
						<!-- <image src="/static/logo.png" mode=""></image>
						<text>哈哈</text> -->
					<open-data type="userAvatarUrl" class="avatar"></open-data>

						<open-data type="userNickName" class="nickname"></open-data>

					</view>
				</view>
			</view>
		</view>
		<view class="packageBox">
			<view class="title flexA">金额
			<input type="number" v-model="money" placeholder-class="ples" placeholder="(自定义)">
			</view>
			<view class="package">
				<view class="item flexV" @click="checkPackage(item,index)" :class="cur == index ? 'check' : '' "
					v-for="(item,index) in packageList" :key="item.id">
					<view class="recharge">冲{{item.money}}</view>
					<view class="deliver">送{{item.discount}}</view>
				</view>
			</view>
		</view>
		<view class="line"> </view>
		<view class="desc">
			<view class="descTitle">使用说明</view>
		</view>
		<view class="btnBox iosAuto">
			<view class="btn flexC" @click="rechargeBtn">立即支付</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { getPackage,getRecharge,getyue } from '@/api/'
	onShow(()=> {
		getPackages() //充值套餐
		getyues() //我的余额
	})
	let packageList = ref([])  //套餐数组
	let money = ref('') //自定义金额
	let cur = ref(0) //当前选择套餐
	let balance = ref(0) //余额
	const checkPackage = (item, index) => {
		cur.value = index
	}
	// 立即支付按钮
	const rechargeBtn = ()=> {
		let packageMoney = packageList.value[cur.value].money
		getRecharges( money.value== '' ? packageMoney : money.value)
	}
	const { proxy } = getCurrentInstance()
	// 充值
	const getRecharges = async (money)=>{
	  try {
	    const res = await getRecharge(money)
		proxy.$methods.pay(res)
	    console.log('getRecharge', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getRecharge', err)
	  }
	}
	// 充值套餐
	const getPackages = async ()=>{
	  try {
	    const res = await getPackage()
		packageList.value = res
	    console.log('getPackage', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getPackage', err)
	  }
	}
	// 我的余额
	const getyues = async ()=> {
	  try {
	    const res = await getyue()
		balance.value = res.money
		uni.setStorageSync('balance',res.money)
	    console.log('getyue', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getyue', err)
	  }
	}
</script>

<style lang="scss">
	.u-navbar__content__title {
		color: #fff !important;
		font-size: 32rpx;
		font-weight: 700;
	}

	.blackBg {
		width: 100%;
		height: 278rpx;
		background: #1D1E24;
		padding: 32rpx 24rpx 0;
		box-sizing: border-box;

		.topBox {
			position: relative;
			width: 100%;

			.bg {
				width: 100%;
				height: 325rpx;
			}
		}

		.tipBox {
			position: absolute;
			display: flex;
			justify-content: space-between;
			top: 0;
			left: 32rpx;
			width: 640rpx;
			box-sizing: border-box;

			.balanceBox {

				.tip {
					margin-top: 96rpx;
					color: #000000ff;
					font-size: 24rpx;
				}

				.balance {
					margin-top: 12rpx;

					text {
						font-size: 32rpx;
						font-weight: 700;
						margin-top: 30rpx;
					}

					.balances {
						font-size: 80rpx;
						font-weight: 700;
					}
				}
			}

			.photo {
				height: 40rpx;
				color: #000000e6;
				font-size: 24rpx;
				margin-top: 28rpx;

				.avatar {
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	.packageBox {
		position: relative;
		width: 100%;
		opacity: 1;
		background: #ffffffff;
		padding: 40rpx 20rpx 38rpx;
		box-sizing: border-box;

		.title {
			color: #000000e6;
			font-size: 30rpx;
			font-weight: 700;
			margin-bottom: 44rpx;
			
			input {
				margin-left: 16rpx;
				 color: #000000e6;
				 font-size: 30rpx;
				 font-weight: 700;
			}
		}

		.package {
			margin: 0 auto;
			width: 638rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				padding: 40rpx 0;
				width: 262rpx;
				margin-bottom: 24rpx;
				background: #f9f9f9ff;
				border-radius: 24rpx;
				border: 2rpx solid #f9f9f9ff;


				.recharge {
					color: #361e0dff;
					font-size: 40rpx;
					font-weight: 700;
					margin-bottom: 14rpx;
				}

				.deliver {
					color: #000000ff;
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.check {
				width: 262rpx;
				border-radius: 24rpx;
				border: 2rpx solid #ddb674ff;
				background: #fdf8eeff !important;
			}
		}
	}

	.line {
		width: 100%;
		height: 24rpx;
		background: #F5F7FB;
	}
	
	.desc {
		width: 100%;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
		
		.descTitle {
			 color: #000000e6;
			 font-size: 30rpx;
			 font-weight: 700;
			 margin-bottom: 24rpx;
		}
	}

	.btnBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;

		.btn {
			margin: 15rpx auto 0;
			width: 702rpx;
			height: 88rpx;
			border-radius: 16rpx;
			color: #ffffffff;
			font-size: 32rpx;
			font-weight: 700;
			background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
		}
	}
</style>