<template>
  <el-drawer v-model="visible" :title="dialogTitle" width="500px">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <div class="form-title">账号信息</div>
      <!-- 账号 -->
      <el-form-item label="账号">
        <el-input v-model="form.account" :disabled="!isAdd" placeholder="请输入账号" />
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password" v-if="isAdd">
        <el-input
          v-model="form.password"
          type="password"
          autocomplete="new-password"
          show-password
          :placeholder="isAdd ? '请输入密码（至少6位）' : '留空则不修改密码'"
        />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="confirmPassword" v-if="isAdd">
        <el-input
          v-model="form.confirmPassword"
          type="password"
          autocomplete="new-password"
          show-password
          :placeholder="isAdd ? '请再次输入密码' : '留空则不修改密码'"
        />
      </el-form-item>

      <el-divider></el-divider>
      <div class="form-title">个人信息</div>
      <!-- 姓名 -->
      <el-form-item label="姓名">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>

      <!-- 电话 -->
      <el-form-item label="电话">
        <el-input v-model="form.phone" placeholder="请输入电话" />
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>

      <!-- QQ -->
      <el-form-item label="QQ">
        <el-input v-model="form.qq" placeholder="请输入QQ" />
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex" placeholder="请选择性别">
          <el-radio-button label="男" :value="1" />
          <el-radio-button label="女" :value="2" />
        </el-radio-group>
      </el-form-item>

      <!-- 状态 -->
      <el-form-item label="状态">
        <el-select
          v-model="form.status"
          placeholder="请选择状态"
          style="width: 100%"
        >
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 对话框脚部 -->
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import { addUser, editUser, getUserInfo } from "@/api/user";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  statusDict: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue", "submit", "close"]);

const visible = ref(false);
const formRef = ref<any>(null);
const isAdd = ref(false);

const form = ref<any>({
  id: null,
  account: "",
  name: "",
  phone: "",
  qq: "",
  sex: 1,
  password: "",
  confirmPassword: "",
  email: "",
  status: 1,
});

const dialogTitle = computed(() => {
  return isAdd.value ? "添加用户" : "编辑用户";
});

// 密码验证规则
const validatePassword = (rule: any, value: any, callback: any) => {
  if (isAdd.value) {
    // 新增用户时，密码必填
    if (!value) {
      callback(new Error("请输入密码"));
      return;
    }
    if (value.length < 6) {
      callback(new Error("密码长度不能少于6位"));
      return;
    }
  } else {
    // 编辑用户时，如果填写了密码，则必须符合规则
    if (value && value.length < 6) {
      callback(new Error("密码长度不能少于6位"));
      return;
    }
  }
  callback();
};

// 确认密码验证规则
const validateConfirmPassword = (rule: any, value: any, callback: any) => {
  if (isAdd.value) {
    // 新增用户时，确认密码必填
    if (!value) {
      callback(new Error("请再次输入密码"));
      return;
    }
    if (value !== form.value.password) {
      callback(new Error("两次输入的密码不一致"));
      return;
    }
  } else {
    // 编辑用户时，如果填写了密码，则确认密码必须一致
    if (form.value.password && value !== form.value.password) {
      callback(new Error("两次输入的密码不一致"));
      return;
    }
    // 如果填写了确认密码但没填密码，提示错误
    if (value && !form.value.password) {
      callback(new Error("请先输入密码"));
      return;
    }
  }
  callback();
};

// 表单验证规则
const rules = {
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 20, message: "账号长度在 3 到 20 个字符", trigger: "blur" },
  ],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: "blur" }],
  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }],
};

// 监听 modelValue
watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal;
  }
);

// 监听 visible 变化
watch(visible, (newVal) => {
  if (!newVal) {
    emit("update:modelValue", false);
  }
});

// 监听 statusDict 变化，用于调试
watch(
  () => props.statusDict,
  (newVal) => {},
  { immediate: true, deep: true }
);

const loadUserData = async (user: any) => {
  try {
    // 处理两种调用方式：传递用户对象或用户 ID
    const userId = typeof user === "number" ? user : user?.id || user?.userId;
    if (!userId) {
      throw new Error("未提供有效的用户 ID");
    }

    const res = await getUserInfo(userId);

    const data = res.data || res;

    // 确保 sex 和 status 都是数字类型
    const sexValue =
      data.sex !== undefined && data.sex !== null
        ? Number(data.sex)
        : 1;

    const statusValue =
      data.status !== undefined && data.status !== null
        ? Number(data.status)
        : 1;

    form.value = {
      id: data.id,
      account: data.account,
      name: data.name,
      phone: data.phone,
      qq: data.qq,
      sex: sexValue,
      password: "",
      confirmPassword: "",
      email: data.email,
      status: statusValue,
    };
  } catch (e: any) {
    console.error("Failed to load user data:", e);
    const errorMsg = e?.response?.data?.message || e?.message || "加载用户失败";
    ElMessage.error(errorMsg);
    throw e;
  }
};

const handleCancel = () => {
  visible.value = false;
};

const handleSubmit = async () => {
  // 表单验证
  if (!formRef.value) {
    return;
  }

  try {
    await formRef.value.validate();
  } catch (error) {
    ElMessage.warning("请检查表单填写是否正确");
    return;
  }

  // 验证密码一致性
  if (isAdd.value) {
    // 新增用户时，密码必填
    if (!form.value.password) {
      ElMessage.error("请输入密码");
      return;
    }
    if (form.value.password !== form.value.confirmPassword) {
      ElMessage.error("两次输入的密码不一致");
      return;
    }
  } else {
    // 编辑用户时，如果填写了密码，则必须填写确认密码且一致
    if (form.value.password) {
      if (form.value.password !== form.value.confirmPassword) {
        ElMessage.error("两次输入的密码不一致");
        return;
      }
    }
  }

  try {
    if (isAdd.value) {
      // 新增用户
      const submitData: any = {
        account: form.value.account,
        name: form.value.name,
        phone: form.value.phone,
        qq: form.value.qq,
        sex: form.value.sex,
        email: form.value.email,
        status: form.value.status,
        password: form.value.password,
      };

      await addUser(submitData);
      ElMessage.success("添加成功");
    } else {
      // 编辑用户
      if (!form.value.id || form.value.id === 0) {
        ElMessage.error("用户ID不能为空");
        return;
      }

      const submitData: any = {
        id: form.value.id,
        account: form.value.account,
        name: form.value.name,
        phone: form.value.phone,
        qq: form.value.qq,
        sex: form.value.sex,
        email: form.value.email,
        status: form.value.status,
      };

      // 只有在填写了密码时才添加到提交数据中
      if (form.value.password) {
        submitData.password = form.value.password;
      }

      await editUser(form.value.id, submitData);
      ElMessage.success("更新成功");
    }

    visible.value = false;
    emit("submit");
  } catch (e: any) {
    const errorMsg = e?.response?.data?.message || e?.message || "操作失败";
    ElMessage.error(errorMsg);
  }
};

// 暴露方法给父组件
defineExpose({
  loadUserData,
  openAdd: () => {
    isAdd.value = true;
    form.value = {
      id: 0,
      account: "",
      name: "",
      phone: "",
      qq: "",
      sex: 1,
      password: "",
      confirmPassword: "",
      email: "",
      status: 1,
    };
    visible.value = true;
    // 清除表单验证
    if (formRef.value) {
      formRef.value.clearValidate();
    }
  },
  openEdit: (user: any) => {
    isAdd.value = false;
    visible.value = true;
    // 清除表单验证
    if (formRef.value) {
      formRef.value.clearValidate();
    }
    // 异步加载用户详细信息
    loadUserData(user);
  },
  open: (user?: any) => {
    if (user) {
      isAdd.value = false;
      loadUserData(user);
    } else {
      isAdd.value = true;
      form.value = {
        id: 0,
        account: "",
        name: "",
        phone: "",
        qq: "",
        sex: 1,
        password: "",
        confirmPassword: "",
        email: "",
        status: 1,
      };
    }
    visible.value = true;
    // 清除表单验证
    if (formRef.value) {
      formRef.value.clearValidate();
    }
  },
});
</script>

<style lang="less" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
