<template>
	<view>
		<u-navbar title="充值" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
			<view class="cont">
				<view class="jglist_box">
					<view class="jgli" v-for="(item,index) in jglist" :key="index" :class="jgindex==index? 'act1':''" @click="cgIdx(index,item)">
						{{item}}
					</view>
				</view>
				<view class="ipt_box" >
					<view class="ipt">
						<u-input v-model="value" :type="type" :border="border"  placeholder='自定义' placeholder-style="font-size: 32rpx;color: #A6A6A6;" @input="ckinpt()"/>
					</view>
					
					<view class="txt" style="margin-left: auto;margin-right: 20rpx;">
						元
					</view>
				</view>
				<view class="info_card">
					<view class="info_li">
						<view class="text">充值金额：{{price}}元</view>
						<view class="txt">
							
						</view>
					</view>
					<view class="info_li">
						<view class="text">到账电量：{{Quantity}}度</view>
						<view class="txt">
							(单价{{eleprice}}元/度)
						</view>
					</view>
					<view class="info_li">
						<view class="text">实际付款：{{realprice}}元</view>
						<view class="txt" @click="showtip=!showtip">
							查看明细 <u-icon name="arrow-down" v-show="showtip"></u-icon>  <u-icon name="arrow-up" v-show="showtip==false"></u-icon>
						</view>
					</view>
					<view class="tip" v-if="showtip">
						<view class="tip_txt">
							平台服务费：{{xsf}}
						</view>
					</view>
				</view>
				<view class="cztip">
					<view class="cztip_li">
						充值须知
						
					</view>
					<view class="cztip_li">
						
						1.充值时与蓝牙设备保持三米以内
						
					</view>
					<view class="cztip_li">
						
						2.支付成功后，需点击“完成”按钮，请勿直接退出
						
					</view>
					<view class="cztip_li">
						
						3.若发生充值异常，可以在“我的”，“常见问题”中排查
					</view>
				</view>
				<view class="pat_type">
					<view class="type_li">
						<view class="left">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uLRBM81zYsXyVbk9ImT1" mode="" class="payimg"></image>
							<view class="txt">
								微信支付
							</view>
						</view>
						<view class="right">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uaUP6IjcGUln23kZJJK3" mode=""></image>
						</view>
					</view>
				
					
				</view>
				<view class="patBtn" @click="payBtn()">
					立即支付
				</view>
				<u-mask :show="tipshow" @click="tipshow = false" z-index='10'>
						
				</u-mask>
				<view class="tip_box" v-if="tipshow">
					<view class="cont">
						<view class="tit">温馨提示</view>
						<view class="texts">
							充值金额不低于10元
						</view>
						<view class="tip_btn" @click="tipshow = false">
							好的
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				jgindex:0,
				jglist:[
					'50元',
					'100元',
					'150元',
					'200元',
					'300元',
					'500元',
				],
				value: '',
				type: 'text',
				border: false,
				showtip:false,
				tipshow:false,
				xsf:0,
				deviceInfo: {},
				eleprice:0,//单价
				Quantity:0,//电量
				realprice:0,//实际付款
				price:0,//充值今日/
				arrivalAmount:0,
				tenantBearServiceFee:false,
				deviceId:0,
				channelId:0,
				orderid:'',
				realprice:0,
				payinfo:{}
			}
		},
		onLoad(options) {
			this.getsxf()
			// this.getdevice()
			this.eleprice=options.price
			this.tenantBearServiceFee=options.tenantBearServiceFee
			this.deviceId=options.deviceId
			setTimeout(()=>{
				this.checkPrice('50')
			},300)
		
		},
		methods: {
			
			payBtns() {
				let payinfo=this.payinfo
			   uni.requestPayment({
			           provider: 'wxpay',
			           timeStamp: payinfo.timeStamp,
			           nonceStr: payinfo.nonceStr,
			           package: payinfo.packageVal,
			           signType: payinfo.signType,
			           paySign: payinfo.paySign,
			           success(res) {
			               // 支付成功逻辑
			               uni.navigateBack({
			                              delta: 1 // 返回上级页面
			                          });
			           },
			           fail(err) {
			               // 支付失败逻辑
			               uni.showToast({
			                 title: '支付失败',
			                 icon: 'none',
			                 duration: 2000
			               });
			           }
			       });
			},
			tobd(){
				uni.navigateTo({
					url:''
				})
			},
			cgIdx(idx,item){
				this.jgindex=idx
				this.checkPrice(item)
			},
		   ckinpt() {
		      this.jgindex = -1;
		      if (this.value !== '') {
		        // 检查是否超过1000元
		        const floatValue = parseFloat(this.value);
		        if (isNaN(floatValue) || floatValue > 1000) {
		          // 如果超过1000元或者不是有效数字，则显示提示消息
		          uni.showToast({
		            title: '请输入有效且不超过1000元的金额',
		            icon: 'none',
		            duration: 2000
		          });
		          this.value = '1000';
		        } else {
		          // 如果没有超过1000元，则检查小数点后三位之后的值
		          const decimalPart = this.value.split('.')[1];
		          if (decimalPart && decimalPart.length > 3) {
		            // 如果小数点后三位之后存在值，则截取小数点后三位之前的部分
		            uni.showToast({
		              title: '金额只能精确到小数点后两位',
		              icon: 'none',
		              duration: 2000
		            });
		            this.value = floatValue.toFixed(3).slice(0, -1);
		          }
		        }
		      } else {
		        // 如果值为空，则设为0
		        this.value = '0';
		      }
		
		      // 调用 checkPrice() 方法
		      this.checkPrice(this.value);
		    },
		
			checkPrice(item) {
				const price = parseFloat(item.replace('元', ''));
				if (this.tenantBearServiceFee==false) {
					
					this.price = price;
					this.arrivalAmount=price
					this.xsf =price*this.fl
					this.realprice = parseFloat((this.price + this.xsf).toFixed(2));
					this.Quantity = price/this.eleprice
				} else {
					this.price = price;
					this.xsf =price*this.fl
					this.realprice = parseFloat((this.price).toFixed(2));
					this.Quantity = price/this.eleprice
					this.arrivalAmount=price-this.xsf 
				}
			},
			getsxf(){
				this.$u.get("/app/channel/recharge/enabledList").then((res) => {
					if (res.code == 200) {
						this.fl=res.data[0].serviceRate/100
						this.channelId=res.data[0].channelId
						console.log(this.fl);
					}
				});
			},
			getdevice() {
				this.$u.get("/app/device/tenant").then((res) => {
					this.deviceInfo = res.rows[0]
						
					
					
				});
			},
			payBtn(){
				let data ={
					deviceId:this.deviceId,
					deviceAmount:this.price,
					arrivalAmount:this.arrivalAmount,
					money:this.realprice,
					serviceCharge:this.xsf,
					unitPrice:this.eleprice,
					payType:this.channelId
					
				}
				// if(this.price<=9.99999){
				// 	this.tipshow=true
				// }else{
				// 	this.$u.post("/app/bill/recharge",data).then((res) => {
				// 		if (res.code == 200) {
							
				// 		}
				// 	});
				// }
				this.$u.post("/app/bill/recharge",data).then((res) => {
					if (res.code == 200) {
						console.log(res,'resres');
						this. orderid=res.data
						this.getpayinfo()
						// uni.navigateTo({
						// 	url:'/page_user/wxpay?orderid='+orderid+'&price='+this.realprice
						// })
					}else{
						uni.showToast({
						  title:res.msg,
						  icon: 'none',
						  duration: 2000
						});
					}
				});
				
			},
			getpayinfo(){
				let id =this.orderid
				this.$u.get("/app/pay/wx/"+id).then((res) => {
					if (res.code == 200) {
						console.log(res,'resres');
						this.payinfo=res.data
						this.payBtns()
					}
				});
			},
		}
	}
</script>

<style lang="scss" >
	page{
		background: #F7FAFE;
	}
.cont{
	width: 648rpx;
	margin: 16rpx auto 0;
	display: flex;
	// justify-content: center;
	flex-wrap: wrap;
	.jglist_box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.jgli:nth-child(3n) {
		    margin-right: 0;
		}
		.jgli{
			margin-top: 40rpx;
			margin-right: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 188rpx;
			height: 122rpx;
			background:  #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 20rpx;
			
			font-weight: 400;
			font-size: 32rpx;
			color: #383838;
			
		}
		.act1{
			background: #2A82E4;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}
	.ipt_box{
		width: 420rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #A6A6A6;
		.ipt{
			margin-left: 20rpx;
			margin-right: 10rpx;
			/deep/.u-input__input{
				font-size: 32rpx !important;
				color: #A6A6A6 !important;
			}
		}
		
	}
	.info_card{
		margin-top: 46rpx;
		padding:20rpx 28rpx 40rpx 36rpx ;
		width: 648rpx;
		// height: 266rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
		display: flex;
		flex-wrap: wrap;
		.info_li{
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #383838;
			}
			.txt{
				font-weight: 400;
				font-size: 20rpx;
				color: #383838;
			}
		}
		.tip{
			padding-top: 15rpx;
			display: flex;
			align-items: center;
			width: 576rpx;
			height: 70rpx;
			background-image: url('https://api.ccttiot.com/smartmeter/img/static/uGcjoIs6xOPFWN6mJT8l');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.tip_txt{
			
				margin-left: 38rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #3D3D3D;
			}
		}
	}
	.cztip{
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.cztip_li{
			width: 100%;
			font-weight: 400;
			font-size: 20rpx;
			color: #FF8D1A;
			line-height: 36rpx;
		}
	}
	.patBtn{
		position: fixed;
		bottom: 100rpx;
		left: 80rpx;
		// margin-top: 152rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 590rpx;
		height: 84rpx;
		background: #2A82E4;
		border-radius: 50rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF
	}
	.pat_type{
		display: flex;
		flex-wrap: wrap;
		
		margin: 80rpx auto;
		
		// margin-left: ;
		width: 654rpx;
		background: #FFFFFF;
		border-radius:20rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
		.type_li{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			padding-left: 72rpx;
			padding-right: 46rpx;
			height: 110rpx;
			.left{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				image{
					width: 40rpx;
					height: 34rpx;
				}
			}
			.right{
				margin-left: auto;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.tip_box{
	 display: flex;
	    align-items: center;
	    justify-content: center;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 12;
	    height: 100%;
		.cont{
			display: flex;
			justify-content: center;
			width: 616rpx;
			height: 360rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.tit{
				margin-top: 44rpx;
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 48rpx;
				color: #262B37;
			}
			.texts{
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #262B37;
			}
			.tip_btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 266rpx;
				height: 96rpx;
				background: #2A82E4;
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style>
