<script setup lang="ts">
import { ElMessage } from 'element-plus'
import AppUpload from '@/components/base/AppUpload.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { updateUser } from '../api'

const formRef = $ref<FormInstance>()
const form = reactive({
  name: '',
  avatar: '',
  sex: ''
})
const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
})

// 提交
function handleSubmit() {
  formRef?.validate().then(update)
}
// 修改
const update = () => {
  updateUser(form).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
  })
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    hide-required-asterisk
    label-width="60px"
    label-position="left"
    style="width: 360px"
  >
    <el-form-item label="昵称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="头像" prop="avatar">
      <AppUpload v-model="form.avatar"></AppUpload>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex" class="ml-4">
        <el-radio label="1" size="large">男</el-radio>
        <el-radio label="2" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>
