<!-- 充值中心 -->
<template>
	<view class="container">
		<up-navbar bgColor="transparent" title="充值中心" @leftClick="back"></up-navbar>
		<view class="header-wrap">
			<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
			<view class="select-shop">
				<view class="select-btn">
					<up-icon name="map" color="#333"></up-icon>
					<text class="t">双屿Pisces</text>
					<up-icon name="arrow-right" color="#333"></up-icon>
				</view>
			</view>
			<view class="balance-wrap">
				<view class="left">
					<text class="i t">余额</text>
					<text class="n t">12223.53</text>
				</view>
				<view class="right">
					<text class="t">明细</text>
					<text class="t">密码设置</text>
				</view>
			</view>
			<view class="btm-wrap">
				<view class="">

				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="u-flex u-flex-between">
				<view class="u-flex ">
					<image src="/static/vip/money.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
					<text class="u-m-l-24 color-333 font-16 font-700">立即充值</text>
				</view>
				<view class="font-12 color-999">
					<text>充值代表接受</text>
					<text style="color: #ECB592;">《用户隐私协议》</text>
				</view>
			</view>
			<view class="list u-m-t-40">
				<view class="item color1" @click="sel=index" v-for="(item,index) in list" :key="index"
					:class="{active:sel==index}">
					<view class="">
						<text>￥</text>
						<text class="font-700" style="font-size: 48rpx;"
							:class="{color2:sel==index}">{{item.amount}}</text>
					</view>
					<view class="font-12" v-if="item.rewardAmount" :class="{color2:sel==index}">
						<text>赠</text>
						<text>￥</text>
						<text class="font-14">{{item.rewardAmount}}</text>
					</view>
					<view class="font-12" v-if="item.rewardPoints">
						<text>送</text>
						<text>￥</text>
						<text class="font-14">{{item.rewardPoints}}</text>
					</view>
					<view class="font-12 color-666" v-if="item.couponInfoList.length">
						<text>送</text>
						<text>{{item.couponInfoList.length}}</text>
						<text>张券</text>
						<text class="color2 u-m-l-8" v-if="sel==index">查看</text>
					</view>

					<view class="sel u-flex" v-if="sel==index">
						<image class="image" src="/static/vip/sel.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="u-flex other flex-center">
				<text class="font-14 color-333 font-700 u-m-r-28">其他金额</text>
				<up-input v-model="money" type="number" placeholder="请输入充值金额" border="none"
					placeholder-style="font-size:14px;"></up-input>
			</view>
			<view class="color-999 font-12 u-m-t-4">自定义金额充值时，不享受任何优惠赠送</view>
			<button class="buy-btn" @click="buy">
				<text class="font-16 ">￥{{charge_money}}</text>
				<text class="font-14 u-m-l-24">立即充值</text>
			</button>
			<view class="u-m-t-36 color-999 font-12">
				<view>充值说明</view>
				<view class="u-m-t-16">
					<text>适用门店</text>
					<text class="color2 u-m-l-28">全国门店通用 > </text>
				</view>
				<view class="u-m-t-16">
					<text>有效期限</text>
					<text class=" u-m-l-28">永久有效 </text>
				</view>
				<view class="u-m-t-16 u-flex u-flex-y-center">
					<text class="no-wrap">注意事项</text>
					<view class="u-m-l-28">
						<view>1.储值完成后不支持自助退款，可联系商家处理</view>
						<view>	2.余额不支持转赠，不可提现，长期有效</view>
					</view>
					
				</view>
				<view class="u-m-t-16 u-flex u-flex-y-center">
					<text class="no-wrap">充值说明</text>
					<view class="u-m-l-28">
						此处显示内容:管理端配置，读取智慧充值中《充值说明》字段内容
					</view>
					
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import * as vipApi from '@/common/api/market/recharge.js'
	import {joinMember} from '@/common/api/order/index.js'
	import {
		ref,onMounted,computed
	} from 'vue'
	
	async function buy(){
		const res=await joinMember()
	}
	function back() {
		uni.navigateBack();
	}
	const list = ref([])
	const sel = ref(0)
	const money = ref(null);
	async function init(){
		const res=await vipApi.config()
		if(res){
			list.value=res.rechargeDetailList
		}
	}
	const charge_money=computed(()=>{
		const item= list.value[sel.value]
		if(item){
			return item.amount
		}
		return ''
	})
	onMounted(init)
</script>

<style scoped lang="scss">
	.color1 {
		color: #5F2E0F;
	}

	.color2 {
		color: #FF6300;
	}

	.buy-btn {
		margin-top: 28rpx;
		padding: 32rpx 32rpx;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		border-radius: 80rpx;
		line-height: 1;
		background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
		box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
	}

	.other {
		background: #F6F6F6;
		padding: 24rpx 16rpx;
		margin-top: 40rpx;
	}

	.header-wrap {
		width: 100%;
		height: 530rpx;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select-shop {
			display: flex;
			align-items: center;
			position: relative;

			.select-btn {
				display: flex;
				align-items: center;
				gap: 12upx;

				.t {
					color: #333;
				}
			}
		}

		.balance-wrap {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding-top: 40upx;

			.left {
				display: flex;
				align-items: center;

				.t {
					color: #5e3110;

					&.i {
						position: relative;
						top: 10upx;
						font-size: 28upx;
					}

					&.n {
						font-size: 64upx;
						font-weight: bold;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				gap: 12upx;

				.t {
					color: #86491d;
					font-size: 28upx;
				}
			}
		}
	}

	.bottom {
		background-color: rgba(255, 255, 255, .3);
		padding: 40rpx 28rpx 0 28rpx;
		transform: translateY(-140rpx);
		border-radius: 74rpx 74rpx 0 0;
	}

	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20rpx;
		row-gap: 22rpx;

		.item {
			padding: 36rpx 22rpx;
			border-radius: 42rpx;
			background: linear-gradient(180deg, #F5F5F5 58.54%, #FFF 140.47%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			border: 6rpx solid transparent;
			transition: all .3s ease-in-out;

			&.active {
				background: linear-gradient(180deg, #FFC29A -26.17%, #FFF 64.06%);
				border: 6rpx solid #FE6C0E;
				box-shadow: 0 0 31rpx 2rpx #fe8b435e;
			}

			.sel {
				position: absolute;
				bottom: 0;
				left: 50%;

				transform: translateX(-50%) translateY(21rpx);

				.image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
</style>