<template>
  <div class="add-user">
    <a-card :bordered="false">
      <a-form layout="vertical" :model="userForm" @submit="handleAddUser">
        <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.password"
            placeholder="请输入密码"
            type="password"
            allow-clear
            style="max-width: 400px"
          />
        </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 { reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  const { closeCurrentTab } = useTabsViewStore();

  const router = useRouter();
  const route = useRoute();

  // 用户表单数据
  const userForm = reactive({
    username: '',
    password: '',
  });

  // 新增用户
  const handleAddUser = async () => {
    // TODO: 调用新增用户接口
    message.success('用户新增成功');
    goBack();
  };

  const goBack = () => {
    router.back();
    closeCurrentTab(route);
  };
</script>
