<template>
	<view class="cashStyle" :style="{'height':contentHeight}">
		<view class="cashBox">
			<view class="cashBox_top">
				<Text style='font-size: 18px;margin-top: 10px;'>账户剩余余额：{{cash.CommissionWithdrawal}}元</Text>
				<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>今日剩余提现金额:{{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 style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
					<Text style='font-size: 12px;color:#333 '>今日提现金额无限制</Text>
					<view class="rule" :style="{'border-color':mainColor}" @click="show2=true">
						<Text :style="{'color':mainColor}">规则</Text>
					</view>
				</view> -->
				<view style="width: 100%;height: 1px;background: #f5f5f5;margin: 10px 0;"></view>
				<view class="tixian">
					<view style='display: flex;flex-direction: row;align-items: center;'>
						<Text :style="{'color':mainColor,'font-size':'18px'}">￥</Text>
						<input class="uni-input"  v-model="msg.AppliedMoney" placeholder="请输入提现金额" style="font-size: 16px;margin-left: 5px;"/>
					</view>
					<Text @click='allmoney'>全部</Text>
				</view>
			</view>
			<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}" @click='getapply'>
				<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>
			<u-popup v-model="show2"
					mode="center"
					border-radius="16"
					length="80%"
					>
				<view style="background: #fff;display: flex;flex-direction: column;align-items: center">
					<view style="display: flex;flex-direction: column;align-items: center;padding: 15px;text-align: center;">
						<Text >提示</Text>
						<Text style='margin-top: 10px;'>今日剩余提現金額=平台毎日可提現金額-今日所有用戸提現金額</Text>
					</view>
					<view style="width: 100%;height: 1px;background: #f5f5f5;"></view>
					<view style="width: 100%;height: 45px;display: flex;align-items: center;justify-content: center;" @click="show2=false">
						<Text :style="{'color':mainColor}">我知道了</Text>
					</view>
				</view>
			</u-popup>	
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "提现明细",
				contentHeight:0,
				mainColor:'',
				secondary:'',
				cash:{},
				money:0,
				
				txmode:'',
				show:false,
				show2:false,
				list: [
					
						{
							Name: '微信零钱',
							checked: false,
						},
						
					],
				value:'',
				msg:{
					AppliedMoney:'',
					Fee:0,
					RemitMoney:0,
					WithdrawalWay:'',
					AccountName:'',
					AccountNumber:'',
					BankName:'',
					
				}
			}
		},
		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
					
				  }
				);
			},
			allmoney(){
				this.msg.AppliedMoney = Number(this.cash.CommissionWithdrawal) 
			},
		
			radioChange(item){
				this.txmode = item.Name;
				this.msg.WithdrawalWay = item.Id;
				this.msg.AccountName = '';
				this.msg.AccountNumber = '';
				this.msg.BankName = '';
				
				this.show=false
			},
			getapply(){
				
				if(this.msg.AppliedMoney==''){
					
					uni.showToast({
						title: "请输入提现金额",
						icon: "none"
					});
					return false
				}
				if(this.txmode==''){
					uni.showToast({
						title: "请选择提现方式",
						icon: "none"
					});
					return false
				}
				if(this.msg.WithdrawalWay==2|| this.msg.WithdrawalWay==3 || this.msg.WithdrawalWay==4){
					if(this.msg.AccountName==''){
						uni.showToast({
							title: "账户名称不能为空",
							icon: "none"
						});
						return false
					}
					if(this.msg.AccountNumber==''){
						uni.showToast({
							title: "账户号不能为空",
							icon: "none"
						});
						return false
					}
					if(this.msg.BankName=='' && this.msg.WithdrawalWay==4){
						uni.showToast({
							title: "银行名称不能为空",
							icon: "none"
						});
						return false
					}
				}
				if(this.msg.AppliedMoney<this.cash.MinimumWithdrawalLimit){
					uni.showToast({
						title: "提现金额大于等于"+this.cash.MinimumWithdrawalLimit,
						icon: "none"
					});
					return false
				}
				this.msg.Fee = this.cash.WithdrawFee*0.01*this.msg.AppliedMoney;
				
				uni.showNavigationBarLoading();
				this.request2(
					{
						url: '/api/AppletUser/SetUserDistrbutorWithdrawDeposit',
						data: this.msg
					},
							
				  (res) => {
					uni.hideNavigationBarLoading()
					
					uni.showToast({
						title: res.message,
						icon: "none"
					});
					this.init()
					uni.navigateTo({
						url: '/pages/cash-detail/cash-detail'
					});
				  }
				);
			}
		}
	}
</script>

<style>
.cashStyle{
	background: #f3f4f6;
	
}
.cashStyle .cashBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cashStyle .cashBox .cashBox_top{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 15px;
	background: #fff;
	
}
.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: 100%;
	height: 70px;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.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;
}
</style>
