<!--用户详情-->
<template>
	<el-form
		ref="formRef"
		style="max-width: 600px"
		:model="state.userInfo"
		label-width="auto"
		label-position="top"
	>
		<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="密码"

		>
			<el-input v-model="state.userInfo.password"   type="password"/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
		</el-form-item>
	</el-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { userInfoFront, userUpdateFront } from '~/api/user/frontUserApi'
const formRef = ref<FormInstance>()
const state = reactive({
	userInfo: {}
})
function init() {
	userInfoFront().then(res =>{
		state.userInfo = res.data
	})
}
onMounted(()=>{
	init()
})

/**
 * 提交
 * @param formEl
 */
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			userUpdateFront(state.userInfo).then(res =>{
					toast.success("修改成功~")
          init()
        }).catch(err=>{
			})
		}
	})
}
</script>

<style scoped>

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