<script setup lang="ts">
import { toRefs } from 'vue';

import { Button, Form, Input, notification } from 'ant-design-vue';

import { selfUpdate } from '#/api';

const props = defineProps({
  // 这里可以定义父组件传递的属性
  userInfo: {
    type: Object,
    default: () => ({
      username: '',
      email: '',
      phone: '',
      address: '',
    }),
  },
});
const { userInfo } = toRefs(props);

// 表单提交方法
const handleSubmit = async () => {
  const res = await selfUpdate({
    name: userInfo.value.name,
    phone: userInfo.value.phone,
    email: userInfo.value.email,
    address: userInfo.value.address,
  });
  if (res.code === 200) {
    notification.success({
      message: '修改成功',
      description: '用户信息已更新',
      duration: 3,
    });
  } else {
    notification.error({
      message: '修改失败',
      description: res.msg,
    });
  }
};
</script>

<template>
  <Form
    :model="userInfo"
    layout="vertical"
    @finish="handleSubmit"
    class="p-4"
    style="max-width: 500px; margin: 0 auto"
  >
    <Form.Item label="用户名">
      <Input v-model:value="userInfo.name" />
    </Form.Item>
    <Form.Item label="邮箱" name="email">
      <Input v-model:value="userInfo.email" />
    </Form.Item>
    <Form.Item label="联系电话">
      <Input v-model:value="userInfo.phone" />
    </Form.Item>
    <Form.Item label="地址">
      <Input v-model:value="userInfo.address" />
    </Form.Item>
    <Button type="primary" html-type="submit">保存修改</Button>
  </Form>
</template>
