<template>
	<div class="user-profile-container">
		<div class="profile-header">
			<h2>个人中心</h2>
			<p>管理您的个人信息和账户设置</p>
		</div>

		<el-card class="profile-card">
			<el-form
				ref="formRef"
				:model="state.userInfo"
				label-width="120px"
				class="user-form"
			>
				<el-form-item
					prop="profile"
					label="头像"
					:rules="[{ required: true, message: '头像不能为空', trigger: 'blur' }]"
				>
					<image-upload
						@update:imageUrl="handleImageUrl"
						:image-url="state.userInfo.profile"
						class="avatar-uploader"
					></image-upload>
				</el-form-item>

				<el-form-item
					prop="username"
					label="用户名"
					:rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
				>
					<el-input
						v-model="state.userInfo.username"
						placeholder="请输入用户名"
						class="hospital-input"
					/>
				</el-form-item>

				<el-form-item
					prop="nickName"
					label="用户昵称"
					:rules="[{ required: true, message: '用户昵称不能为空', trigger: 'blur' }]"
				>
					<el-input
						v-model="state.userInfo.nickName"
						placeholder="请输入昵称"
						class="hospital-input"
					/>
				</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
						class="hospital-input"
					/>
				</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
						class="hospital-input"
					/>
				</el-form-item>

				<el-form-item class="form-actions">
					<el-button
						type="primary"
						@click="submitForm(formRef)"
						class="submit-btn"
					>
						保存更改
					</el-button>
					<el-button
						@click="router.push('/')"
						class="cancel-btn"
					>
						返回首页
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

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

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

function handleImageUrl(path: string) {
	state.userInfo.profile = path
}

function init() {
	frontRequest.get("/api/user/userInfo").then(res => {
		state.userInfo = res.data
	})
}
onMounted(() => {
	init()
})
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 lang="scss">
.user-profile-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;

	.profile-header {
		margin-bottom: 30px;
		text-align: center;

		h2 {
			color: #1a7dc4;
			font-size: 24px;
			margin-bottom: 8px;
		}

		p {
			color: #666;
			font-size: 14px;
		}
	}

	.profile-card {
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border: none;

		:deep(.el-card__body) {
			padding: 30px;
		}
	}

	.user-form {
		.el-form-item {
			margin-bottom: 22px;

			&:last-child {
				margin-bottom: 0;
			}
		}

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

	.avatar-uploader {
		:deep(.el-upload) {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			transition: var(--el-transition-duration-fast);

			&:hover {
				border-color: #1a7dc4;
			}
		}

		:deep(.avatar) {
			width: 120px;
			height: 120px;
			display: block;
			border-radius: 50%;
			object-fit: cover;
			border: 2px solid #f0f0f0;
		}
	}

	.hospital-input {
		:deep(.el-input__inner) {
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			height: 40px;
			line-height: 40px;

			&:focus {
				border-color: #1a7dc4;
			}
		}
	}

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

		.submit-btn {
			background-color: #1a7dc4;
			border-color: #1a7dc4;
			padding: 10px 24px;
			border-radius: 4px;
			font-weight: 500;

			&:hover {
				background-color: #1565a7;
				border-color: #1565a7;
			}
		}

		.cancel-btn {
			margin-left: 20px;
			padding: 10px 24px;
			border-radius: 4px;

			&:hover {
				color: #1a7dc4;
				border-color: #c6e2ff;
				background-color: #ecf5ff;
			}
		}
	}
}

@media (max-width: 768px) {
	.user-profile-container {
		padding: 10px;

		.profile-card :deep(.el-card__body) {
			padding: 20px;
		}

		.user-form {
			:deep(.el-form-item__label) {
				width: 100% !important;
				text-align: left;
				margin-bottom: 8px;
			}
		}

		.form-actions {
			.el-button {
				width: 100%;
				margin-left: 0 !important;
				margin-top: 10px;
			}
		}
	}
}
</style>

<route lang="json">
{
"meta": {
"layout": "front",
"title": "个人中心 - 医院预约平台"
}
}
</route>
