<template>
	<view class="cashStyle" :style="{'height':contentHeight}">
		<view class="cashBox">
			<view class="cashBox_top">
				<text style="font-size: 12px;">账户剩余余额</text>
				<view style="display: flex;flex-direction: row;align-items: flex-end;">
					<text style="font-size: 30px;">{{cash.CommissionWithdrawal}}</text>
					<text style="font-size: 15px;margin-left: 5px;">元</text>	
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<text style="font-size: 12px;">今日剩余提现金额:{{cash.CanRemitMoney==-1?'无限制':cash.CanRemitMoney+'元'}}</text>
					<view style="display: flex;flex-direction: row;" @click="showagreement()">
						<text style="font-size: 12px;margin-right: 2px;">规则</text>
						<u-icon name="warning-o" size="24" color="#ffffff"></u-icon>
					</view>
				</view>
				<!-- <Text style='font-size: 18px;margin-top: 10px;'>账户剩余余额：{{cash.CommissionWithdrawal}}元</Text>
				<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>今日剩余提现金额:{{cash.CanRemitMoney==-1?'不限':cash.CanRemitMoney+'元'}}</Text>
				<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>最少提现额度:{{cash.MinimumWithdrawalLimit}}元</Text>
				<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>手续费:{{cash.WithdrawFee}}%</Text> -->
				
			</view>
			<view class="tixian" style="margin-top: 10px;">
				<text>提现金额</text>
			</view>
			<view class="tixian" style="background: #F7F5F5;padding: 0 20px;">
				<view style='font-size: 12px;color: #FF3F47;display: flex;flex-direction: row;align-items: center;'>￥
					<Text style='font-size: 18px;color:#000000;margin-left: 5px;' v-if='cash.IsWithdrawAll == 1'>{{cash.CommissionWithdrawal}}</Text> 
					<input type="text" v-model="msg.AppliedMoney"  v-if='cash.IsWithdrawAll != 1' @input='liedMoney' style="margin-left: 5px;color:#000000 ;font-size: 18px"/>
				</view>
			</view>
			<Text style='font-size: 14px;color:#333 ;margin: 10px 0;display: inline-block;width: 94%;'>手续费扣除:{{msg.Fee}}元</Text>
			<view class="txmode">
				<Text>提现方式</Text>
				<view @click="show=true" style="width: 200px;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
					<Text>{{txmode}}</Text>
					<u-icon name="arrow" color='#9F9F9F'></u-icon>
				</view>
				
			</view>
			
			<view class='inputbox' v-if='txmode!="" && (msg.WithdrawalWay==2 || msg.WithdrawalWay==3 || msg.WithdrawalWay==4)'>
				<view class="inputItem">
					<!-- <Text v-if='msg.WithdrawalWay==1'>账户名称</Text> -->
					<Text v-if='msg.WithdrawalWay==2'>微信名称</Text>
					<Text v-if='msg.WithdrawalWay==3'>支付宝名称</Text>
					<Text v-if='msg.WithdrawalWay==4'>账户名称</Text>
					<!-- <Text v-if='msg.WithdrawalWay==5'>账户名称</Text> -->
					<input class="uni-input inputM" v-model="msg.AccountName" />
				</view>
				<view class="inputItem">
					<!-- <Text v-if='msg.WithdrawalWay==1'>账户名称</Text> -->
					<Text v-if='msg.WithdrawalWay==2'>微信账号</Text>
					<Text v-if='msg.WithdrawalWay==3'>支付宝账号</Text>
					<Text v-if='msg.WithdrawalWay==4'>账户号</Text>
					<!-- <Text v-if='msg.WithdrawalWay==5'>账户名称</Text> -->
					<input class="uni-input inputM" v-model="msg.AccountNumber" />
				</view>
				<view class="inputItem" v-if="msg.WithdrawalWay==4">
					<Text>银行名称</Text>
					<input class="uni-input inputM" v-model="msg.BankName" />
				</view>
			</view>
			
			
			
			
			<View class='getapply' :style="{background:mainColor}" v-if='prohibit==false' @click='getapply'>
				<Text>提交申请</Text>
			</View>
			<View class='getapply' style="background:#999999" v-if='prohibit==true' >
				<Text>提交申请</Text>
			</View>
			
		</view>
		<template>
			<u-popup v-model="show" 
					mode="bottom"
					border-radius="16"
					>
				<view class="popupBox">
					<view class="popup_top">
						<view></view>
						<Text>提现方式</Text>
						<u-icon name="cross" color='#9F9F9F' @click='show=false' size="40"></u-icon>
					</view>
					<view class="txtype">
						<view class="typeitem" v-for="(item, index) in list" :key="index" >
								<Text>{{item.Name}}</Text>
								<u-radio-group  v-model="value">
									<u-radio 
										v-model = 'item.checked'
										:active-color="mainColor"
										shape="circle"
										:name="item.Name"
										@change="radioChange(item)" 
									>
									</u-radio>
								</u-radio-group>
							</view>
					</view>
				</view>
			</u-popup>
			<view class="agreementbox" v-if='isshowagreement==true'></view>
			<view class="agreementbox_t" v-if='isshowagreement==true'>
				<view class="agreement_b">
					<Text style='height: 40px;line-height: 40px;'>规则</Text>
					
					<view style="width: 100%;height: 760rpx;padding: 20rpx;display: flex;flex-direction: column;">
						<text style="font-size: 12px;">今日剩余提现金额:{{cash.CanRemitMoney==-1?'无限制':cash.CanRemitMoney+'元'}}</text>
						<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>最少提现额度:{{cash.MinimumWithdrawalLimit}}元</Text>
						<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>手续费:{{cash.WithdrawFee}}%</Text> 
					</view>
					<view class="agreement_bottom" :style="{background:mainColor}" @click="read">
						<Text style='color: #fff;'>确定</Text>
					</view>
				</view>
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "提现明细",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				cash:{},
				money:0,
				isshowagreement:false,
				txmode:'',
				show:false,
				show2:false,
				list: [
					
						{
							Name: '微信零钱',
							checked: false,
						},
						
					],
				value:'',
				msg:{
					AppliedMoney:'',
					Fee:0,
					RemitMoney:0,
					WithdrawalWay:'',
					AccountName:'',
					AccountNumber:'',
					BankName:'',
					
				},
				prohibit:false,
			}
		},
		onLoad(option){
			
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.init()
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = wx.getStorageSync("basedata")
			   ? wx.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			init(){
				uni.showNavigationBarLoading();
				this.request2(
					{
						url: '/api/AppletUser/GetUserDistrbutorWithdrawDepositBalance',
						data: {}
					},
							
				  (res) => {
					uni.hideNavigationBarLoading()
					this.cash = res.data;
					let WayList = res.data.WithdrawWayList;
					WayList.forEach((x)=>{
						x.checked = false
					})
					this.list = WayList
					this.msg.AppliedMoney = Number(this.cash.CommissionWithdrawal)
					this.msg.Fee =   (Number(this.cash.WithdrawFee*0.01*this.msg.AppliedMoney)).toFixed(2);
				  }
				);
			},
			allmoney(){
				// this.msg.AppliedMoney = Number(this.cash.CommissionWithdrawal) 
				// this.msg.Fee =   (Number(this.cash.WithdrawFee*0.01*this.msg.AppliedMoney)).toFixed(2);
			},
			liedMoney(val){
				this.msg.AppliedMoney = Number(val.target.value) 
				this.msg.Fee =   (Number(this.cash.WithdrawFee*0.01*this.msg.AppliedMoney)).toFixed(2);
			},
			radioChange(item){
				this.txmode = item.Name;
				this.msg.WithdrawalWay = item.Id;
				this.msg.AccountName = '';
				this.msg.AccountNumber = '';
				this.msg.BankName = '';
				
				this.show=false
			},
			showagreement(){
				this.isshowagreement = true
			},
			read(){
				this.isshowagreement = false
			},
			getapply(){
				this.prohibit = true;
				let that = this
				uni.requestSubscribeMessage({
				  tmplIds: that.cash.template_message_list,
				  complete (res) { 
					  if(that.msg.AppliedMoney<0){
					  	uni.showToast({
					  		title: "请输入提现金额",
					  		icon: "none"
						  });
						that.prohibit =false
					  	return false
					  }
					  if(that.txmode==''){
					  	uni.showToast({
					  		title: "请选择提现方式",
					  		icon: "none"
						  });
						that.prohibit =false
					  	return false
					  }
					  if(that.msg.WithdrawalWay==2|| that.msg.WithdrawalWay==3 || that.msg.WithdrawalWay==4){
					  	if(that.msg.AccountName==''){
					  		uni.showToast({
					  			title: "账户名称不能为空",
					  			icon: "none"
							  });
							  that.prohibit =false
					  		return false
					  	}
					  	if(that.msg.AccountNumber==''){
					  		uni.showToast({
					  			title: "账户号不能为空",
					  			icon: "none"
							  });
							  that.prohibit =false
					  		return false
					  	}
					  	if(that.msg.BankName=='' && that.msg.WithdrawalWay==4){
					  		uni.showToast({
					  			title: "银行名称不能为空",
					  			icon: "none"
							  });
							  that.prohibit =false
					  		return false
					  	}
					  }
					  	
					  if(that.cash.MinimumWithdrawalLimit!=-1){
					  	if(that.msg.AppliedMoney<that.cash.MinimumWithdrawalLimit){
					  		uni.showToast({
					  			title: "提现金额大于等于"+that.cash.MinimumWithdrawalLimit,
					  			icon: "none"
							  });
							  that.prohibit =false
					  		return false
					  	}
					  }
					  if(that.msg.AppliedMoney>that.cash.CommissionWithdrawal){
					  	uni.showToast({
					  		title: '余额不足',
					  		icon: "none"
						  });
						  that.prohibit =false
					  	return false
					  }
					  
					  that.msg.Fee =   Number(that.msg.Fee);
					  that.msg.RemitMoney = that.msg.AppliedMoney - that.msg.Fee; //最终提现要减去 手续费
					  uni.showLoading({
					  	title:'加载中',
					  	icon:'none'
					  })
					  
					  that.request2(
					  	{
					  		url: '/api/AppletUser/SetUserDistrbutorWithdrawDeposit',
					  		data: that.msg
					  	},
					    (res) => {
							that.prohibit = false
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: "none"
							});
					  	that.init()
					  	uni.navigateTo({
					  		url: '/pages/cash-detail/cash-detail'
					  	});
					    },
						(err)=>{
							that.prohibit = false
						}
					  );
				  }
				})
				
				
			}
		}
	}
</script>

<style>
.cashStyle{
	background: #FFFFFF;
	
}
.cashStyle .cashBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cashStyle .cashBox .cashBox_top{
	width: 94%;
	height: 130px;
	display: flex;
	flex-direction: column;
	background-image: url(../../../static/images/shareTop.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding:20px;
	color: #FFFFFF;
	border-radius: 6px;
	justify-content: space-between;
	
}
.cashStyle .rule{
	width: 40px;
	height: 24px;
	border-radius: 12px;
	font-size: 12px;
	border:1px solid #ff4544;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	
}
.cashStyle .tixian{
	width: 94%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #000000;
	font-weight: 500;
	font-size: 14px;
	
}
.cashStyle .txmode{
	width: 100%;
	height: 70px;
	padding:0 15px;
	background: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	/* margin-top: 20px; */
}
.cashStyle .getapply{
	width: 94%;
	height: 45px;
	border-radius: 22.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-top: 20px;
}

.cashStyle .popupBox{
	width: 100%;
	padding-bottom: 15px;
}
.popupBox .popup_top{
	width: 100%;
	height: 45px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	
}
.popupBox .txtype{
	
}
.cashStyle .typeitem{
	padding: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-top:1px solid #f5f5f5
}
.cashStyle .inputbox{
	width: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
	padding:0 15px ;
}
.cashStyle .inputItem{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid #f5f5f5;
}
.cashStyle .inputM{
	text-align: right;
}
.cashStyle .agreementbox{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #333333;
	opacity: 0.3;
	z-index: 888;
}
.cashStyle .agreementbox_t{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cashStyle .agreementbox_t .agreement_b{
	width:80% ;
	border-radius: 10px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.cashStyle .agreementbox_t .agreement_bottom{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
