<template>
	<el-card class="user-profile-card">
		<template #header>
			<div class="card-header">
				<span class="header-title">个人信息</span>
			</div>
		</template>
		<el-form
			ref="formRef"
			class="user-form"
			:model="state.userInfo"
			label-width="100px"
		>
			<el-form-item
				prop="nickName"
				label="用户昵称"
				:rules="[
          {
            required: true,
            message: '用户昵称不能为空',
            trigger: 'blur',
          }
        ]"
			>
				<el-input v-model="state.userInfo.nickName" placeholder="请输入昵称" />
			</el-form-item>
			<el-form-item
				prop="phone"
				label="手机号"
				:rules="[
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur',
          }
        ]"
			>
				<el-input v-model="state.userInfo.phone" placeholder="请输入手机号" />
			</el-form-item>
			<el-form-item
				prop="username"
				label="用户名"
				:rules="[
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
          },
        ]"
			>
				<el-input v-model="state.userInfo.username" placeholder="请输入用户名" />
			</el-form-item>

			<el-form-item
				prop="password"
				label="密码"
				:rules="[
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
          },
        ]"
			>
				<el-input
					v-model="state.userInfo.password"
					type="password"
					placeholder="请输入密码"
					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"
					placeholder="请再次输入密码"
					show-password
				/>
			</el-form-item>
			<el-form-item class="form-actions">
				<el-button
					type="primary"
					@click="submitForm(formRef)"
					class="submit-btn"
				>
					保存修改
				</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const formRef = ref<FormInstance>()
const state = reactive({
	userInfo: {}
})

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

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')
			})
		}
	})
}
</script>

<style scoped>
.user-profile-card {
	max-width: 800px;
	margin: 20px auto;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.header-title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.user-form {
	padding: 0 20px;
}

:deep(.el-form-item__label) {
	color: #666;
	font-weight: 500;
}

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

.form-actions {
	margin-top: 30px;
	text-align: center;
}

.submit-btn {
	width: 200px;
	height: 42px;
	font-size: 16px;
	border-radius: 6px;
	background-color: #409EFF;
	border: none;
	transition: all 0.3s;
}

.submit-btn:hover {
	background-color: #66b1ff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

:deep(.el-card__header) {
	border-bottom: 1px solid #f0f0f0;
	background-color: #f9f9f9;
	padding: 15px 20px;
}
</style>

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