<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row :gutter="20">
				<el-col :xs="24" :sm="20" :md="16" :lg="12" :xl="10">
					<el-card shadow="hover" class="apply-card">
						<template #header>
							<div class="card-header">
								<span class="card-title">申请结算</span>
								<span class="available-balance"
									>可提现金额：<span class="balance-amount">¥{{ formatAmount(availableBalance) }}</span></span
								>
							</div>
						</template>

						<el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
							<el-form-item label="提现金额" prop="amount">
								<el-input-number v-model="formData.amount" :min="0" :controls="false" placeholder="请输入提现金额" style="width: 100%" />
							</el-form-item>

							<el-form-item label="提现类型" prop="type">
								<el-radio-group v-model="formData.type">
									<el-radio :label="1">银行卡</el-radio>
									<el-radio :label="2">USDT</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="银行名称" prop="bankName" v-if="formData.type === 1">
								<el-input v-model="formData.bankName" placeholder="请输入银行名称" clearable />
							</el-form-item>

							<el-form-item label="银行卡账号" prop="bankAccount">
								<el-input v-model="formData.bankAccount" placeholder="请输入银行卡账号/USDT地址" clearable />
							</el-form-item>

							<el-form-item label="真实姓名" prop="realName">
								<el-input v-model="formData.realName" placeholder="请输入真实姓名" clearable />
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="handleSubmit" :loading="loading" size="large" style="width: 120px"> 提交申请 </el-button>
								<el-button @click="handleReset" size="large" style="width: 120px">重置</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts" name="settlementApply" setup>
import { applyWithdraw, getMerchantBalance } from '/@/api/settlement';
import { useMessage } from '/@/hooks/message';

// 定义变量
const formRef = ref();
const loading = ref(false);
const availableBalance = ref(0);
const formData = ref({
	amount: null,
	type: 1,
	bankName: '',
	bankAccount: '',
	realName: '',
});

// 表单验证规则
const rules = {
	amount: [{ required: true, message: '请输入提现金额', trigger: 'blur' }],
	type: [{ required: true, message: '请选择提现类型', trigger: 'change' }],
	bankName: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
	bankAccount: [{ required: true, message: '请输入银行卡账号/USDT地址', trigger: 'blur' }],
	realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
};

// 提交申请
const handleSubmit = async () => {
	try {
		await formRef.value?.validate();

		// 验证提现金额不能超过可提现金额
		if (formData.value.amount && formData.value.amount > availableBalance.value) {
			useMessage().error(`提现金额不能超过可提现金额 ¥${formatAmount(availableBalance.value)}`);
			return;
		}

		loading.value = true;

		const submitData: any = {
			amount: formData.value.amount,
			type: formData.value.type,
			bankAccount: formData.value.bankAccount,
			realName: formData.value.realName,
		};

		// 银行卡类型才需要银行名称
		if (formData.value.type === 1) {
			submitData.bankName = formData.value.bankName;
		}

		await applyWithdraw(submitData);
		useMessage().success('申请提交成功');
		handleReset();
	} catch (err: any) {
		if (err.msg) {
			useMessage().error(err.msg);
		}
	} finally {
		loading.value = false;
	}
};

// 重置表单
const handleReset = () => {
	formRef.value?.resetFields();
	formData.value = {
		amount: null,
		type: 1,
		bankName: '',
		bankAccount: '',
		realName: '',
	};
};

// 加载商户余额
const loadBalance = async () => {
	try {
		const res = await getMerchantBalance();
		if (res.code === 0 && res.data) {
			availableBalance.value = res.data.totalUseAmount || 0;
		}
	} catch (err) {
		// 加载余额失败
	}
};

// 格式化金额
const formatAmount = (amount: number) => {
	return amount ? amount.toFixed(2) : '0.00';
};

// 页面加载时获取余额
onMounted(() => {
	loadBalance();
});
</script>

<style scoped lang="scss">
.apply-card {
	margin-top: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.card-title {
		font-size: 18px;
		font-weight: bold;
		color: #303133;
	}

	.available-balance {
		font-size: 14px;
		color: #606266;

		.balance-amount {
			font-size: 18px;
			font-weight: bold;
			color: #f56c6c;
			margin-left: 5px;
		}
	}
}

:deep(.el-form) {
	padding: 20px 0;
}

:deep(.el-form-item) {
	margin-bottom: 28px;
}

:deep(.el-input-number) {
	width: 100%;

	.el-input__inner {
		text-align: left;
	}
}

:deep(.el-input__inner) {
	height: 40px;
	line-height: 40px;
}

:deep(.el-radio) {
	margin-right: 30px;
}
</style>
