<template>
</template>

<script>
</script>

<style>
</style>
<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.Commission}}</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>
			</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.IsAllCommission == 1'>{{cash.Commission}}</Text>
					<input type="text" v-model="msg.AppliedMoney" style="color:#000000 ;font-size: 18px;margin-left: 5px;" v-if='cash.IsAllCommission != 1'
					 @input='liedMoney' />
				</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.MinWithdrawal}}元</Text>
						<Text style='font-size: 14px;color:#333 ;margin-top: 10px;'>手续费:{{cash.WithdrawalFree}}%</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/AppletSmallShops/GetSmallShopsWithdrawDepositBalance',
						data: {}
					},
					(res) => {
						uni.hideNavigationBarLoading()
						this.cash = res.data;
						this.cash.Commission = this.cash.Commission ? this.cash.Commission : 0
						let WayList = res.data.WithdrawWayList;
						WayList.forEach((x) => {
							x.checked = false
						})
						this.list = WayList
						this.msg.AppliedMoney = Number(this.cash.Commission)
						this.msg.Fee = (Number(this.cash.WithdrawalFree * 0.01 * this.msg.AppliedMoney)).toFixed(2);
					}
				);
			},
			allmoney() {
				// this.msg.AppliedMoney = Number(this.cash.Commission) 
				// this.msg.Fee =   (Number(this.cash.WithdrawalFree*0.01*this.msg.AppliedMoney)).toFixed(2);
			},
			liedMoney(val) {
				this.msg.AppliedMoney = Number(val.target.value)
				this.msg.Fee = (Number(this.cash.WithdrawalFree * 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() {
				let that = this;
				if (that.msg.AppliedMoney < 0) {
					uni.showToast({
						title: "请输入提现金额",
						icon: "none"
					});
					return false
				}
				if (that.txmode == '') {
					uni.showToast({
						title: "请选择提现方式",
						icon: "none"
					});
					return false
				}
				if (that.msg.WithdrawalWay == 2 || that.msg.WithdrawalWay == 3 || that.msg.WithdrawalWay == 4) {
					if (that.msg.AccountName == '') {
						uni.showToast({
							title: "账户名称不能为空",
							icon: "none"
						});
						return false
					}
					if (that.msg.AccountNumber == '') {
						uni.showToast({
							title: "账户号不能为空",
							icon: "none"
						});
						return false
					}
					if (that.msg.BankName == '' && that.msg.WithdrawalWay == 4) {
						uni.showToast({
							title: "银行名称不能为空",
							icon: "none"
						});
						return false
					}
				}
				if (that.cash.MinWithdrawal != -1) {
					if (that.msg.AppliedMoney < that.cash.MinWithdrawal) {
						uni.showToast({
							title: "提现金额大于等于" + that.cash.MinWithdrawal,
							icon: "none"
						});
						return false
					}
				}
				if (that.msg.AppliedMoney > that.cash.Commission) {
					uni.showToast({
						title: '余额不足',
						icon: "none"
					});
					return false
				}
				uni.requestSubscribeMessage({
					tmplIds: that.cash.template_message_list,
					complete(res) {
						that.msg.Fee = Number(that.msg.Fee);
						that.msg.RemitMoney = that.msg.AppliedMoney - that.msg.Fee; //最终提现要减去 手续费
						uni.showLoading({
							title: '加载中',
							icon: 'none'
						})
						that.prohibit = true; //禁止接口没回来时候的再次操作
						that.request2({
								url: '/api/AppletSmallShops/SetSmallShopsWithdrawDeposit',
								data: that.msg
							},
							(res) => {
								that.prohibit = false
								uni.hideLoading()
								uni.showToast({
									title: res.message,
									icon: "none"
								});
								that.init()
								uni.navigateTo({
									url: '/pages/microShop/wdWithdrawal'
								});
							},
							(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-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20px;
		color: #FFFFFF;
		border-radius: 6px;
		justify-content: space-between;
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/shareTop.png);
	}

	.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;
	}

	.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>
