<template>
	<view class="red-bag-page">
			<u-navbar back-icon-name="close" :back-icon-size="36" back-icon-color="#333333" :border-bottom="false"
					title="充值" title-color="#000000" :title-size="36" :title-bold="true">
				<view slot="right">
					<view class="u-m-r-20">
						<u-icon name="more-dot-fill" color="#333333" :size="36"></u-icon>
					</view>
				</view>
			</u-navbar>
			<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight" type="error"></u-top-tips>
			<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
				<view class="u-flex u-row-between u-col-center u-p-20"  :style="payValue>maxPayLimit?'color:#fa3534':''">
					<view>
						<text>金额</text>
					</view>
					<view>
						<u-input input-align="right" v-model="payValue"  :border="false" 
						 @input="amountInputChange" type="digit"
						:custom-style="{color:payValue>maxPayLimit?'#fa3534':'#000000',fontSize:'34rpx'}" 
						placeholder="¥0.00" placeholder-style="color:#cccccc;font-size:34rpx;" :clearable="false"/>
					</view>
				</view>
			</view>
		
			
			<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
				<view  class="u-flex u-row-between u-col-center" 
						style="width: 100%;padding: 30rpx 20rpx;" @click="selectPayWay">
					<view>
						<text>充值方式</text>
					</view>
					<view>
						<u-icon color="#606266" name="arrow-right" 
								 label-pos="left" label-color="#000000" label-size="32rpx"
								:label="selectedPayWay.text"></u-icon>
					</view>
				</view>
			</view>
			
			<view  :style="payValue>maxPayLimit?'color:#fa3534;text-align: center;margin-top: 120rpx;':'text-align: center;margin-top: 120rpx;'"
					class="u-flex u-row-center u-col-center">
				<view style="font-size:36px;margin-right: 10rpx;font-weight: 500;margin-bottom: 10rpx;">¥</view>
				<view  style="font-size:50px;font-weight: 400;">{{valueFormat()}}</view>
			</view>
			
			<view class="u-flex u-row-center u-col-center u-m-t-30">
				<view @click="showPwdPop" 
					style="font-size: 36rpx; background-color:#19be6b;color:#ffffff;border-radius: 16rpx;text-align: center;padding: 26rpx 100rpx;">充值</view>
			</view>
			
			<!-- 支付方式 -->
			<u-action-sheet :tips="tips" :list="payWaylist"  @click="payWayClick" v-model="payWayshow"></u-action-sheet>
			
			
			<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
					:mask-close-able="false">
					<view class="u-p-30">
						<view>
							<view class="u-flex u-row-between">
								<view style="width: 100rpx;" @click="closePwdPop">
									<u-icon name="close"></u-icon>
								</view>
								<view v-if="pwdErrorTips.length>0" 
									style="text-align: center;color: #FC5531;font-size: 34rpx">
									{{pwdErrorTips}}
								</view>
								<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
									<text>请输入支付密码</text>
								</view>
								<view style="width: 100rpx;">
									<text></text>
								</view>
							</view>
						</view>
						<view class="u-m-t-30 u-p-b-30  u-border-bottom" style="text-align: center;font-size: 18px;">
							<view>充值到零钱</view>
							<view style="font-weight: bold;">
								<text style="margin-right: 6rpx;">¥</text><text style="font-size: 26px;">{{valueFormat()}}</text>
							</view>
						</view>
						<view class="u-m-t-50">
							<u-message-input :breathe="true"  :maxlength="6" :dot-fill="true" 
										@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
							</u-message-input>
						</view>
					</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payValue:"",
				redBagRemark:"",
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				chatGroupId:'',
				passwordPopFlag:false,
				pwdFocus:false,
				pwdErrorTips:'',
				payWayshow:false,
				maxPayLimit:100000,
				payWaylist:[
					{
						text: '银行卡1',
						color:'#19be6b',
						fontSize:32,
						subText:'推荐',
						payID:1
					},
					{
						text: '银行卡2',
						color:'#2979ff',
						fontSize:32,
						payID:2
					}
				],
				tips: {
					text: '选择充值方式',
					color: '#000000',
					fontSize: 36
				},
				selectedPayWay:{
					text: '请选择',
					payID:0
				}
			};
		},
		onLoad:function(option){
			this.chatGroupId=option.chatGroupId;
		},
		methods:{
			valueFormat:function(){
				if(this.payValue.length<1){
					return "0.00"
				}
				if(this.payValue.toString().indexOf(".")==-1){
					return this.payValue+'.00';
				}else{
					return this.payValue;
				}
			},
			amountInputChange:function(e){
				console.log(e);
				if(Number(e)>this.maxPayLimit){
					this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
					this.payValue="";
				}
			},
			
			selectPayWay:function(){
				let that=this;
				that.payWayshow=true;	
			},
			payWayClick:function(index){
				//console.log(`点击了第${index + 1}项`,this.payWaylist[index]);
				this.selectedPayWay=this.payWaylist[index];
			},
			showPwdPop:function(){
				let that=this;
				if(this.payValue.length<1||this.payValue<=0){
					this.showTips("未填写[金额]");
					return;
				}
				if(this.payValue>this.maxPayLimit){
					this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
					return;
				}
				if(this.selectedPayWay.payID<1){
					this.showTips("请选择充值方式");
					return;
				}
				this.passwordPopFlag=true;
				this.pwdErrorTips="";
				setTimeout(function(){
					that.pwdFocus=true;
				},1000)
			},
			closePwdPop:function(){
				this.pwdErrorTips="";
				this.passwordPopFlag=false;
				this.pwdFocus=false;
			},
			inputChange(e){
				this.pwdErrorTips="";
			},
			inputFinish(e) {
				//this.pwdFocus=fasle;	
				let that=this;
				console.log('输入结束，当前值为：' + e);
				let param={
					accountBalance:this.payValue,
					tradePwd:e
				};
				that.$u.api.imUser.validatePayTradePwd(param).then(res => {
					console.log("交易密码校验结果",res);
					if(res.code==200){
						this.submit();
					}else{
						let message=res.message?res.message:'支付密码错误';
						this.globalUtil.utilAlert(message);
						this.pwdErrorTips=message;
						return;
					}
				})
			},
			submit:function(){
				let that=this;
				let param={
					payValue:Number(this.payValue).toFixed(2),
					payWay:this.selectedPayWay.payID,
				}
				that.$u.api.imUser.toPayUserBalance(param).then(res =>{
					if(res.code==200){
						that.userAccount=res.data;
						this.$u.vuex("vuex_userAccountInfo",that.userAccount);
						this.closePwdPop();
						this.globalUtil.utilAlert("充值成功!",3000);
						setTimeout(function(){
							uni.navigateBack();
						},2000)
					}
				})
				console.log("充值参数",param);
			},
			
			showTips(title) {
				this.$refs.uTips.show({
					title: title?title:'未填写[金额]',
					type:'error'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.red-bag-page{
		background-color: #f1f1f1;
	}
</style>
<style>
	page{
		background-color: #f1f1f1;
	}
</style>
