<template>
	<view class="release">
		<view class="release-hd">
			<view class="b">提现金额</view>
			<view class="a">
				<image class="money" :src="staticUrl('/static/money.png')"></image>
				<input v-model="money" placeholder-style="font-size: 30rpx;" type="number" placeholder="请输入提现金额" />
			</view>
			<view class="c">当前可提现金额{{money1}}元，<text @click="toAll()">全部提现</text></view>
		</view>
		<view class="release-bd">
			<view class="a">提现至</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
			   <view class="way" v-if="index < 0">请选择提现方式</view>
			   <view class="way1" v-else>{{array[index]}}</view>
			</picker>
		</view>
		<view class="release-info" v-if="index >= 0">
			<view class="items" v-if="index == 0 || index == 1">
				<view class="a">收款码</view>
				<view class="b">
					<view class="pic" @click="uploadImg()">
						<image v-if="qr_code1" class="img" :src="qr_code1"></image>
						<image v-else class="img" :src="staticUrl('/static/release-upload.png')"></image>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="a">真实姓名</view>
				<view class="b">
					<input type="text" v-model="real_name" placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="item" v-if="index == 2">
				<view class="a">银行卡号</view>
				<view class="b">
					<input type="number" v-model="account" placeholder="请输入银行卡号" />
				</view>
			</view>
			<view class="item" v-if="index == 2">
				<view class="a">开户行</view>
				<view class="b">
					<input type="text" v-model="bank" placeholder="请输入开户行" />
				</view>
			</view>
		</view>
		<view class="release-fd">
			<view class="btn" @click="toSubmit()">确认提现</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				account: "",
				bank: "",
				real_name: "",
				qr_code: "",
				qr_code1: "",
				index: -1,
				array: ['支付宝','微信','银行卡'],
				userInfo: {},
				money: "",
				money1: 0
			};
		},
		onReady() {
			this.getUserInfo();
			
		},
		methods: {
			//获取用户信息
			async getUserInfo() {
				const { code, data, msg } = await this.$api.loginInfo({})
				if (code == 200) {
					this.userInfo = data;
					this.money1 = Number(this.userInfo.balance)
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//申请提现
			async toSubmit() {
				if(this.money <= 0){
					uni.showToast({
						icon: "none",
						title: "提现金额大于0.01以上"
					})
					return ;
				}
				if(this.money > this.money1){
					this.money = this.money1
					return ;
				}
				if(this.index < 0){
					uni.showToast({
						icon: "none",
						title: "请选择提现方式"
					})
					return ;
				}else if(this.index == 0 || this.index == 1){
					if(!this.qr_code){
						uni.showToast({
							icon: "none",
							title: "请上传收款码"
						})
						return 
					}
					if(!this.real_name){
						uni.showToast({
							icon: "none",
							title: "请输入真实姓名"
						})
						return 
					}
				}else if(this.index == 2){
					if(!this.real_name){
						uni.showToast({
							icon: "none",
							title: "请输入真实姓名"
						})
						return 
					}
					if(!this.account){
						uni.showToast({
							icon: "none",
							title: "请输入银行卡号"
						})
						return 
					}
					if(!this.bank){
						uni.showToast({
							icon: "none",
							title: "请输入开户行"
						})
						return 
					}
				}
				const { code, msg } = await this.$api.applyWithdrawal({
					type: Number(this.index)+1,
					qr_code: this.qr_code?this.qr_code:"",
					real_name: this.real_name?this.real_name:"",
					bank: this.bank?this.bank:"",
					account: this.account?this.account:"",
					money: this.money?this.money:""
				});
				if(code == 200){
					uni.showToast({
						title: "提交成功"
					})
					this.bank = "";
					this.account = "";
					this.real_name = "";
					this.qr_code = "";
					this.money = "";
					this.qr_code1 = ""
					this.getUserInfo();
				}
			},
			//上传图片
			uploadImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						console.log(res.tempFilePaths[0])
						uni.uploadFile({
							name: 'file',
							header: {
								userToken: uni.getStorageSync('userToken')
							},
							url: this.$baseUrl+'api/upload',
							filePath: res.tempFilePaths[0],
							success: (upRes) => {
								let end = JSON.parse(upRes.data)
								that.qr_code = end.data.path
								that.qr_code1 = end.data.url
							},
							fail: (err) => {
								console.log("toUpload err",err)
								console.log(err)
							}
						});
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			toAll() {
				this.money = this.money1;
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			tabItem(i){
				this.selectIndex = i
			}
		}
	}
</script>

<style lang="scss" scoped>
.release {
	width: 100%;
	padding: 25rpx 25rpx 200rpx;
	overflow: hidden;
	box-sizing: border-box;
	&-hd{
		padding: 30rpx 40rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 20rpx;
		.b{
			overflow: hidden;
			font-size: 32rpx;
			font-weight: 400;
			color: #222222;
			margin-bottom: 30rpx;
		}
		.a{
			width: 100%;
			display: flex;
			align-items: baseline;
			justify-content: flex-start;
			padding: 30rpx 0;
			border-bottom: 1px solid #CCCCCC;
			.money{
				width: 35rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}
			input{
				font-size: 60rpx;
				font-weight: 400;
				color: #222222;
				height: 60rpx;
				line-height: 60rpx;
				margin-left: 20rpx;
				&.box{
					font-size: 30rpx;
				}
			}
		}
		.c{
			padding: 20rpx 0 0;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 50rpx;
			text{
				color: #2080F9;
			}
		}
	}
	&-bd{
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		box-sizing: border-box;
		.a{
			font-size: 30rpx;
			font-weight: 400;
			color: #222222;
		}
		picker{
			flex: 1;
			text-align: right;
			.way{
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				padding-right: 40rpx;
				position: relative;
				&::after{
					content: "";
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #999999;
					border-top: 1px solid #999;
					transform: rotate(-135deg);
					position: absolute;
					right: 0;
					top: 5rpx;
					z-index: 2;
				}
			}
			.way1{
				font-size: 30rpx;
				font-weight: 400;
				color: #212121;
				padding-right: 40rpx;
				position: relative;
				&::after{
					content: "";
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #999999;
					border-top: 1px solid #999;
					transform: rotate(-135deg);
					position: absolute;
					right: 0;
					top: 5rpx;
					z-index: 2;
				}
			}
		}
	}
	&-fd{
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #f6f6f6;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		.btn{
			width: 320rpx;
			height: 98rpx;
			line-height: 98rpx;
			background: linear-gradient(-90deg, #3399EA, #38BCFF);
			border-radius: 98rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
		}
	}
	&-info{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.items{
			padding: 20rpx 0;
			overflow: hidden;
			.a{
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 20rpx;
			}
			.b{
				image{
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-top: 1px solid #f6f6f6;
			.a{
				font-size: 28rpx;
				color: #222222;
			}
			.b{
				flex: 1;
				margin-left: 20rpx;
				input{
					font-size: 28rpx;
					color: #222222;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}
	}
}
</style>