<script setup lang="ts">
import { insertUser } from '@/api/system/user';
const props = defineProps({
  formRoleValue: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref();
const { formRoleValue } = toRefs(props);
const roleTitle = ref('新增角色');
const formBtnLoading = ref(false);
const showRoleModal = ref(false);
const rules = {
  roleName: {
    required: true,
    message: '请输入角色名称',
    trigger: 'blur',
  },
};

// 提交表单
const confirmForm = () => {
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      formRoleValue.value.id ? updateUserApi() : insertUserApi();
    } else {
    }
  });
};

// 修改
const updateUserApi = () => {};

// 新增
const insertUserApi = async () => {
  const res = await insertUser(formRoleValue.value);
  if (res.status === 200) window['$message'].success('新增成功!');
};

const init = (str: string) => {
  if (str === 'add') {
    roleTitle.value = '新增用户';
  } else {
    roleTitle.value = '编辑用户';
  }
  showRoleModal.value = true;
};
const close = () => {
  showRoleModal.value = false;
};
defineExpose({
  init,
  close,
});
</script>

<template>
  <!-- 新增角色 -->
  <n-modal
    v-model:show="showRoleModal"
    :show-icon="false"
    preset="dialog"
    :title="roleTitle"
  >
    <n-form
      ref="formRef"
      :rules="rules"
      label-placement="left"
      label-width="auto"
      :model="formRoleValue"
      require-mark-placement="right-hanging"
    >
      <n-form-item label="用户名" path="username">
        <n-input
          v-model:value="formRoleValue.username"
          placeholder="请输入用户名"
        />
      </n-form-item>

      <n-form-item label="真实姓名">
        <n-input
          v-model:value="formRoleValue.realname"
          placeholder="请输入真实姓名"
        />
      </n-form-item>

      <n-form-item label="电子邮箱">
        <n-input
          v-model:value="formRoleValue.email"
          placeholder="请输入电子邮箱"
        />
      </n-form-item>
      <n-form-item label="手机号">
        <n-input
          v-model:value="formRoleValue.phone"
          placeholder="请输入手机号"
        />
      </n-form-item>
      <n-form-item label="密码">
        <n-input
          type="password"
          v-model:value="formRoleValue.password"
          placeholder="请输入密码"
        />
      </n-form-item>
      <n-form-item label="性别">
        <n-radio-group v-model:value="formRoleValue.sex" name="radiogroup1">
          <n-space>
            <n-radio :value="0"> 女 </n-radio>
            <n-radio :value="1"> 男 </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="用户类型">
        <n-radio-group
          v-model:value="formRoleValue.userType"
          name="radiogroup1"
        >
          <n-space>
            <n-radio :value="2"> 用户 </n-radio>
            <n-radio :value="1"> 员工 </n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
    </n-form>
    <template #action>
      <n-space>
        <n-button type="primary" :loading="formBtnLoading" @click="confirmForm"
          >提交</n-button
        >
      </n-space>
    </template>
  </n-modal>
</template>
