<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { treeDept, postListTreeWithUserApi } from "@/api/department";
import { postAssignmentUser } from "@/api/userSetting";
const $emit = defineEmits(["handleClick"]);
const dialogVisibleAdd = ref(false);
postListTreeWithUserApi();
const form = reactive({
  sourceCodes: [],
  targetCodes: [],
  linkAction: "link",
  correlatedModel: "groupUser"
});
const handleClose = () => {
  dialogVisibleAdd.value = !dialogVisibleAdd.value;
};
const filterText = ref("");
// 添加部门保存
const saveDepartment = () => {
  if (form.sourceCodes.length > 0) {
    postAssignmentUserApi();
  } else {
    ElMessage.error("请选择人员");
  }
};
const open = (item, list) => {
  form.sourceCodes = [];
  form.targetCodes = [];
  dialogVisibleAdd.value = true;
  filterText.value = "";
  console.log(item, list);
  if (treeRef.value) {
    console.log(12345);
    treeRef.value.setCheckedKeys([]);
  }
  form.targetCodes.push(item.groupCode);
};
const postAssignmentUserApi = async () => {
  // 清除为null的数据
  let sourceCodes = [];
  form.sourceCodes.map(item => {
    if (item) {
      sourceCodes.push(item);
    }
  });
  form.sourceCodes = sourceCodes;
  const { code, msg } = await postAssignmentUser(form);
  if (code == 200) {
    $emit("handleClick");
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    dialogVisibleAdd.value = false;
  } else {
    // ElMessage.error(msg);
  }
};
// 树选择
const defaultProps = {
  label: "userNameNew",
  value: "userCodeNew",
  children: "children"
};
const tree = ref(null);

const handleCheck = (node, checked) => {
  form.sourceCodes = [];
  checked.checkedNodes.forEach(item => {
    form.sourceCodes.push(item.userCode);
  });
  // form.targetCodes = [];
  // checked.checkedNodes.forEach(item => {
  //   form.targetCodes.push(item.userCode);
  // });
};
const filterNode = (value: string, data: any) => {
  if (!value) return true; // 如果没有过滤关键词，显示所有节点
  return data.userNameNew && data.userNameNew.includes(value); // 使用 userName 进行匹配
};
const treeRef = ref();

watch(filterText, val => {
  treeRef.value!.filter(val);
});
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogVisibleAdd"
      title="人员"
      width="500"
      :before-close="handleClose"
    >
      <el-input
        v-model="filterText"
        placeholder="请搜索员工姓名"
        class="mb-2"
        :prefix-icon="Search"
      />
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        :data="treeDept"
        show-checkbox
        node-key="userCodeNew"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="handleCheck"
      />
      <!-- :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveDepartment"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
