<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="充值中心"></el-navbar>
		
		<view class="account">
			<view>帐户余额</view>
			<view>￥{{ user.money || 0 }}</view>
		</view>
		
		<view class="recharge-panel">
			<view class="recharge-label">充值金额</view>
			<view class="recharge-content">
				<view class="item-box" :class="{ active: active == index }" v-for="(item,index) in config.list" :key="index" @click="onSelected(item,index)">
					<view class="money">{{ item.order_amount }}</view>
					<view class="gift">送{{ item.price }}元</view>
				</view>
			</view>
		</view>
		
		<view class="recharge-input" v-if="config.is_custom">
			<input type="number" placeholder="请输入充值金额" :value="orderAmount" />
		</view>
		
		<view class="button" @click="onPay">
			<text :class="{ active: isSubmit }">充 值</text>
		</view>
		
		<view class="log">
			<text @click="navigateTo('pages/ucenter/wallet/log')">充值日志</text>
		</view>
		
		<view class="tips">
			<view class="tips-box">充值说明</view>
			<view class="content">
				<view v-html="config.content"></view>
			</view>
		</view>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	import { isEmpty } from "@/el-ui/libs/check";
	import { navigateTo,redirectTo } from "@/el-ui/libs/navigate";
	
	const userStore 		 = useUserStore();
	const { isLogin,user }   = storeToRefs(userStore);
	const config             = ref();
	const orderAmount        = ref('');
	
	onLoad(()=>{
		uni.$http.get("ucenter.recharge/wallet").then(res=>{
			if(res.code){
				config.value = res.data;
				orderAmount.value = config.value.order_amount > 0 ? config.value.order_amount : '';
				if(config.value.list.length > 0){
					data.value = config.value.list[active.value];
				}
				
				if(res.data.status == 0){
					redirectTo('pages/ucenter/wallet/index')
				}
			}
		});
	});
	
	const active = ref(0);
	const data   = ref();
	const onSelected = (value,index)=>{
		data.value   = value;
		active.value = index;
	}
	
	const isSubmit = ref(false);
	const onPay = ()=>{
		if(isSubmit.value){
			return false;
		}
		
		isSubmit.value = true;
		uni.$http.post("ucenter.recharge/pay",{ price: data.value.order_amount }).then(res=>{
			isSubmit.value = false;
			if(res.code){
				redirectTo(`/pages/cart/cashier?pay_type=recharge&order_id=${res.data}`);
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.account {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 325px;
		height: 90px;
		margin: 25px auto;
		padding: 0 30px;
		box-sizing: border-box;
		border-radius: 6px;
		color: #fff;
		background: linear-gradient(180deg, var(--ui-bg-color-light), var(--ui-bg-color));
		box-shadow: 0 5px 22px 0 rgba(0,0,0,.26);
		view {
			&:nth-child(2){
				text-align: right;
				font-size: 40rpx;
			}
		}
	}
	
	.recharge-panel {
		margin-top: 30px;
		padding: 0 30px;
		display: flex;
		flex-direction: column;
		.recharge-label {
			color: #333;
			font-size: 14px;
			margin-bottom: 12px;
		}
		.recharge-content {
			.item-box {
				width: 192rpx;
				padding: 14rpx 0;
				float: left;
				text-align: center;
				color: #888;
				border: 1rpx solid #e4e4e4;
				border-radius: 10rpx;
				margin: 0 20rpx 20rpx 0;
				.money {
					font-size: 32rpx;
					color: #525252;
				}
				&.active {
					border: 1px solid red;
				}
				.gift {
					font-size: 24rpx;
				}
				
				&:nth-child(3n + 0) {
					margin-right: 0;
				}
			}
		}
	}
	
	.recharge-input {
		padding: 10rpx 30px;
		margin-top: 30rpx;
		input {
			border: 0.5px solid #e4e4e4;
			border-radius: 5px;
			font-size: 13px;
			padding: 16rpx 0px;
			text-indent: 15rpx;
		}
	}
	
	.button {
		margin-top: 100rpx;
		text {
			width: 460rpx;
			height: 84rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active {
				background: #ccc;
			}
		}
	}
	
	.log {
		margin-top: 30rpx;
		text {
			width: 460rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			color: #555;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.tips {
		padding: 0 30px;
		margin-top: 60rpx;
		.tips-box {
			color: #333;
			font-size: 30rpx;
			margin-bottom: 24rpx;
		}
		.content {
			
		}
	}
	
</style>