<template>
	<view style="background: #f8f8f9;height: 100vh;">
		<view class="chooseAccountWrap" @click="bindAcount">
			<text>请选择提现账户</text>
			<view class="chooseRight" :class="{active:param.platform != ''}">
				{{param.platform == 'wechat' ? '微信' : param.platform == 'alipay' ? '支付宝' : '去选择'}}
				<image src="../../../static/image/right_icon.png" mode=""></image>
			</view>
		</view>
		<view class="chooseAccountWrap" v-if="param.platform == 'alipay'">
			<text>姓名</text>
			<view class="chooseRight" :class="{active:param.alipay_name != ''}">
				<input type="text" v-model="param.alipay_name" placeholder="请输入姓名" placeholder-class="inpPh"/>
			</view>
		</view>
		<view class="chooseAccountWrap" v-if="param.platform == 'alipay'">
			<text>账户</text>
			<view class="chooseRight" :class="{active:param.alipay_account != ''}">
				<input type="text" v-model="param.alipay_account" placeholder="请输入支付宝账号" placeholder-class="inpPh"/>
			</view>
		</view>
		<view class="rechargeWrap">
			<view class="recTxt">
				提现金额
			</view>
			<view class="recInp">
				<view class="recDol">¥</view><input type="number" @input="validateNumber" v-model="param.price" placeholder="请输入提现金额（24小时之内到账）" placeholder-style="color:#c8c9cc"/>
			</view>
			<view class="turnTxt">
				可提现金额{{wallet.gift_tx}}<text @click="param.price = wallet.gift_tx">全部提现</text>
			</view>
		</view>
		<view class="bottomBtnWrap">
			<view class="bottomBtn" @click="turnOut">
				提交申请
			</view>
		</view>
		<view class="payPasWrap" v-if="showPayPas">
			<view class="payPass">
				<view class="title">
					支付密码
				</view>
				<wakary-input type="bottom" @finish="finish"></wakary-input>
				<view class="bottomBtnWrap">
					<view class="bottomBtn" style="background: #ff7f7f;" @click="showPayPas = false">
						取消
					</view>
					<view class="bottomBtn" style="background: #35655f;" @click="confirmTurnOut">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wakaryInput from '@/components/wakary-input.vue'
	export default{
		data(){
			return{
				userInfo:{},
				agreeStatus:false,
				showPayPas:false,
				wallet:{},
				param:{
					pwd:'',
					price:'',
					alipay_account:'',
					alipay_name:'',
					platform:''//平台:wechat=微信支付,alipay=支付宝
				}
			}
		},
		components:{
			wakaryInput
		},
		onShow() {
			this.getData()
		},
		methods:{
			getData(){
				this.$request('/wallet/gift').then((res)=>{
					console.log('礼物收益',res)
					this.wallet = res.data
				})
				//获取用户信息
				this.$request('/user/info').then((res)=>{
					this.userInfo = res.data
				})
			},
			//提现
			turnOut(){
				if(this.param.platform == ''){
					uni.showToast({
						title:'请选择提现账户',
						icon:'none'
					})
					return
				}
				if(this.param.platform == 'alipay' && this.param.alipay_name == ''){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(this.param.platform == 'alipay' && this.param.alipay_account == ''){
					uni.showToast({
						title:'请输入提现账户',
						icon:'none'
					})
					return
				}
				if(this.param.price == ''){
					uni.showToast({
						title:'请输入提现金额',
						icon:'none'
					})
					return
				}
				if(this.param.price > this.wallet.gift_money){
					uni.showToast({
						title:'提现金额高于可提现金额',
						icon:'none'
					})
					return
				}
				if(this.param.price < 1){
					uni.showToast({
						title:'提现金额最少1',
						icon:'none'
					})
					return
				}
				this.showPayPas = true
			},
			confirmTurnOut(){
				if(this.param.pwd == ''){
					uni.showToast({
						title:'请输入支付密码',
						icon:'none'
					})
					return
				}
				this.$request('/wallet/proposed',this.param).then((res)=>{
					console.log('申请礼物收益提现',res)
					if(res.code == 1){
						this.showPayPas = false
						this.getData()
						uni.showToast({
							title:'提交申请成功'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
			},
			validateNumber(e){
				let val = e.detail.value
				val = val.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
				val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
				if (val.indexOf(".") < 0 && val != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					val = parseFloat(val);
				}
				//重新赋值给input
				this.$nextTick(() => {
					this.param.price = val
				})
			},
			finish(e){
				console.log('输入支付密码',e)
				this.param.pwd = e
			},
			//绑定提现账户
			bindAcount(){
				uni.showActionSheet({
					itemList: ['微信','支付宝'],
					success: (res) => {
						// this.param.platform = 'alipay'
						if (res.tapIndex == 1) {
							this.param.platform = 'alipay'
							console.log(1111)
						} else if (res.tapIndex == 0) {
							this.param.platform = 'wechat'
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseAccountWrap{
		border-top: 2rpx solid rgba(25,24,51,0.06);
		background: #fff;
		height: 88rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		.chooseRight{
			display: flex;
			align-items: center;
			color: #c8c9cc;
			image{width: 36rpx;height: 36rpx;}
			input{
				font-size: 28rpx;
				text-align: end;
			}
			.inpPh{
				font-size: 28rpx;
			}
		}
		.chooseRight.active{
			color: #323232;
		}
	}
	.topLine{height: 2rpx;background: rgba(25,24,51,0.06);}
	.rechargeWrap{
		margin-top: 16rpx;
		background: #fff;
		padding: 32rpx 32rpx 24rpx;
		.recTxt{
			font-size: 30rpx;
		}
		.recInp{
			padding-top: 36rpx;
			display: flex;
			height: 44rpx;
			border-bottom: 2rpx solid #f2f3f5;
			input{margin-left: 10rpx;font-size:27rpx;width: 100%;}
			.recDol{
				display: flex;
				align-items: flex-end;
			}
		}
		.turnTxt{
			padding-top: 24rpx;
			font-size: 24rpx;
			color: #646566;
			text{color: #4a8b94;padding-left: 16rpx;}
		}
	}
	.bottomBtnWrap{
		padding: 64rpx 32rpx 0;
		.bottomBtn{
			font-size: 32rpx;
			background: #35655f;
			width: 686rpx;
			height: 88rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
		}
	}
	.payPasWrap{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		.payPass{
			.title{
				font-size: 40rpx;
				text-align: center;
				font-weight: 600;
				padding-top: 40rpx;
			}
			width: 700rpx;
			height: 400rpx;
			border-radius: 30rpx;
			background: #fff;
			.bottomBtnWrap{
				padding-top: 80rpx;
				height: 88rpx;
				bottom: 0;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0rpx -14rpx 44rpx 0rpx rgba(85,123,218,0.08);
				.bottomBtn{
					width: 300rpx;
					height:75rpx;
					background: #35655f;
					text-align: center;
					line-height: 75rpx;
					color: #fff;
					border-radius: 50rpx;
				}
			}
		}
	}
	
</style>