<template>
  <div class="user-edit">
    <a-card :bordered="false">
      <a-form layout="vertical" :model="userForm" @submit="handleSave">
        <a-form-item label="用户名">
          <a-input
            v-model:value="userForm.username"
            placeholder="请输入用户名"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item label="昵称">
          <a-input
            v-model:value="userForm.nickname"
            placeholder="请输入昵称"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            v-model:value="userForm.phone"
            placeholder="请输入手机号"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input
            v-model:value="userForm.email"
            placeholder="请输入邮箱"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model:value="userForm.status" style="max-width: 400px">
            <a-select-option :value="1">启用</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">保存</a-button>
            <a-button @click="goBack">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';

  const router = useRouter();
  const route = useRoute();
  const { closeCurrentTab } = useTabsViewStore();

  // 用户信息表单数据
  const userForm = ref({
    username: '',
    nickname: '',
    phone: '',
    email: '',
    status: 1,
  });

  // 保存用户信息
  const handleSave = async () => {
    // TODO: 调用保存接口
    message.success('保存成功');
    goBack();
  };

  // 取消编辑
  const goBack = () => {
    router.back(); // 假设返回用户列表页面
    closeCurrentTab(route); // 关闭当前标签页
  };

  // 初始化用户信息（可以通过接口获取）
  const initUserData = async (userId: string) => {
    // TODO: 调用接口获取用户信息
    // const res = await getUserInfo(userId);

    // 添加 mock 数据
    userForm.value = {
      username: 'mockUser',
      nickname: 'mockNickname',
      phone: '1234567890',
      email: 'mock@example.com',
      status: 1,
    };
  };

  // 获取用户ID并初始化数据
  const userId = route.params.id; // 假设路由中有用户ID
  if (userId) {
    initUserData(userId);
  }
</script>
