<template>
	<view class="container">
		<u-navbar title="充值" :titleStyle="{color:'#fff'}" :autoBack="true" bgColor="transparent" leftIconColor="#fff"></u-navbar>
		<image mode="aspectFill" src="/static/unielepystatic/img/pay/icon-background.png" class="rebg"></image>
		<view class="container-main-hd">
			<view class="item-header">
				<text class="money">￥{{moneyInfo}}</text>
				<view class="item-header-img">
					<image src="/static/unielepystatic/img/pay/icon-balancepay.png"></image>
					<text class="money-text">账户余额</text>
				</view>
			</view>
		</view>
		<view class="container-main">
			<view class="item-bottom">
				<view class="item-bottom-inner-header">
					<text class="title-text">充值金额</text>
					<view class="input-money-header">
						<text>￥</text>
						<input type="digit" class="uni-input" focus placeholder="请输入充值金额" v-model="money" @input="checkNum" :maxlength="maxlength"/>
					</view>
				</view>
				<u-radio-group active-color="#2269FB"  v-model="payType" @change="radioGroupChange" >
					<view class="item-bottom-inner-center">
						<text class="title-text">充值方式</text>
						<view  v-for="(item,index) in rechargeList" :key="index" class="pay" @click="choosePay(item)">
							<view class="rgmlist">
								<view class="pay-method">
									<image :src="item.icon" mode="aspectFill" :style="item.style"></image>
									<text>{{item.name}}</text>
								</view>
								<u-radio shape="circle" :name="item.id" @change="radioChage"></u-radio>
							</view>
							<view class="tips3" v-if="item.id === '5' && payType === '5'">{{tips3}}</view>
						</view>
					</view>
				</u-radio-group>
				<view class="item-footer" v-if="isbank">
					<view class="item-transfer">
						<text>转账人姓名</text>
						<input class="uni-input" focus placeholder="请输入您的名字" v-model="name" />
					</view>
					<view class="item-transfer-bottom">
						<view class="text">
							<text>转账凭证:</text>
							<text>（请至少上传一张转账截图）</text>
						</view>
						<view class="filepicker">
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								:previewFullImage="true"
								name="1"
								maxSize="1048576"
								multiple
								:maxCount="1"
								>
							<image src="/static/unielepystatic/img/public/icon-uploadimg.png" mode="widthFix" style="width: 70px;height: 70px;"></image>
							</u-upload>
						</view>
						<text class="transfer-tips">{{tips2}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button :disabled="btnDisable" @click="$stopRepeatClick(submitBtn,'')">提交</button>
			<text>{{tips}}</text>
		</view>
	</view>
</template>

<script>
	import {uploadImage} from '@/api/api.js'
	export default{
		data() {
			return {
				maxlength:10,
				moneyInfo:"0.00",
				money:"",
				name:"",
				rechargeList:[
					{id:'2',name:"微信支付",icon:"/static/unielepystatic/img/pay/icon-wechatpay.png",style:"width: 54rpx;height: 50rpx"},
					{id:'5',name:"线下转账",icon:"/static/unielepystatic/img/pay/icon-bankpay.png",style:"width: 52rpx;height: 52rpx"},
				],
				payType:"",
				tips:"",
				tips2:"",
				tips3:"温馨提示：线下转账请联系客服",
				isbank:false,
				images: [],
				imageStyles:{
					width:100,
					height:100,
				},
				fileList1:[],
				btnDisable:false,
				noClick:true
			}
		},
		onLoad() {
			this.getData()
		},
		methods:{
			//限制只能输入正确的价格（后两位的小数或正整数）
			checkNum(e) {
				let value = e.detail.value;
				if(!this.$common.isRealPrice(value)){
					this.$common.showToast("请输入正确的金额")
					return
				}
				let dot = value.indexOf('.');   //包含小数点
				let reg = /^[0-9]+$/;   //正整数
				if (dot > -1) {   
					this.maxlength = dot + 3;   //长度是小数点后两位
					if (value.length > dot + 3) {
					}
				}
				if (reg.test(value)) {   //如果是正整数不包含小数点
					this.maxlength = 10;
				}
			},
			choosePay(item){
				this.payType = item.id
				if(this.payType==='5'){
					this.isbank = true
					this.btnDisable = false
				}else{
					if(this.payType==='2'){
						this.btnDisable = false
						this.isbank = false
					}else{
						this.isbank = false
						this.btnDisable = false
					}
					
				}
			},
			submitBtn(){
				var that = this
				if(!that.btnDisable){
					that.btnDisable = true
					if(!that.$common.isRealPrice(that.money)){
						that.btnDisable = false
						that.$common.showToast("请填写正确格式的金额")
						return
					}
					if(this.payType=='2'){
						that.btnDisable = false
						var params = {
							pay_method:2,
							platform:'xcx',
							type:"recharge",
							amount:that.money
						}
						//支付逻辑
						// userPayment(params).then(res=>{
						// 	uni.hideLoading()
						// 	if(res.code == 2000){
						// 		if(that.payType=='2'){
						// 			var payObj = res.data.data.wechataydata
						// 			var order_no = res.data.data.order_no
						// 			// #ifdef MP-WEIXIN
						// 			uni.requestPayment({
						// 				provider: 'wxpay',
						// 				// appId:'wx023a7d6245xxxxx',
						// 				timeStamp: payObj.timestamp,
						// 				nonceStr: payObj.nonceStr,
						// 				package: payObj.package,
						// 				signType: payObj.signType,
						// 				paySign: payObj.sign,
						// 				success(res) {
						// 					uni.hideLoading()
						// 					console.log(res, '支付成功')
						// 					that.$common.showToast("支付成功")
						// 					that.$common.reloadPage("/pages/pay/recharge")
						// 				},
						// 				fail(res) {
						// 					 uni.hideLoading()
						// 					 that.$common.showToast("用户取消支付")
						// 				}
						// 			})
						// 			// #endif
						// 		}
								
						// 	}else{
						// 		that.$common.showToast(res.msg)
						// 	}
						// })
					}
					else if(this.payType == '5'){
						if(that.images==""){
							that.btnDisable = false
							that.$common.showToast("请先上传凭证")
							return
						}
						this.$common.showLoading("支付中...")
						var params = {
							pay_method:that.payType,
							platform:'xcx',
							type:'recharge',
							amount:that.money,
							bank_transfer_name:that.name,
							bank_transfer_image:that.images
						}
						userPayment(params).then(res=>{
							uni.hideLoading()
							if(res.code == 2000){
								that.$common.showToast("提交成功,请等待确认")
								that.$common.reloadPage("/pages/pay/recharge")
							}else{
								that.$common.showToast(res.msg)
								that.btnDisable = false
							}
						})
					}
				}
				
			},
			radioChage(n){
				
			},
			radioGroupChange(n) {
				if(n==='5'){
					this.isbank = true
					this.btnDisable = false
				}else{
					if(n==='3'){
						this.btnDisable = true
						this.isbank = false
						this.$common.showToast("微信支付正在开通中...")
					}else{
						this.isbank = false
						this.btnDisable = false
					}
					
				}
			},
			//u-upload自定义图片上传
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.images=""
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const obj = await uploadImage(lists[i].url)
					let result=''
					if(obj.code == 2000) {
						if (obj.data.data[0].indexOf("://")>=0){
							result = obj.data.data[0]
						}else{
							result = url.split('/api')[0]+obj.data.data[0]
						}
					} else {
						common.showToast(obj.msg)
					}
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					this.images=result
				}
				console.log(this.fileList1,"上传的图片列表")
			},
			//----------------图片上传结束
			getData(){
				// getConsumelist().then(res=>{
				// 	if(res.code == 2000){
				// 		this.moneyInfo = res.data.data.balance
				// 	}
				// })
			},
		},
	}
</script>

<style lang="scss" scoped>
	.rebg{
		width:100%;
		height:468rpx
	}
	.container{
		.container-main-hd{
			background: transparent;
			position: absolute;
			top:140rpx;
			width: 100%;
			.item-header{
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 250rpx;
				font-size: 60rpx;
				font-weight: bold;
				color: #FFFFFF;
				.money{
					margin-top: 100rpx;
					margin-bottom: 20rpx;
				}
				.item-header-img{
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #FFFFFF;
					opacity: 0.82;
					image{
						width: 34rpx;
						height: 34rpx;
					}
					.money-text{
						margin-left: 14rpx;
					}
				}
			}
		}
	}
	.container-main{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: absolute;
		top:450rpx;
		width: 100%;
	}
	.filepicker{
		margin-top: 10rpx;
	}
	
	.item-bottom{
		// position: absolute;
		// top: 260rpx;
		overflow: hidden;
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.item-bottom-inner-header{
		padding-left: 40rpx;
		padding-top: 50rpx;
		display: flex;
		flex-direction: column;
		.title-text{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.input-money-header{
		display: flex;
		align-items: center;
		margin-top: 60rpx;
		margin-right: 30rpx;
		height: 70rpx;
		font-size: 26rpx;
		flex:1;
		border-bottom:2rpx solid  #EEEEEE;
		text{
			font-size: 48rpx;
			font-weight: bold;
			color: #333333;
		}
		input{
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}
	.item-bottom-inner-center{
		width: 100%;
		padding: 60rpx 40rpx 0 40rpx;
		.pay{
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
		}
		.title-text{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			display:block;
			padding-bottom: 42rpx;
		}
		.rgmlist{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.pay-method{
			display: flex;
			align-items: center;
			text{
				margin-left: 26rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.tips3{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;
			border-bottom:solid 2rpx #EEEEEE;
			height: 60rpx;
		}
	}
	.btn{
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		button{
			color: #FFFFFF;
			background: linear-gradient(90deg, #3EA6FD, #2269FB);
			border-radius: 45rpx;
			width: 90%;
		}
		text{
			font-size: 22rpx;
			color: #999999;
			margin: 0 86rpx;
		}
		
	}
	.item-footer{
		padding: 0rpx 40rpx;
		.item-transfer{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			background: #FFFFFF;
			margin-bottom:20rpx;		
			border-radius: 10rpx;
			text{			
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}
			.uni-input{
				height: 70rpx;
				font-size: 28rpx;
				flex:1;
				margin-left: 36rpx;
				border-bottom:2rpx solid  #EEEEEE;
			}
		}
		.item-transfer-bottom{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			background: #FFFFFF;	
			border-radius: 10rpx;
			margin-bottom: 300rpx;
			.text{
				display: flex;
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				height: 60rpx;
				width: 100%;
				text:last-child{
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.upload-img{
				display: block;
				margin-top: 20rpx;
			}
		}
		.transfer-tips{
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #CCCCCC;
		}
	}
</style>
