<template>
	<view>
		<view class="body">
			<uni-nav-bar fixed statusBar left-icon="left" right-icon="gear" background-color="transparent"
				:style="{ '--right-padding': getMenuInfoList + 'px' }" :border="false" @clickLeft="back"
				title="我的账户"></uni-nav-bar>
			<view class="back"></view>
			<view class="list">
				<view class="list_money">{{ getBobbiesList.money }}</view>
				<view class="list_title">我的金币</view>
				<view class="list_content">
					<view class="list_mdoule fa sb">
						<view class="list_recharge">账户充值</view>
						<view class="list_record fa" @click="totransactionRecord">交易记录<image
								src="/static/images/more.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="list_detail">
						<view class="list_item" :class="{ 'list_active': recharge_package_id == item.id }"
							v-for="(item, index) in memberList" :key="item.id" @click="memberClick(item.id)">
							<view class="list_gold fx">{{ item.jinbi }}<text>金币</text></view>
							<view class="list_price fx">{{ item.money }}<text>元</text></view>
						</view>
					</view>
					<view class="list_customize faj">
						<image src="/static/images/mine_edit.png" mode="widthFix"></image>
						<input class="" placeholder="自定义金额" placeholder-class="list_input" @input="inputMoney"
							@focus="focusMoney" v-model="money" />
					</view>
				</view>
			</view>
			<view class="module">
				<view class="module_title">支付方式</view>
				<view class="module_content">
					<view class="module_detail fa sb" @click="paymentSelect(0)">
						<view class="module_item fa">
							<image src="/static/images/weixin.png" mode="widthFix"></image>
							微信支付
						</view>
						<view class="module_select faj">
							<image v-if="paymentMethod === 0" src="/static/images/selectA.png" mode="widthFix"></image>
							<image v-else src="/static/images/select.png" mode="widthFix"></image>
						</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="module_detail fa sb" @click="paymentSelect(1)">
						<view class="module_item fa">
							<image src="/static/images/zhifubao.png" mode="widthFix"></image>
							支付宝支付
						</view>
						<view class="module_select faj">
							<image v-if="paymentMethod === 1" src="/static/images/selectA.png" mode="widthFix"></image>
							<image v-else src="/static/images/select.png" mode="widthFix"></image>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="agreement faj">充值即代表阅读并同意<text>《充值协议》</text></view>
			<view class="opt">
				<view class="opt_module">
					<view class="opt_data">
						<view class="opt_btn faj" @click="submit">
							充值
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	RechargePackageApi,
	CreateJinbiOrderApi,
	GetUserBasic,
	JinbiPayApi
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import tabBar from '@/components/tab-bar.vue';
export default {
	components: {
		notHave,
		topSafety,
		tabBar,
	},
	data() {
		return {
			memberList: [],
			paymentMethod: 0, // 0: 微信支付, 1: 支付宝支付
			recharge_package_id: '',
			money: '',
			getBobbiesList: '',
			getMenuInfoList: '',

		}
	},
	onShow() {
		this.getRechargePackage()
		this.getUserBasic()
		// #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
	},
	methods: {
		getUserBasic() {
			GetUserBasic({}).then(res => {
				if (res.code == 1) {
					this.getBobbiesList = res.data
				}
			})
		},
		submit() {
			if (this.money == '' && this.recharge_package_id == '') {
				uni.showToast({
					title: '请选择充值套餐或输入自定义金额',
					icon: 'none',
					position: 'top'
				})
				return
			}
			CreateJinbiOrderApi({
				recharge_package_id: this.recharge_package_id,
				money: this.money,
				pay_type: 'miniWechat'
			}).then(res => {
				if (res.code == 1) {
					this.recharge_package_id = ''
					this.money = ''
					this.goPay(res.data.out_trade_no)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		goPay(orderId) {
			JinbiPayApi({
				out_trade_no: orderId
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '充值成功',
						icon: 'none',
						position: 'top'
					})
					setTimeout(() => {
						this.getUserBasic()
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},

		inputMoney(e) {
			this.money = e.detail.value
		},
		focusMoney() {
			this.recharge_package_id = ''
		},
		//充值套餐列表
		getRechargePackage() {
			RechargePackageApi({}).then(res => {
				if (res.code == 1) {
					this.memberList = res.data
				}
			})
		},
		memberClick(id) {
			this.recharge_package_id = id
		},
		paymentSelect(index) {
			this.paymentMethod = index;
		},
		totransactionRecord() {
			uni.navigateTo({
				url: '/pages/mine/transactionRecord'
			})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		getMenuInfo() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			console.log('胶囊信息:', menuButtonInfo);

			// 胶囊宽度
			const capsuleWidth = menuButtonInfo.width;

			// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
			const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;

			console.log('胶囊宽度:', capsuleWidth);
			console.log('胶囊距离右侧的距离:', distanceFromRight);

			this.getMenuInfoList = capsuleWidth + distanceFromRight;

			return {
				width: capsuleWidth,
				distanceFromRight: distanceFromRight,
				menuButtonInfo: menuButtonInfo
			};
		},
	}
}
</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style>
.body {
	position: relative;
	padding: 0 40rpx;
}

.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 596rpx;
	background: linear-gradient(180deg, #FFE3E9 0%, #F7F7F7 100%);
}

.list {
	position: relative;
	margin: 48rpx 0 0 0;
}

.list_money {
	font-weight: 700;
	font-size: 72rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: center;
}

.list_title {
	margin: 30rpx 0 0 0;
	font-weight: 500;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	text-align: center;
}

.list_content {
	position: relative;
	margin: 38rpx 0 0 0;
}

.list_mdoule {
	position: relative;
}

.list_recharge {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_record {
	position: relative;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.list_record image {
	margin: 0 0 0 10rpx;
	width: 8rpx;
	height: 8rpx;
	display: block;
}

.list_detail {
	position: relative;
	margin: 20rpx 0 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 50rpx;
	grid-row-gap: 40rpx;
}

.list_item {
	position: relative;
	padding: 30rpx 62rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	border: 1px solid #ffffff;
}

.list_gold {
	font-weight: 700;
	font-size: 52rpx;
	color: #8449FE;
	line-height: 50rpx;
}

.list_gold text {
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 62rpx
}

.list_price {
	margin: 10rpx 0 0 0;
	font-weight: 700;
	font-size: 52rpx;
	color: #8449FE;
	line-height: 50rpx;
}

.list_price text {
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 62rpx
}

.list_customize {
	position: relative;
	margin: 40rpx 0 0 0;
	padding: 36rpx 0;
	background: #FFFFFF;
	border-radius: 12rpx;
}

.list_customize image {
	margin: 0 14rpx 0 0;
	width: 26rpx;
	height: 26rpx;
}

.list_customize input {
	width: 200rpx;
	font-weight: 500;
	font-size: 32rpx;
	line-height: 50rpx;
}

.list_input {
	color: #9E9E9E;
}

.module {
	position: relative;
	margin: 40rpx 0 0 0;
}

.module_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.module_content {
	position: relative;
	margin: 20rpx 0 0 0;
}

.module_detail {
	position: relative;
	margin: 0 0 20rpx 0;
	padding: 40rpx 20rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}

.module_item {
	position: relative;
	font-weight: 400;
	font-size: 30rpx;
	color: #333333;
	line-height: 42rpx;
}

.module_item image {
	margin: 0 20rpx 0 0;
	width: 50rpx;
	height: 50rpx;
	display: block;
	border-radius: 12rpx;
}

.module_select {
	position: relative;
}

.module_select image {
	width: 40rpx;
	height: 40rpx;
	display: block;
}

.agreement {
	position: relative;
	margin: 40rpx 0 0 0;
	font-weight: 400;
	font-size: 28rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.agreement text {
	color: #8449FE;
}


.opt {

	height: 150rpx;
}

.opt_module {

	padding: 5rpx 0 70rpx 0;
	height: 85rpx;
	width: 100%;
	background: #F6F8FA;
	bottom: 0;
	left: 0;
	box-sizing: content-box;
	border-top: 1px solid #f0f0f0;
	z-index: 2;
}

.opt_data {
	padding: 5rpx 50rpx;
	font-size: 28rpx;
}

.opt_btn {
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 12rpx;
}

.list_active {
	border: 1px solid #8449FE !important;
}

.uni-navbar__header-btns {
	padding-right: var(--right-padding, 0);
}

.uni-navbar__header-btns-right.data-v-26544265 {
	width: 60rpx !important;
}
</style>