<template>
	<business-page-layout title="申请提现" :show-back="true">
		<view class="tip">可提现余额：{{ balanceText }}</view>
		<view class="field">
			<text class="label">提现金额</text>
			<input v-model="amount" type="digit" placeholder="请输入金额" />
		</view>
		<view class="quick">
			<text v-for="q in quickAmounts" :key="q.key" class="q-btn" @click="amount = String(q.value)">{{ q.value }}</text>
		</view>
		<button class="submit" @click="submit" :loading="loading">提交申请</button>
	</business-page-layout>
</template>

<script>
	import BusinessPageLayout from '@/subPackages/sub_business_shared/components/business-page-layout.vue'
	import { formatMoney } from '@/subPackages/sub_business_shared/common/format.js'
		import businessMixin from '@/subPackages/sub_business_shared/common/businessMixin.js'

export default {
  mixins: [businessMixin],
		components: { BusinessPageLayout },
		data() {
			return {
				amount: '',
				balanceText: '-',
				loading: false,
				quickAmounts: [
					{ key: '1000', value: 1000 },
					{ key: '3000', value: 3000 },
					{ key: '5000', value: 5000 },
					{ key: '10000', value: 10000 },
				],
			}
		},
		onLoad() {
			if (!this.bizApi.getMyBalance) return
			this.bizApi.getMyBalance().then(w => {
				if (w.ok && w.data) {
					const b = w.data.balance
					this.balanceText = b != null ? formatMoney(b) : '-'
				}
			})
		},
		methods: {
			submit() {
				const amt = Number(this.amount)
				if (!amt || amt <= 0) {
					uni.showToast({ title: '请输入有效金额', icon: 'none' })
					return
				}
				this.loading = true
				this.bizApi.submitWithdrawal({ amount: amt }).then(w => {
					if (w.ok) {
						uni.showToast({ title: '提交成功' })
						setTimeout(() => uni.navigateBack(), 800)
					} else {
						uni.showToast({ title: (w.res && w.res.message) || '提交失败', icon: 'none' })
					}
				}).finally(() => { this.loading = false })
			},
		},
	}
</script>

<style lang="scss" scoped>
.tip {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 32rpx;
	background: #fff;
	padding: 24rpx;
	border-radius: 16rpx;
}
.field {
	background: #fff;
	padding: 24rpx;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
}
.label {
	display: block;
	font-size: 26rpx;
	color: #999;
	margin-bottom: 12rpx;
}
.quick {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
	margin-bottom: 48rpx;
}
.q-btn {
	padding: 12rpx 24rpx;
	background: #eef8f6;
	color: #6acdbb;
	border-radius: 8rpx;
	font-size: 26rpx;
}
.submit {
	background: #6acdbb;
	color: #fff;
	border-radius: 44rpx;
}
</style>
