<template>
  <div style="padding: 30px; background: #fff; min-height: 500px">
    <a-card title="自定义组件测试页面" :bordered="false">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="已选择的用户ID">
              <a-input v-model:value="formData.userIds" readonly placeholder="选择后自动填充" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="选择用户">
              <a-input-search v-model:value="formData.userNames" placeholder="请选择用户" enter-button="选择" readonly @search="openUserModal" />
            </a-form-item>
          </a-col>
        </a-row>

        <div style="margin-top: 20px">
          <p><strong>当前选中详情（JSON格式）：</strong></p>
          <pre>{{ JSON.stringify(selectedRows, null, 2) }}</pre>
        </div>
      </a-form>
    </a-card>

    <SzUserSelectByDeptRoleSecurityModal :open="modalVisible" @confirm="handleConfirm" @cancel="handleCancel" />
    <a-card title="根据部门，角色选满足对应条件用户组件" :bordered="false">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="已选择的用户">
              <ApiSelect
                placeholder="请选择用户（可多选）"
                mode="multiple"
                :api="getUserListApi"
                :params="queryParam"
                labelField="username"
                valueField="id"
                v-model:value="selectedUsers"
                @change="handleUserChange"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card title="改造后的选部门组件，根据部门类别返回二级部门" :bordered="false">
      <a-form layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="已选择的部门">
              <SzSelectDept v-model:value="formDeptData.deptIds" labelKey="departName" rowKey="id" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import SzUserSelectByDeptRoleSecurityModal from '../../components/semri/userComponent/modal/SzUserSelectByDeptRoleSecurityModal.vue';
  import { ApiSelect } from '@/components/Form';
  import { defHttp } from '@/utils/http/axios';
  import SzSelectDept from '@/components/semri/deptComponent/SzSelectDept.vue';

  const selectedUsers = ref([]);
  const modalVisible = ref(false);
  const selectedRows = ref([]);
  const formData = reactive({ userIds: '', userNames: '' });
  const formDeptData = reactive({
    deptIds: '', // 如果是字符串，send函数会自动join成 "id1,id2"
  });

  const queryParam = reactive({
    deptId: '1582683631414632450',
    roleId: '2039894374372970498',
    secretLevel: 3,
  });

  // 3. 定义 API 请求函数（对接你刚才写的 Controller 接口）
  const getUserListApi = (params) => {
    return defHttp.get({
      url: '/sys/user/queryUserByDeptAndROle', // 替换为你真实的接口路径
      params,
    });
  };

  function handleUserChange(val) {
    console.log('当前选中的值:', val);
  }

  function openUserModal() {
    modalVisible.value = true;
  }

  // 【关键改进点 2】确认后关闭弹窗
  function handleConfirm(rows) {
    console.log('测试页面接收到数据:', rows);
    selectedRows.value = rows;

    if (rows && rows.length > 0) {
      formData.userIds = rows.map((item) => item.id).join(',');
      formData.userNames = rows.map((item) => item.realname).join(',');
    } else {
      formData.userIds = '';
      formData.userNames = '';
    }
    // 成功接收数据后关闭窗口
    modalVisible.value = false;
  }

  // 【关键改进点 3】处理取消按钮逻辑
  function handleCancel() {
    console.log('用户取消了选择');
    modalVisible.value = false;
  }
</script>

<style scoped>
  pre {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    max-height: 200px;
    overflow: auto;
  }
</style>
