<!--用户详情-->
<template>

	<el-card >
		<template #header>
			<div class="card-header">
				<span>个人信息</span>
			</div>
		</template>
		<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" />
			</el-form-item>
			<el-form-item
				prop="confirmPassword"
				label="确认密码"
				:rules="[
        {
          required: true,
          message: '确认密码不能为空',
          trigger: 'blur',
        },
      ]"
			>
				<el-input v-model="state.userInfo.confirmPassword" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(formRef)" style="width: 260px">提交</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(() =>{
	// if (!userStore().frontIsLogin){
	// 	toast.warning("登录失效")
	// 	router.push("/login")
	// }
	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>

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