<template>
	<view class="page">
		<view class="fixed">
			<u-navbar :custom-back='back' title="提现" :border-bottom="false" :background="background" title-color='#fff'
				title-size='36' height='45' back-icon-color='#fff'></u-navbar>
		</view>
		<view class="backimg">
			<view class="tit">
				账户余额
			</view>
			<view class="price">
				{{formatAmount(AccountInfo.balance)}}
			</view>
		</view>
		<view class="cont_box">
			<view class="cont_tit">
				<view class="tit_line"></view>
				余额提现
			</view>
			<view class="" style="margin: 0 auto;
				margin-top: 38rpx;
				width: 676rpx;color: #ccc;" >
				可提现金额：{{formatAmount(AccountInfo.withdrawalAmount)}}元
			</view>
			<view class="ipt_box">
				<view class="yuan">
					￥
				</view>
				<input type="number" v-model="amount" placeholder="请输入自定义金额" class="input"
					placeholder-style="color:#C7CDD3">
				<view class="ipt_btn" @click="all()">
					全部提现
				</view>
			</view>
			<view class="cont_tit" style="margin-top: 70rpx;">
				<view class="tit_line"></view>
				提现方式
			</view>
			<view class="card_box" v-for="(item,index) in list" :key="index" @click.stop="choose(item)">
				<image :src="item.picture" mode=""></image>
				<view class="txt">
					{{item.name}}提现
				</view>
				<view class="right1" v-if="item.isNeedCode==true&&item.collectionCode==null" @click.stop="upload(item.userChannelId)">
					<view class="txt1">
						未绑定收款码
					</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
				<view class="right2" v-else >
					
					<image class="quen" src="https://lxnapi.ccttiot.com/bike/img/static/utRg4QWBaHX4RO3tgZQW" mode="" v-if="item.userChannelId==checkInfo.userChannelId">
					</image>
					<view class="quen" v-else></view>
				</view>
			</view>
			<view class="tips" v-if="checkInfo.userChannelId">
				<view class="tip_tit">
					提现说明：
				</view>
				<view class="tips_li">
					-提现额度：单笔提现金额最低{{checkInfo.minAmount}}元，最高{{checkInfo.maxAmount}}元
				</view>
				<view class="tips_li">
					-到账时间：3个工作日内
				</view>
				<view class="tips_li">
					-提现手续费：{{checkInfo.withdrawHandlingCharge*100}}%
				</view>
			</view>
			<view class="btn" @click="sub()">
				确定提现
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				amount: 0,
				checkInfo: {},
				AccountInfo:{},
				isThrottled: false,
			}
		},
		onShow() {
			this.getWcList()
			this.getAccountInfo()
		},
		methods: {
			all(){
				this.amount=this.AccountInfo.withdrawalAmount
			},
			formatAmount(amount) {
				return Number(amount).toFixed(2);
			},
			choose(item){
				this.checkInfo=item
			},
			upload(id){
				uni.navigateTo({
					url:'/pages_withdraw/addcode?id='+id
				})
			},
			getAccountInfo(){
				this.$u.get(`appVerify/myAccountInfo`).then((res) => {
					if (res.code === 200) {
						this.AccountInfo=res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			sub() {
				
				if (!this.checkInfo.userChannelId) {
					uni.showToast({
						title: '请选择支付渠道',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.amount<this.checkInfo.minAmount) {
					uni.showToast({
						title: '体现金额小于最低提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.amount>this.checkInfo.maxAmount) {
					uni.showToast({
						title: '体现金额大于最低高提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if(this.checkInfo.collectionCode==null){
					
					uni.showToast({
						title: '请上传收款二维码',
						icon: 'none',
						duration: 1000
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages_store/Operator/addcode?id='+this.checkInfo.userChannelId
						})
					},1100)
				}else{
					if (this.isThrottled) {
						uni.showToast({
							title: '请勿重复点击',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					
					// 设置节流标志位
					this.isThrottled = true;
					
					if (parseFloat(this.amount) > parseFloat(this.AccountInfo.withdrawableAmount)) {
					
						uni.showToast({
							title: '提现金额不能大于可提现金额',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					let data = {
						amount: this.amount,
						
						userWithdrawChannelId:this.checkInfo.userChannelId
					}
					
					this.$u.post('appVerify/admin/withdraw', data).then((res) => {
						if (res.code == 200) {
							this.getAccountInfo()
							this.amount=0
							uni.showToast({
								title: '提现成功',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}).catch(error => {
						console.error("Error fetching area data:", error);
					}).finally(() => {
						// 三秒后解除节流
						setTimeout(() => {
							this.isThrottled = false;
						}, 3000);
					});
				}
			},
			
			getWcList() {
				this.$u.get(`appVerify/getUserWithdrawChannelList`).then((res) => {
					if (res.code === 200) {
						this.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		padding-bottom: 200rpx;
		.cont_box {
			padding: 54rpx 56rpx;
			margin-top: -140rpx;
			width: 750rpx;
			// height: 1198rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0 0;
			.btn{
				position: fixed;
				left: 80rpx;
				bottom: 72rpx;
				// margin-top: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 24rpx;
				width: 590rpx;
				height: 84rpx;
				background: #4297F3;
				filter: blur(0px);
				border-radius: 40rpx;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.tips{
				display: flex;
				flex-wrap: wrap;
				.tip_tit{
					margin-top: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #808080;
				}
				.tips_li{
					width: 100%;
					margin-top: 16rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}
			}
			.card_box {
				margin-top: 30rpx;
				width: 642rpx;
				height: 86rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				border-radius: 20rpx;
				padding: 18rpx 30rpx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				.txt {
					margin-left: 30rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.right1 {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					margin-left: auto;

					.txt1 {
						font-weight: 400;
						font-size: 24rpx;
						color: #F76D6D;
					}

					.icon-xiangyou1 {
						margin-top: 4rpx;
					}
				}

				.right2 {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					margin-left: auto;

					.quen {
						width: 29rpx;
						height: 29rpx;
						border-radius: 50%;
						border: 1rpx solid #ccc;
					}
				}

			}

			.ipt_box {
				margin-top: 42rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				width: 642rpx;
				height: 108rpx;
				background: #F4F4F4;
				border-radius: 20rpx;

				.yuan {
					margin-right: 14rpx;
					font-weight: 600;
					font-size: 52rpx;
					color: #4297F3;
				}

				.ipt_btn {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 56rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #4297F3;
				}

				.input {
					height: 100%;
					width: 400rpx;
				}
			}

			.cont_tit {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;

				.tit_line {
					margin-right: 12rpx;
					width: 8rpx;
					height: 50rpx;
					background: #4297F3;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
		}

		.backimg {
			// position: fixed;
			position: relative;
			width: 750rpx;
			height: 696rpx;

			z-index: -10;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u7b1VqZuiMFIG7twTRaS');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;

			.tit {
				position: absolute;
				left: 84rpx;
				bottom: 284rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.price {
				position: absolute;
				left: 84rpx;
				bottom: 172rpx;
				font-weight: 600;
				font-size: 72rpx;
				color: #FFFFFF;
			}

		}

		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}
	}
</style>