<template>
	<view class="apply-page">
		<view class="form-section">
			<text class="section-label">到账银行卡</text>
			<view class="bank-row" @click="isSelect = true">
				<view class="bank-icon"></view>
				<text class="bank-text" :class="{ placeholder: !form.bankAccount }">
					{{ selectedBankText }}
				</text>
				<text class="chevron">&gt;</text>
			</view>
			<text class="tip">注：仅支持整数，72小时内到账</text>
		</view>

		<view class="form-section">
			<text class="section-label">提现金额</text>
			<view class="amount-row">
				<text class="symbol">￥</text>
				<input
					type="number"
					v-model="form.dPrice"
					placeholder="0"
					@input="onAmountInput"
				/>
			</view>
			<view class="balance-tip" v-if="getAmount > 0">
				可提现金额为 {{ getAmount }} 元，
				<text class="link" @click="allBalance">全部提现</text>
			</view>
			<view class="balance-tip" v-else>暂无可提现余额</view>
			<text class="fee-tip">手续费 {{ serviceFee }} 元/笔</text>
		</view>

		<view class="footer-bar">
			<view class="submit-btn" @click="submit">申请提现</view>
		</view>
		<view class="record-link" @click="goRecord">提现记录</view>

		<!-- 选卡弹窗 -->
		<view class="popup-mask" v-if="isSelect" @click="isSelect = false">
			<view class="popup-panel" @click.stop>
				<view class="popup-header">
					<text class="popup-title">选择提现银行卡</text>
					<text class="popup-sub">请留意各银行到账时间</text>
				</view>
				<view
					class="bank-option"
					v-for="(item, index) in blankList"
					:key="index"
					@click="selectBlank(item)"
				>
					<view class="option-icon"></view>
					<view class="option-info">
						<text class="option-name">{{ item.bankName }}({{ tailNum(item.bankCardNum) }})</text>
						<text class="option-desc">72小时到账</text>
					</view>
				</view>
				<view class="bank-option add" @click="goAddBank">
					<text>+ 添加银行卡提现</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getInfo, withdraw, myBank } from '@/api/index'
import { MOCK_BANK_CARDS, SERVICE_FEE } from './mock.js'

export default {
	data() {
		return {
			isSelect: false,
			getAmount: '0.00',
			blankList: [],
			selectedBankText: '选择银行卡',
			serviceFee: SERVICE_FEE,
			form: {
				cOpenId: '',
				dPrice: '',
				bankId: '',
				bankAccount: '',
				openingBank: '',
			},
		}
	},
	onShow() {
		this.form.cOpenId = uni.getStorageSync('wx_copenid')
		this.loadInfo()
		this.loadBank()
	},
	methods: {
		loadInfo() {
			getInfo().then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.getAmount = Number(res.data.data.getAmount || 0).toFixed(2)
				} else {
					this.getAmount = '1253.12'
				}
			}).catch(() => {
				this.getAmount = '1253.12'
			})
		},
		loadBank() {
			myBank().then(res => {
				if (res.data.code == 200 && res.data.data?.length) {
					this.blankList = res.data.data
				} else {
					this.blankList = [...MOCK_BANK_CARDS]
				}
			}).catch(() => {
				this.blankList = [...MOCK_BANK_CARDS]
			})
		},
		tailNum(num) {
			return num ? String(num).slice(-4) : '****'
		},
		selectBlank(item) {
			this.selectedBankText = `${item.bankName}(**** ${this.tailNum(item.bankCardNum)})`
			this.form.bankId = item.bankId
			this.form.bankAccount = item.bankCardNum
			this.form.openingBank = item.openingBank
			this.isSelect = false
		},
		onAmountInput(e) {
			const val = String(e.detail.value || '').replace(/\D/g, '')
			this.form.dPrice = val
		},
		allBalance() {
			this.form.dPrice = String(Math.floor(Number(this.getAmount)))
		},
		goAddBank() {
			this.isSelect = false
			uni.navigateTo({ url: '/workbench/bank/add' })
		},
		goRecord() {
			uni.navigateTo({ url: '/workbench/withdraw/record' })
		},
		submit() {
			if (!this.form.bankAccount) {
				uni.showToast({ title: '请选择银行卡', icon: 'none' })
				return
			}
			if (!this.form.dPrice || Number(this.form.dPrice) <= 0) {
				uni.showToast({ title: '请输入提现金额', icon: 'none' })
				return
			}
			if (Number(this.form.dPrice) > Number(this.getAmount)) {
				uni.showToast({ title: '超出可提现金额', icon: 'none' })
				return
			}
			withdraw(this.form).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: '已提交审核', icon: 'none' })
					setTimeout(() => uni.navigateBack(), 1000)
				} else {
					uni.showToast({ title: res.data.msg || '提交失败', icon: 'none' })
				}
			}).catch(() => {
				uni.showToast({ title: '已提交审核（演示）', icon: 'none' })
				setTimeout(() => uni.navigateBack(), 1000)
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.apply-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 160rpx;
}

.form-section {
	background: #fff;
	padding: 28rpx 32rpx;
	margin-bottom: 16rpx;
}

.section-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.bank-row {
	display: flex;
	align-items: center;
	padding: 16rpx 0;
}

.bank-icon {
	width: 48rpx;
	height: 48rpx;
	background: #eee;
	border-radius: 8rpx;
	margin-right: 16rpx;
	flex-shrink: 0;
}

.bank-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;

	&.placeholder {
		color: #ccc;
	}
}

.chevron {
	color: #999;
	font-size: 28rpx;
}

.tip {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
}

.amount-row {
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #eee;
	padding: 16rpx 0;

	.symbol {
		font-size: 48rpx;
		color: #333;
		margin-right: 12rpx;
	}

	input {
		flex: 1;
		font-size: 56rpx;
		color: #333;
		font-weight: 600;
	}
}

.balance-tip {
	font-size: 24rpx;
	color: #999;
	margin-top: 16rpx;

	.link {
		color: #0879ff;
	}
}

.fee-tip {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 12rpx;
}

.footer-bar {
	padding: 32rpx;
}

.submit-btn {
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #333;
	color: #fff;
	font-size: 32rpx;
	border-radius: 12rpx;
}

.record-link {
	text-align: center;
	font-size: 26rpx;
	color: #0879ff;
	padding-bottom: 32rpx;
}

.popup-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
	display: flex;
	align-items: flex-end;
}

.popup-panel {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
	max-height: 70vh;
	overflow-y: auto;
}

.popup-header {
	text-align: center;
	margin-bottom: 24rpx;
}

.popup-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.popup-sub {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.bank-option {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;

	&.add {
		justify-content: center;
		border-bottom: none;
		font-size: 28rpx;
		color: #666;
		padding-top: 32rpx;
	}
}

.option-icon {
	width: 48rpx;
	height: 48rpx;
	background: #eee;
	border-radius: 8rpx;
	margin-right: 16rpx;
}

.option-name {
	display: block;
	font-size: 28rpx;
	color: #333;
}

.option-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}
</style>
