<template>
  <a-form
    ref="baseFormRef"
    :model="baseformData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
    layout="vertical"
  >
    <a-form-item
      field="name"
      label="用户名称"
      :rules="[
        { required: true, message: '名称不能未空' },
        {
          minLength: 2,
          maxLength: 20,
          message: '名称长度大于2个字节，且小于20个字节'
        }
      ]"
    >
      <a-input v-model="baseformData.name" placeholder="请输入用户名称" />
    </a-form-item>
    <a-form-item
      field="email"
      label="用户邮箱"
      :rules="[{ type: 'email', max: 200, message: '邮箱格式不正确' }]"
    >
      <a-input v-model="baseformData.email" placeholder="请输入账号邮箱" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="secondary" @click="reset"> 重置 </a-button>
        <a-button type="primary" @click="modifyBaseData"> 提交 </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { setSelfInfo } from '@/api/client'
import { Message } from '@arco-design/web-vue'
import { useEmitt } from '@/logics/mitt/useEmitt'

const { emitter } = useEmitt()
const baseFormRef = ref<FormInstance>()
const baseformData = reactive({
  email: '',
  name: ''
})
/**
 * 修改个人基本信息
 */
const modifyBaseData = async () => {
  const valid = await baseFormRef.value?.validate()
  if (!valid) {
    const { name, email } = baseformData
    await setSelfInfo({ name, email })
    emitter.emit('get_self_info')
    Message.success('修改成功')
    reset()
  }
}
/**
 * 重置表单
 */
const reset = async () => {
  await baseFormRef.value?.resetFields()
}
</script>

<script lang="ts">
export default {
  name: 'BaseSetting'
}
</script>

<style scoped lang="less">
.form {
  width: 540px;
  margin: 0 auto;
}
</style>
