<template>
	<view class="app-page">
		<text class="t1">请输入提现金额</text>
		<view class="input-card">
			<text class="t2">￥</text>
			<u-input v-model="price" placeholder="仅可输入数字" type="text" border="none" clearable
				customStyle="margin:0 20rpx 0 10rpx;" />
		</view>
		<view class="bottom-view">
		</view>
		<view class="bottom-menu-box">
			<button class="primary-btn" @click="addWithdrawal">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		addWithdrawal,
	} from "@/common/api/withdrawal.js";
	export default {
		data() {
			return {
				price: undefined,
				userInfo: {}
			}
		},
		computed: {
			canBeCashed() {
				const { balance_total, balance_used, balance_lock } = this.userInfo
				return balance_total - balance_used - balance_lock
			}
		},
		onLoad(options) {},

		onShow() {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = JSON.parse(userInfo);
			}
		},
		methods: {

			addWithdrawal() {
				if (!this.price || !this.canBeCashed) return
				console.log(this.price);

				if (this.price - 0 > this.canBeCashed) {
					uni.$u.toast('可提现金额不足')
					return
				}
				uni.showLoading({

				})
				const data = {
					amount: this.price,
					code: null
				}
				addWithdrawal(data)
					.then((res) => {
						uni.hideLoading()
						uni.$u.toast('申请成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 800);

					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		min-height: 100vh;
		background: white;
		flex-direction: column;
	}

	.t1 {
		margin-top: 50rpx;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #815BFF;
	}

	.input-card {
		margin: 30rpx auto 30rpx auto;
		width: 710rpx;
		height: 89rpx;
		background: #F6F6F6;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.t2 {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0C0C0C;
	}


	.bottom-view {
		margin-bottom: var(--window-bottom);
		padding-bottom: calc(150rpx);
	}




	.bottom-menu-box {
		height: calc(150rpx);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		position: fixed;
		z-index: 9;
		background: white;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		width: 100vw;



		.primary-btn {
			width: 713rpx;
			margin-top: 14rpx;
			height: 78rpx;
			line-height: 78rpx;
			background: #815BFF;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		button::after {
			height: 78rpx;
			line-height: 78rpx;
		}

		.primary-btn:active {
			opacity: 0.7;
		}
	}
</style>
