<template>
	<el-card>
		<template #header>
			<div class="card-header">
				<span>个人信息</span>
			</div>
		</template>
		<!-- 余额信息卡片 -->
		<el-card shadow="hover" style="margin-bottom: 20px">
			<div style="display: flex; justify-content: space-between; align-items: center">
				<div>
					<div style="font-size: 14px; color: #909399">账户余额</div>
					<div style="font-size: 24px; font-weight: bold; color: #409EFF">
						￥{{ state.balance }}
					</div>
				</div>
				<div>
					<el-button type="primary" @click="state.rechargeDialogVisible = true">充值</el-button>
<!--					<el-button type="success" @click="state.withdrawDialogVisible = true">提现</el-button>-->
				</div>
			</div>
		</el-card>

		<el-form
			ref="formRef"
			style="max-width: 600px"
			:model="state.userInfo"
			label-width="auto"
		>
			<el-form-item
				prop="username"
				label="用户名"
				:rules="[
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
          },
        ]"
			>
				<el-input v-model="state.userInfo.username" />
			</el-form-item>
			<el-form-item
				prop="nickName"
				label="用户昵称"
				:rules="[
          {
            required: true,
            message: '用户昵称不能为空',
            trigger: 'blur',
          }
        ]"
			>
				<el-input v-model="state.userInfo.nickName" />
			</el-form-item>
			<el-form-item
				prop="password"
				label="密码"
				:rules="[
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
        ]"
			>
				<el-input v-model="state.userInfo.password" type="password" show-password />
			</el-form-item>
			<el-form-item
				prop="confirmPassword"
				label="确认密码"
				:rules="[
          {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur',
          },
        ]"
			>
				<el-input v-model="state.userInfo.confirmPassword" type="password" show-password />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(formRef)" style="width: 260px">提交</el-button>
			</el-form-item>
		</el-form>

		<!-- 充值对话框 -->
		<el-dialog v-model="state.rechargeDialogVisible" title="账户充值" width="30%">
			<el-form :model="state.rechargeForm" label-width="100px">
				<el-form-item label="充值金额" required>
					<el-input-number
						v-model="state.rechargeForm.amount"
						:min="1"
						:max="100000"
						:precision="2"
						controls-position="right"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="state.rechargeForm.paymentMethod" placeholder="请选择支付方式" style="width: 100%">
						<el-option label="支付宝" value="alipay" />
						<el-option label="微信支付" value="wechat" />
						<el-option label="银行卡" value="bank" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
        <span class="dialog-footer">
          <el-button @click="state.rechargeDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRecharge">确认充值</el-button>
        </span>
			</template>
		</el-dialog>

		<!-- 提现对话框 -->
		<el-dialog v-model="state.withdrawDialogVisible" title="账户提现" width="30%">
			<el-form :model="state.withdrawForm" label-width="100px">
				<el-form-item label="提现金额" required>
					<el-input-number
						v-model="state.withdrawForm.amount"
						:min="1"
						:max="state.balance"
						:precision="2"
						controls-position="right"
						style="width: 100%"
					/>
					<div style="font-size: 12px; color: #909399; margin-top: 5px">
						可提现余额: {{ state.balance.toFixed(2) }} 元
					</div>
				</el-form-item>
				<el-form-item label="提现方式">
					<el-select v-model="state.withdrawForm.withdrawMethod" placeholder="请选择提现方式" style="width: 100%">
						<el-option label="支付宝" value="alipay" />
						<el-option label="银行卡" value="bank" />
					</el-select>
				</el-form-item>
				<el-form-item label="收款账号" required v-if="state.withdrawForm.withdrawMethod">
					<el-input v-model="state.withdrawForm.account" placeholder="请输入收款账号" />
				</el-form-item>
			</el-form>
			<template #footer>
        <span class="dialog-footer">
          <el-button @click="state.withdrawDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleWithdraw">确认提现</el-button>
        </span>
			</template>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const formRef = ref<FormInstance>()
const state = reactive({
	userInfo: {},
	balance: 0,
	rechargeDialogVisible: false,
	withdrawDialogVisible: false,
	rechargeForm: {
		amount: 100,
		paymentMethod: 'alipay'
	},
	withdrawForm: {
		amount: 0,
		withdrawMethod: '',
		account: ''
	}
})

function init() {
	frontRequest.get("/api/user/userInfo").then(res => {
		state.userInfo = res.data || {}

		console.log(res.data.balance)
		state.balance = res.data.balance || 0
	})
}

onMounted(() => {
	init()
})

/**
 * 提交表单
 * @param formEl
 */
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			frontRequest.put("/api/user/update", state.userInfo).then(res => {
				ElMessage.success("修改成功")
				router.push("/login")
			})
		}
	})
}

/**
 * 处理充值
 */
const handleRecharge = () => {
	if (state.rechargeForm.amount <= 0) {
		ElMessage.error('充值金额必须大于0')
		return
	}
	frontRequest.post("/api/user/recharge", {
		balance: state.rechargeForm.amount,
		paymentMethod: state.rechargeForm.paymentMethod
	}).then(res => {
		ElMessage.success(`充值成功，金额: ${state.rechargeForm.amount}元`)
		init()
		state.rechargeDialogVisible = false
		// 重置表单
		state.rechargeForm.amount = 100
	}).catch(err => {
		ElMessage.error('充值失败: ' + (err.message || '未知错误'))
	})
}

/**
 * 处理提现
 */
const handleWithdraw = () => {
	if (state.withdrawForm.amount <= 0) {
		ElMessage.error('提现金额必须大于0')
		return
	}

	if (state.withdrawForm.amount > state.balance) {
		ElMessage.error('提现金额不能超过账户余额')
		return
	}

	if (!state.withdrawForm.withdrawMethod) {
		ElMessage.error('请选择提现方式')
		return
	}

	if (!state.withdrawForm.account) {
		ElMessage.error('请输入收款账号')
		return
	}

	ElMessageBox.confirm(
		`确认提现 ${state.withdrawForm.amount} 元到 ${state.withdrawForm.withdrawMethod === 'alipay' ? '支付宝' : '银行卡'} 账号 ${state.withdrawForm.account}?`,
		'提现确认',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		}
	).then(() => {
		frontRequest.post("/api/user/withdraw", {
			amount: state.withdrawForm.amount,
			withdrawMethod: state.withdrawForm.withdrawMethod,
			account: state.withdrawForm.account
		}).then(res => {
			ElMessage.success(`提现申请已提交，金额: ${state.withdrawForm.amount}元`)
			state.balance -= state.withdrawForm.amount
			state.withdrawDialogVisible = false
			// 重置表单
			state.withdrawForm = {
				amount: 0,
				withdrawMethod: '',
				account: ''
			}
		}).catch(err => {
			ElMessage.error('提现失败: ' + (err.message || '未知错误'))
		})
	}).catch(() => {
		// 用户取消
	})
}
</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 余额卡片样式 */
.el-card {
	margin-bottom: 20px;
}
</style>

<route lang="json">
{
"meta": {
"layout": "frontUserInfo"
}
}
</route>
