<template>
  <div class="tenant-manage-container">
    <!-- 新增租户表单 -->
    <el-form
      ref="tenantFormRef"
      :model="tenantForm"
      :rules="tenantRules"
      label-width="120px"
      class="tenant-form"
    >
      <el-form-item label="机构名" prop="name">
        <el-input v-model="tenantForm.name" placeholder="请输入机构名" />
      </el-form-item>
      <el-form-item label="机构简介" prop="introduction">
        <el-input
          v-model="tenantForm.introduction"
          type="textarea"
          :maxlength="512"
          show-word-limit
          placeholder="请输入机构简介（512字内）"
        />
      </el-form-item>
      <el-form-item label="机构地址" prop="address">
        <el-input v-model="tenantForm.address" placeholder="请输入机构地址" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitTenantForm">新增租户</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增用户表单（显示在新增租户成功后） -->
    <el-form
      v-if="showUserForm"
      ref="userFormRef"
      :model="userForm"
      :rules="userRules"
      label-width="120px"
      class="user-form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="userForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="机构ID" prop="organizationId">
        <el-input
          v-model="userForm.organizationId"
          placeholder="新增租户后会生成机构ID"
          disabled
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUserForm">新增用户</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";

// 表单引用
const tenantFormRef = ref<FormInstance>();
const userFormRef = ref<FormInstance>();

// 租户表单数据
interface TenantForm {
  name: string;
  introduction: string;
  address: string;
}

// 用户表单数据
interface UserForm {
  username: string;
  password: string;
  organizationId: string;
}

// 租户表单数据和验证规则
const tenantForm = reactive<TenantForm>({
  name: "",
  introduction: "",
  address: "",
});

const tenantRules = reactive<FormRules>({
  name: [
    { required: true, message: "请输入机构名", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  introduction: [
    { required: true, message: "请输入机构简介", trigger: "blur" },
    { max: 512, message: "机构简介不能超过512个字", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入机构地址", trigger: "blur" },
    { min: 5, max: 100, message: "长度在 5 到 100 个字符", trigger: "blur" },
  ],
});

// 用户表单数据和验证规则
const userForm = reactive<UserForm>({
  username: "",
  password: "",
  organizationId: "",
});

const userRules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
  organizationId: [{ required: true, message: "请输入机构ID", trigger: "blur" }],
});

// 控制用户表单的显示
const showUserForm = ref(false);

// 模拟生成机构ID
const generateOrgId = (): string => {
  return "ORG_" + Math.random().toString(36).substr(2, 9).toUpperCase();
};

// 提交租户表单
const submitTenantForm = async () => {
  if (!tenantFormRef.value) return;
  try {
    await tenantFormRef.value.validate((valid) => {
      if (valid) {
        // 这里应该是API调用
        console.log("提交租户表单:", tenantForm);
        userForm.organizationId = generateOrgId();
        showUserForm.value = true;
        ElMessage.success("租户创建成功！");
      }
    });
  } catch (error) {
    console.error("租户表单验证失败:", error);
    ElMessage.error("请检查租户表单输入");
  }
};

// 提交用户表单
const submitUserForm = async () => {
  if (!userFormRef.value) return;
  try {
    await userFormRef.value.validate((valid) => {
      if (valid) {
        // 这里应该是API调用
        console.log("提交用户表单:", userForm);
        ElMessage.success("用户创建成功！");
      }
    });
  } catch (error) {
    console.error("用户表单验证失败:", error);
    ElMessage.error("请检查用户表单输入");
  }
};
</script>

<style scoped>
.tenant-manage-container {
  padding: 20px;
}

.tenant-form {
  max-width: 600px;
  margin-bottom: 40px;
}

.user-form {
  max-width: 600px;
}
</style>
