<script setup lang="ts">
/**
 * 用户管理链路操作对话框
 *
 * 功能说明：
 * - 新增用户管理链路
 * - 编辑用户管理链路
 * - 表单验证和提交
 *
 * 表单字段：
 * - 上级用户：必填，下拉选择，默认当前登录用户
 * - 下级用户用户：必填，下拉选择，默认空
 * - 生效开始时间：可选
 * - 生效结束时间：可选
 * - 备注：可选
 *
 * 用户列表通过 props 传入，由父组件统一管理
 */

import { computed, nextTick, ref, watch } from 'vue';
import {
  fetchCreateUserManagementRelation,
  fetchGetCandidateSubordinateUsers,
  fetchGetUserManagementRelation,
  fetchUpdateUserManagementRelation
} from '@/service/api';
import { useAuthStore } from '@/store/modules/auth';
import { useForm, useFormRules } from '@/hooks/common/form';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';

defineOptions({ name: 'RelationOperateDialog' });

/**
 * 组件 Props 定义
 */
interface Props {
  /** 操作类型：新增或编辑 */
  operateType: UI.TableOperateType;
  /** 编辑时的行数据 */
  rowData?: Api.SystemManage.UserManagementRelation | null;
  /** 用户列表，由父组件统一提供 */
  userList: Api.SystemManage.UserSimple[];
  /** 是否从树节点点击新增（用于控制上级用户下拉框禁用） */
  isAddFromTreeNode?: boolean;
}

const props = defineProps<Props>();

/**
 * 组件 Emits 定义
 *
 * 使用 Vue 3.5 标准语法
 */
const emit = defineEmits<{
  /** 提交事件：返回提交后的关系 ID */
  submitted: [relationId: string];
}>();

/**
 * 对话框可见性，支持 v-model 双向绑定
 */
const visible = defineModel<boolean>('visible', {
  default: false
});

// 表单相关
const { formRef, validate } = useForm();
const { createRequiredRule } = useFormRules();

// 获取当前登录用户信息
const authStore = useAuthStore();

// 加载和提交状态
const detailLoading = ref(false);
const submitting = ref(false);

// 候选下级用户列表
const candidateSubordinateUsers = ref<Api.SystemManage.UserSimple[]>([]);

// 计算属性：是否为编辑模式
const isEdit = computed(() => props.operateType === 'edit');

/**
 * 加载候选下级用户列表
 *
 * 获取所有还未绑定上级的用户，用于新增时的下级用户下拉框
 */
async function loadCandidateSubordinateUsers() {
  const { error, data } = await fetchGetCandidateSubordinateUsers();

  if (error) {
    candidateSubordinateUsers.value = [];
    return;
  }

  candidateSubordinateUsers.value = data || [];
}

/**
 * 计算下级用户下拉框选项
 *
 * 新增模式使用候选下级用户列表，编辑模式使用所有用户列表
 */
const subordinateUserOptions = computed<Api.SystemManage.UserSimple[]>(() => {
  if (isEdit.value) {
    return props.userList;
  }
  return candidateSubordinateUsers.value;
});

/**
 * 计算对话框标题
 */
const title = computed(() => {
  const titleMap: Record<UI.TableOperateType, string> = {
    add: '新增用户管理链路',
    edit: '编辑用户管理链路'
  };

  return titleMap[props.operateType];
});

/**
 * 表单模型类型
 */
type Model = Api.SystemManage.UserManagementRelationSaveReqVO;

/**
 * 表单模型
 */
const model = ref(createDefaultModel());

/**
 * 创建默认表单模型
 *
 * @returns 默认模型对象
 */
function createDefaultModel(): Model {
  return {
    managerUserId: null,
    subordinateUserId: null,
    effectiveFrom: null,
    effectiveUntil: null,
    remark: null
  };
}

/**
 * 表单验证规则
 */
const rules = {
  managerUserId: createRequiredRule('请选择上级用户'),
  subordinateUserId: createRequiredRule('请选择下级用户')
} satisfies Record<string, App.Global.FormRule>;

/**
 * 关闭对话框
 */
function closeModal() {
  visible.value = false;
}

async function resetValidateState() {
  await nextTick();
  formRef.value?.clearValidate();
}

function resolveDefaultManagerUserId() {
  if (props.rowData?.managerUserId) {
    return props.rowData.managerUserId;
  }

  const currentUserId = authStore.userInfo.userId;
  const currentUserName = authStore.userInfo.userName;

  if (!currentUserId) {
    return undefined;
  }

  const matchedById = props.userList.find(user => user.id === currentUserId);

  if (matchedById) {
    return matchedById.id;
  }

  return currentUserName ? props.userList.find(user => user.nickname === currentUserName)?.id : undefined;
}

/**
 * 初始化表单模型
 *
 * 编辑模式下加载详情数据，新增模式下设置默认值
 */
// eslint-disable-next-line complexity
async function initModel() {
  model.value = createDefaultModel();

  if (!isEdit.value) {
    // 新增模式：设置上级用户
    // 优先使用 rowData 中传入的上级用户 ID（如从树形节点新增）
    // 否则使用当前登录用户
    let managerUserIdToSet = resolveDefaultManagerUserId();

    if (props.rowData && props.rowData.managerUserId) {
      // 从树形节点点击新增，上级为当前节点用户
      managerUserIdToSet = props.rowData.managerUserId;
    } else if (authStore.userInfo.userId) {
      // 头部新增，上级为当前登录用户
      const currentUserId = authStore.userInfo.userId;
      const currentUserName = authStore.userInfo.userName;

      // 先尝试通过 ID 匹配
      let currentUser = props.userList.find(user => user.id === currentUserId);

      // 如果 ID 匹配失败，尝试通过用户名匹配
      if (!currentUser && currentUserName) {
        currentUser = props.userList.find(user => user.nickname === currentUserName);
      }

      if (currentUser) {
        managerUserIdToSet = currentUser.id;
      }
    }

    if (managerUserIdToSet) {
      model.value.managerUserId = managerUserIdToSet;
    }

    await resetValidateState();
    return;
  }

  // 编辑模式：加载详情数据
  if (!props.rowData) {
    await resetValidateState();
    return;
  }

  const relationId = props.rowData.id;

  if (!relationId) {
    await resetValidateState();
    return;
  }

  detailLoading.value = true;

  try {
    const { error, data } = await fetchGetUserManagementRelation(relationId);

    if (data !== null && !error) {
      model.value = {
        id: data.id ?? undefined,
        managerUserId: data.managerUserId,
        subordinateUserId: data.subordinateUserId,
        effectiveFrom: data.effectiveFrom ? new Date(data.effectiveFrom).getTime() : null,
        effectiveUntil: data.effectiveUntil ? new Date(data.effectiveUntil).getTime() : null,
        remark: data.remark ?? null
      };
    }
  } finally {
    detailLoading.value = false;
  }

  await resetValidateState();
}

/**
 * 处理表单提交
 *
 * 验证通过后调用创建或更新接口
 */
async function handleSubmit() {
  await validate();

  submitting.value = true;

  try {
    const submitData: Api.SystemManage.UserManagementRelationSaveReqVO = {
      ...model.value
    };

    const editRelationId = props.rowData?.id ?? null;

    if (isEdit.value && editRelationId) {
      const { error } = await fetchUpdateUserManagementRelation({ ...submitData, id: editRelationId });

      if (error) {
        return;
      }

      window.$message?.success('淇敼鎴愬姛');
      closeModal();
      emit('submitted', editRelationId);
      return;
    }

    const { error, data } = await fetchCreateUserManagementRelation(submitData);

    if (error || !data) {
      return;
    }

    window.$message?.success(isEdit.value ? '修改成功' : '新增成功');

    closeModal();
    emit('submitted', data);
  } finally {
    submitting.value = false;
  }
}

/**
 * 监听对话框可见性
 *
 * 打开时初始化表单并加载候选用户
 */
watch(visible, async value => {
  if (value) {
    initModel();

    // 如果是新增模式，加载候选下级用户（每次打开都重新加载，避免缓存）
    if (!isEdit.value) {
      await loadCandidateSubordinateUsers();
    }
  }
});
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    :title="title"
    preset="sm"
    :loading="detailLoading"
    :confirm-loading="submitting"
    :scrollbar="false"
    @confirm="handleSubmit"
  >
    <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
      <ElRow :gutter="16">
        <ElCol :span="24">
          <ElFormItem label="上级用户" prop="managerUserId">
            <ElSelect
              v-model="model.managerUserId"
              class="w-full"
              placeholder="请选择上级用户"
              filterable
              :disabled="props.operateType === 'add' && props.isAddFromTreeNode"
            >
              <ElOption v-for="user in props.userList" :key="user.id" :label="user.nickname" :value="user.id" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="下级用户" prop="subordinateUserId">
            <ElSelect
              v-model="model.subordinateUserId"
              class="w-full"
              placeholder="请选择下级用户"
              filterable
              :disabled="isEdit"
            >
              <ElOption v-for="user in subordinateUserOptions" :key="user.id" :label="user.nickname" :value="user.id" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow :gutter="16">
        <ElCol :span="24">
          <ElFormItem label="生效开始时间" prop="effectiveFrom" style="width: 100%">
            <ElDatePicker
              v-model="model.effectiveFrom"
              class="w-full"
              type="datetime"
              placeholder="请选择生效开始时间"
              value-format="x"
              style="width: 100%"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="生效结束时间" prop="effectiveUntil" style="width: 100%">
            <ElDatePicker
              v-model="model.effectiveUntil"
              class="w-full"
              type="datetime"
              placeholder="请选择生效结束时间"
              value-format="x"
              style="width: 100%"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow :gutter="16">
        <ElCol :span="24">
          <ElFormItem label="备注" prop="remark">
            <ElInput v-model="model.remark" type="textarea" :rows="4" placeholder="请输入备注" />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </BusinessFormDialog>
</template>

<style scoped></style>
