<template>
	<view class="WithdrawingCoin ">
		<view class="propery">
			<image src="/static/imgs/account-bg.png" mode="aspectFill" class="record-bg" />
			<view class="propery-content">
				<view class="currency">可提现额度</view>
				<view class="balance">{{ balance || '0.00' }}</view>
				<view class="frozen" @click="$Router.push({name: 'withdrawList'})">提现记录</view>
			</view>
		</view>
		<!-- 提现渠道 -->
		<view class="extract-radio">
			<radio-group @change="extractType = $event.detail.value">
				<view class="extract-item" v-for="(item, index) in types" :key="index">
					<label class="radio">
						<radio :value="item.type" color="#8b64fd" :checked="extractType === item.type" /><text>提现到{{item.name}}</text>
					</label>
				</view>
			</radio-group>
		</view>
		<!-- 提现金额 -->
		<view class="withdrawing-content">
			<view class="item">
				<view style="flex: 1;">
					<view class="inputTxt">提现金额</view>
					<input class="input_num" v-model="withdraw_input" @input='inputNum' type="number" placeholder-style="color:#999;font-weight:normal; font-size:34rpx;" placeholder="请输入提现金额" :disabled="balance===0" />
				</view>
				<view class="all" @click="all">全部提现</view>
			</view>
		</view>
		<!-- 银行卡 -->
		<block v-if="extractType === '1'">
			<view class="item-name">
				<view class="cardName" v-if="bank_accounts === 0" @click="$Router.push({name: 'addBank'})">添加银行卡</view>
				<view class="cardName" v-if='bank_accounts > 0' @click="$Router.push({name: 'bankList'})">{{bankInfo.name ? bankInfo.name:'选择银行卡'}}</view>
				<uni-icons type="arrowright" size="16" color="#ddd" />
			</view>
		</block>
		<!-- 支付宝 -->
		<block v-if="extractType === '2'">
			<view class="alipay-form">
				<view class="alipay-inputs">
					<label>支付宝账号</label>
					<input type="text" v-model="alipayUser" placeholder="输入支付宝账号" />
				</view>
				<view class="alipay-inputs">
					<label>支付宝姓名</label>
					<input type="text" v-model="alipayName" placeholder="输入支付宝姓名" />
				</view>
			</view>
		</block>
		<!--  -->
		<view class="btn" @click="actions">申请提现</view>
		<view class="des">预计5- 10个工作日到账 手续费: {{tax === '0'?'免手续费':tax+'%'}}</view>
	</view>
</template>

<script>
	import { withdrawsIndexCreate, withdrawsIndex } from '@/apis/interfaces/withdraws';
	export default {
		data() {
			return {
				types		  : [],
				alipayUser	  : '', // 支付宝账号
				alipayName	  : '', // 支付宝姓名
				balance		  : 0,  // 钱包通证金额
				tax			  : 0,  // 当前手续费
				withdraw_input: '', // 提现通证金额
				extractType	  : '1', // 提现方式
				bank_accounts : 0,
				bankInfo	  : {},
				certification : false,// 认证状态
			};
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			if (uni.getStorageSync('refresh')) {
				this.bankInfo = {}
				this.getInfo()
			}
		},
		methods: {
			// 提现基本信息
			getInfo() {
				withdrawsIndexCreate().then(res => {
					let typesArry = new Array
					for(let key in res.types){
						typesArry.push({
							type: key,
							name: res.types[key]
						})
					}
					this.types   		= typesArry
					this.balance 		= res.balance
					this.tax	 		= res.tax
					this.bank_accounts 	= res.bank_accounts.length
					this.withdraw_input = Number(res.balance)
					this.certification 	= res.certification
					uni.setStorageSync('refresh', false)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			//  输入提现通证金额
			inputNum(e) {
				let number = Number(e.detail.value)
				if (number <= Number(this.balance)) {
					this.total = Number(e.detail.value) * this.cost
				} else {
					this.total = 0
					if (Number(this.balance) === 0) {
						uni.showToast({
							title: '当前不能提现',
							icon: 'none',
							duration: 2000
						});
						this.withdraw_input = 0
					} else {
						uni.showToast({
							title: '最大值能超过' + this.balance + '',
							icon: 'none',
							duration: 2000
						});
						this.withdraw_input = this.balance
					}
				}
			},
			//  点击全部
			all() {
				if (this.balance > 0) {
					this.withdraw_input = this.balance
					this.total = this.balance * this.cost
				} else {
					uni.showToast({
						title: '啥也没有，我也做不到~',
						icon: 'none',
						duration: 2000
					})
					this.withdraw_input = 0
				}
			},
			// 提现
			actions() {
				// 提现前置条件
				if (!this.certification) {
					uni.showModal({
						title: '提示',
						content: '为了保障您的用户权益，未个人认证无法提现红包',
						cancelColor: '#555',
						cancelText: '稍后认证',
						confirmColor: '#8b64fd',
						confirmText: '立即认证',
						success: res => {
							if (res.confirm) {
								this.$Router.push({
									name: 'Personal'
								})
							}
						}
					})
					return
				}
				
				// 组织提现数据
				let data = {
					type			: this.extractType,
					amount			: this.withdraw_input,
					bank_account_id	: this.bankInfo.bank_account_id,
					name			: this.alipayName,
					identity		: this.alipayUser
				}
				
				// 检查提现金额
				if (Number(data.amount) <= 0) {
					uni.showToast({
						title: '提现金额不能为0或复数',
						icon: 'none'
					})
					return;
				}
				
				// 检查银行卡信息
				if(data.type === 1){
					if (data.bank_account_id === undefined || data.bank_account_id === null || data.bank_account_id === '') {
						uni.showToast({
							title: this.bank_accounts > 0 ? '请选择银行卡' : '请添加银行卡',
							icon: 'none'
						})
						return;
					}
				}
				
				// 检查支付宝账号
				if(data.type === 2){
					if (data.name === '') {
						uni.showToast({
							title: '请输入支付宝账号',
							icon: 'none'
						})
						return;
					}
					if (data.identity === '') {
						uni.showToast({
							title: '请输入支付宝姓名',
							icon: 'none'
						})
						return;
					}
				}
				
				uni.showModal({
					title		: '温馨提示',
					content		:this.tax === '0' ? '您是否确认提现，交易将免手续费' : '您是否确认提现，将会扣除' + this.tax + '%手续费',
					confirmColor: '#7c52fc',
					cancelColor	: '#cacaca',
					cancelText	: '我再想想',
					confirmText	: '确认提现',
					success		: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中'
							})
							withdrawsIndex(data).then(res => {
								uni.showModal({
									title		: '提示',
									content		: res,
									showCancel	: false,
									success		: modalRes => {
										if(modalRes.confirm){
											this.getInfo()
											this.withdraw_input = ''
											this.total 			= ''
											this.alipayUser		= ''
											this.alipayName		= ''
										}
									}
								})
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.receiptCode {
		color: #808080;
		text-align: left;
		// margin: $margin 0;
		font-size: $title-size-m;
	}

	.WithdrawingCoin {
		background-color: #f7f7f7;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 100rpx;

		// 账户
		.propery {
			position: relative;
			padding-top: var(--status-bar-height);
			background-image: linear-gradient(to top, #7c52fc, #976dff);
			position: relative;
			overflow: hidden;

			.record-bg {
				position: absolute;
				width: 120%;
				height: 300rpx;
				bottom: -50rpx;
				right: -20rpx;
				z-index: 1;
				opacity: .5;
				transform: rotate(-7deg);
			}

			.propery-content {
				position: relative;
				z-index: 1;
				padding: $padding/2 $padding $padding*3;
				text-align: center;

				.currency {
					font-size: $title-size-m;
					color: rgba($color: white, $alpha: .8);
				}

				.balance {
					font-size: $title-size * 2.5;
					padding: $padding 0;
					color: white;
				}

				.frozen {
					background: rgba($color: #000000, $alpha: .1);
					color: rgba($color: white, $alpha: .7);
					display: inline-block;
					font-size: 24rpx;
					padding: 6rpx $padding;
					border-radius: $radius-m;
					border: solid 1rpx rgba($color: white, $alpha: .4)
				}
			}
		}

	}

	.all {
		color: $mian-color;
		width: 160rpx;
		text-align: center;
	}

	.item-name {
		color: #303030;
		margin-top: $margin;
		font-size: 32rpx;
		display: flex;
		box-sizing: border-box;
		background: white;
		padding: $padding/2 $padding;
		line-height: 90rpx;
		justify-content: space-between;
		.cardName{
			flex: 1;
			&.gray{
				color: $text-gray;
			}
		}
	}

	.withdrawing-content {
		background-color: #fff;
		padding: $padding/2 $padding/2 $padding/2 $padding;
		font-size: $title-size-m;
		/* 绑定银行卡 */
		.bank-card {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 45rpx 0 35rpx;
		}
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			padding: 20rpx 0;
			span:nth-child(1) {
				color: #666;
				margin-right: 20rpx;
			}
			.inputTxt {
				color: #999;
				padding-bottom: 20rpx;
			}
			.input_num {
				font-size: 60rpx;
				color: #3a3a3a;
				font-weight: bolder;
				flex: 1;
			}
		}

		.item-total {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: $padding*1 0 0 0;
			color: #3a3a3a;

			.total {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				box-sizing: border-box;

				.money {
					padding-top: $padding *0.5;
				}
			}

			.lists {
				color: $text-price;
			}
		}

	}

	.btn {
		background-image: linear-gradient(to right, #7c52fc, #976dff);
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		padding: $padding * .9;
		margin: $margin;
		font-size: $title-size;
		font-weight: bold;
	}

	.des {
		text-align: center;
		color: #cacaca;
		font-size: 26rpx;
	}

	.total {
		color: $mian-color;
		margin-top: 20rpx;
		margin-left: 50rpx;
		font-size: 36rpx;
	}
	
	// 选择类型
	.extract-radio{
		background: white;
		margin-bottom: $margin;
		.extract-item{
			position: relative;
			padding: $padding/2 $padding;
			line-height: 80rpx;
			font-size: 32rpx;
			label{
				display: block;
			}
			radio{
				margin-right: $margin/2;
			}
			&::before{
				position: absolute;
				bottom: 0;
				left: $margin;
				right: 0;
				content: " ";
				height: 1rpx;
				background: $border-color;
			}
			&:last-child::before{
				display: none;
			}
		}
	}
	// 支付宝提现
	.alipay-form{
		background: white;
		margin-top: $margin;
		.alipay-inputs{
			position: relative;
			padding-left: 240rpx;
			position: relative;
			height: 90rpx;
			label{
				position: absolute;
				left: 0;
				top: 0;
				line-height: 90rpx;
				width: 240rpx;
				padding: 0 $padding;
				box-sizing: border-box;
			}
			input{
				height: 90rpx;
				width: 100%;
			}
			label,
			input{
				font-size: 32rpx;
			}
		}
	}
</style>
