<template>
	<view class="rechargeStyle" :style="{'height':contentHeight}" > 
		<view class="rechargeBox" v-if="IsShowRecharge==1">
			<view class="title">
				<view class="title_l" :style="{'background':mainColor}"></view>
				<Text style='margin-left: 20rpx;font-size: 26rpx;'>我的账户</Text>
			</view>
			<view class="balance">
				<view style="display: flex;align-items: center;">
					<Text style='margin-left: 20rpx;font-size: 36rpx;'>余额</Text>
				</view>
				<Text style='font-size: 42rpx;'>￥{{balance}}</Text>
			</view>
			<view class="recharge">
				<Text style='font-size: 14px'>充值金额</Text>
				<input  style='text-align: right;' v-model="inputvalue" placeholder="请输入" type="digit">
			</view>
			<View class='rulesBox'>
				<view v-for="(item, index) in g.rechargeRules" :key="index" class="rulesitem" @click="recharge_btn(item)">
					
					<Text style='font-size: 20px;margin: 5px;'>{{item.Money}}</Text>
					<Text>名称：{{item.Name}}</Text>
					<Text>赠金额：{{item.GiveMoney}}元</Text>
					<Text>赠积分：{{item.GiveIntegral}}</Text>
				</view>
			</View>
			
			<view class='button' 
				:style="{'background':mainColor}"
				@click="btn_recharge">
				<Text>立即充值</Text>
			</view>	
			<view class="title" style="margin-top: 30rpx;">
				<view class="title_l" :style="{'background':mainColor}"></view>
				<Text style='margin-left: 20rpx;font-size: 26rpx;'>充值说明</Text>
				
			</view>
			<view style="margin: 5px 0;width: 100%;">
				<image v-if="settings.ExplainIco!='' " :src="settings.ExplainIco" mode="widthFix" style="width: 100%;" />
				<Text>{{settings.Explain}}</Text>
			</view>
			
		</view>
		<u-empty text="数据为空" mode="data" v-if="IsShowRecharge==0"></u-empty>
	</view>
</template>

<script>
	import payCom from '@/components/pay/pay';
	export default {
		data() {
			return {
				pageTitle:"充值中心",
				contentHeight:0,
				mainColor: "",
				g:{},
				settings:{},
				balance:0,
				IsShowRecharge:0,
				inputvalue:'',
			}
		},
		mounted() {
			let currentPages = getCurrentPages();
			this.IsShowRecharge = uni.getStorageSync("basedata") ? uni.getStorageSync("basedata").mall.setting.IsShowRecharge:0	
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = uni.getStorageSync("basedata")
			   ? uni.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 if(this.IsShowRecharge==0){
				 uni.setNavigationBarTitle({
				   title: '',
				 });
			 }else{
				 uni.setNavigationBarTitle({
				   title: this.pageTitle,
				 });
			 }
			 
		},
		onLoad(option){
			// this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
			this.balance = option.balance;
			this.balancedata()
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			  this.mainColor = this.$uiConfig.mainColor;
			 
			 
		},
		
		methods: {
			
			balancedata(){
				uni.showNavigationBarLoading();
				this.request2(
				  {
				  	url: '/api/AppletUser/GetUserRechargeSettings',
				  	data: {}
				  },
				  res => {  
					  uni.hideNavigationBarLoading()
					  this.g =  res.data
					  this.settings = res.data.rechargeSettings[0]
				  }
				);
			},
			
		
			btn_recharge(){
				
			},
			recharge_btn(item){
				uni.showLoading({
					title:'加载中',
					icon:'none'
				})
				this.request2(
				  {
				  	url: '/api/WeChatPay/GetRechargePayInfo',
				  	data: {
						Balance:item.Money,
						 RechargeRulesId:item.ID,
						 PayWay:1
					}
				  },
				  res => {  
					  uni.hideLoading() 
				  }
				);
			}
				
		}
	}
</script>

<style>
	.rechargeStyle{
		background: #f3f4f6;
		width: 100%;
	}
	.rechargeStyle .rechargeBox{
		width: 100%;
		padding: 15px;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.rechargeStyle .title{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.rechargeStyle .title .title_l{
		width: 3px;
		height: 15px;
	}
	.rechargeStyle .balance{
		background-image: url(../../static/images/icon/icon-balance-recharge-bg.png);
		background-repeat:no-repeat;
		background-size: 100% 90px;
		margin-top: 30rpx;
		width: 100%;
		height: 90px;
		border-radius: 10rpx;
		
		padding:0 40rpx ;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.rechargeStyle .recharge{
		margin: 15px 0; 
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.rechargeStyle .button{
		width: 100%;height: 36px;
		color: #fff;
		margin: 20rpx 0;
		border-radius:18px ;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rechargeStyle .rulesBox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		padding: 10px ;
		
	}
	.rechargeStyle .rulesitem{
		width: calc((100vw - 135px)/3);
		margin: 0 15px;
		border: 1px solid #F43F3B;
		font-size: 12px;
		line-height: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5px 0;
		margin-top: 10px;
	}
</style>
