<template>
	<view class="content">
		<!-- <uni-notice-bar single="true" text="实际到账98%"></uni-notice-bar> -->
		<view class="content-money">
			<view class="flex ">
				<view class="buttom">
					<view class="icon">{{ money }}</view>
					<text class="text">可提现佣金</text>
				</view>
			</view>
		</view>

		<view class="row-box">
			<view class="title">提现金额</view>
			<view class="row">
				<text class="tit">￥</text>
				<input class="input" type="number" v-model="withdrawal" placeholder="请输入提现金额"
					placeholder-class="placeholder" />
				<view class="buttom" @click="withdrawal = money">全部提现</view>
			</view>
		</view>
		<template v-if="auth != 1">
			<view class="row b-b">
				<text class="tit">银行卡号</text>
				<input class="input" type="text" v-model="bankInfo.account" placeholder="请输入银行卡号"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="bankInfo.full_name" placeholder="请输入姓名"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">所属银行</text>
				<input class="input" type="text" v-model="bankInfo.bank" placeholder="请输入所属银行"
					placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">所属支行</text>
				<input class="input" type="text" v-model="bankInfo.subbranch" placeholder="请输入所属支行"
					placeholder-class="placeholder" />
			</view>
		</template>
		<button class="add-btn up" @click="confirm">提交申请</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				auth: 1,
				loading: false,
				bankInfo: {
					account: '',
					full_name: '',
					bank: '',
					subbranch: ''
				},
				weixin_no: '',
				type: 'bank', //提现方式
				money: '0.00', //可提现金额
				freeze: '0.0', //冻结金额
				withdrawal: '', //提现金额
				minPrice: '', //最少提现金额
				aliData: {},
				weixin: {},
				alipay_code: '',
				alipay_name: '',
				bank_code: '',
				bank_people: '',
				bank_name: '',
				bank_belonging: '',
				jftype: 0,
			};
		},
		onLoad(options) {
			this.loadData();
			this.getSh()
		},
		onShow() {
			// this.dataUp()
		},
		methods: {
			async getSh() {
				let res = await this.$myHttp.get({
					url: this.$myHttp.urlMap.sh,
					data: {},
					needLogin: false,
				})
				if (res.code == 1) {
					// this.navList = res.data.data
					console.log(res)
					this.auth = res.data.auth
					// #ifdef H5
					this.auth = 0
					// #endif
				}
			},
			dataUp() {
				this.loadData();
			},
			// 加载余额信息
			async loadData() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.userInfo,
					needLogin: true
				})
				if (res.code == 1) {
					this.user_info = res.data
					this.money = res.data.brokerage
				}
				this.bankInfo = uni.getStorageSync('bankInfo') || {
					account: '',
					full_name: '',
					bank: '',
					subbranch: ''
				}
			},
			// 跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 切换选中对象
			tabRadio(e) {
				this.type = e.detail.value;
			},
			// 提交
			async confirm() {
				let that = this
				//
				// api/yexam/user/cash
				if(!this.withdrawal) {
					return uni.showToast({
						icon: 'none',
						title: '请输入提现金额'
					});
				}
				if(!this.bankInfo.account) {
					return uni.showToast({
						icon: 'none',
						title: '请输入银行卡号'
					});
				}
				if(!this.bankInfo.full_name) {
					return uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					});
				}
				if(!this.bankInfo.bank) {
					return uni.showToast({
						icon: 'none',
						title: '请输入所属银行'
					});
				}
				if(!this.bankInfo.subbranch) {
					return uni.showToast({
						icon: 'none',
						title: '请输入所属支行'
					});
				}
				
				if(that.loading) {
					return
				}
				that.loading = true
				let res = await this.$myHttp.post({
					url: 'api/yexam/user/cash',
					needLogin: true,
					data: {
						account: that.bankInfo.account,
						full_name: that.bankInfo.full_name,
						bank: that.bankInfo.bank,
						subbranch: that.bankInfo.subbranch,
						number: that.withdrawal
					}
				})
				if (res.code == 1) {
					// this.user_info = res.data
					// this.money = res.data.brokerage
					that.withdrawal = 0
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					});
					uni.setStorageSync('bankInfo',that.bankInfo)
					that.dataUp()
					that.loading = false
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content-money {
		padding: 30rpx 0;
		background: #ffffff;
	}

	.flex {
		background-color: #ffffff;
		text-align: center;
		margin: 0 30rpx;


		.buttom {
			font-size: 32rpx;
		}

		.interval {
			width: 2px;
			height: 60rpx;
			background-color: #eeeeee;
		}

		.icon {
			background-size: 100%;
			font-size: 42rpx;
			color: #000;
			font-weight: bold;
			background-repeat: no-repeat;
			background-position: center;
		}

		.text {
			color: #000;
		}
	}

	.row-box {
		margin-top: 30rpx;
		padding: 20rpx 30rpx;
		background: #fff;

		.title {
			font-size: 26rpx;
			color: #000;
		}

		.row {
			display: flex;
			align-items: center;
			position: relative;
			height: 80rpx;

			.tit {
				flex-shrink: 0;
				width: 40rpx;
				font-size: 30rpx;
				color: #000;
			}

			.input {
				flex: 1;
				font-size: 30rpx;
				color: #000;
			}

			.iconlocation {
				font-size: 36rpx;
				color: #000;
			}

			.buttom {
				color: #3db4f5;
				font-size: 24rpx;
			}
		}
	}

	.add-btn {
		&.modified {
			// color: #ffffff;
			border: 1px solid #3db4f5;
			// background-color: #fff;
			color: #fff;
			background-color: #fff;
		}

		&.up {
			background: #3db4f5;
			color: #fff;
		}

		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
	}


	/deep/ .uni-radio-input {
		width: 45rpx;
		height: 45rpx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 250upx;
			font-size: 30upx;
			color: #000;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: #000;
		}

		.iconlocation {
			font-size: 36upx;
			color: #000;
		}
	}

	.tip {
		padding: 20rpx;
		color: #fd3b39;
	}
</style>