<script setup lang="ts">
/**
 * 用户管理链路搜索组件
 *
 * 功能说明：
 * - 提供上级和下级用户下拉选择
 * - 支持搜索和重置操作
 * - 与树形结构数据联动
 *
 * 组件特性：
 * - 使用 TableSearchPanel 统一样式
 * - 支持 v-model 双向绑定
 * - 触发 search 和 reset 事件
 * - 用户列表通过 props 传入，由父组件统一管理
 */

import { defineEmits, defineModel, defineOptions } from 'vue';

defineOptions({ name: 'RelationSearch' });

/**
 * 组件 Emits 定义
 *
 * 使用 Vue 3.5 标准语法
 */
const emit = defineEmits<{
  /** 重置事件：清空搜索条件 */
  reset: [];
  /** 搜索事件：执行搜索 */
  search: [];
}>();

/**
 * 组件 Props 定义
 */
interface Props {
  /** 用户列表，由父组件统一提供 */
  userList: Api.SystemManage.UserSimple[];
}

defineProps<Props>();

/**
 * 搜索参数模型，支持双向绑定
 */
const model = defineModel<Api.SystemManage.UserManagementRelationQueryReqVO>('model', { required: true });

/**
 * 重置搜索
 */
function reset() {
  emit('reset');
}

/**
 * 执行搜索
 */
function search() {
  emit('search');
}
</script>

<template>
  <TableSearchPanel :model="model" :action-col-lg="8" @reset="reset" @search="search">
    <!--    <ElCol :lg="8" :md="12" :sm="12">-->
    <!--      <ElFormItem label="上级用户" prop="managerUserId">-->
    <!--        <ElSelect-->
    <!--          v-model="model.managerUserId"-->
    <!--          class="w-full"-->
    <!--          placeholder="请选择上级用户"-->
    <!--          clearable-->
    <!--          filterable-->
    <!--        >-->
    <!--          <ElOption-->
    <!--            v-for="user in userList"-->
    <!--            :key="user.id"-->
    <!--            :label="user.nickname"-->
    <!--            :value="user.id"-->
    <!--          />-->
    <!--        </ElSelect>-->
    <!--      </ElFormItem>-->
    <!--    </ElCol>-->
    <ElCol :lg="8" :md="12" :sm="12">
      <ElFormItem label="用户名" prop="subordinateUserId" style="margin-left: -50px">
        <ElSelect v-model="model.subordinateUserId" class="w-full" placeholder="请选择用户名" clearable filterable>
          <ElOption v-for="user in userList" :key="user.id" :label="user.nickname" :value="user.id" />
        </ElSelect>
      </ElFormItem>
    </ElCol>
  </TableSearchPanel>
</template>

<style scoped>
:deep(.el-form-item__label) {
  width: 100px !important;
}

:deep(.el-row) {
  margin: 0 0 -15px 0;
}
</style>
