<template>
  <el-tree-select
      v-model="selectedValue"
      :data="treeData"
      :props="treeProps"
      show-checkbox
      @check="handleCheck"
  />
</template>


<script setup>
import {
  testGetParamMethod,
  testGetParamMethodList,
  testGetParamMethodqs,
  testPostUseBodyMethod,
  testPostUseParamMethod
} from "@/api/test.js";
import { ref, reactive, getCurrentInstance, nextTick, onMounted} from 'vue';

const { proxy } = getCurrentInstance();

onMounted(() => {
  console.log(111)
  //  方式1 post方法 @RequestParam("ids") List<String> ids
  // 可以
  // Spring 内部有个转换机制，会自动把逗号分隔的字符串拆分成 List
/*  testPostUseParamMethod({
    ids: "122ss,22s2,3ss11aa",
    str: 1
  })*/
  //可以
  // 当你直接将数组作为一个值传入 FormData 或 URLSearchParams 的append 方法时，
  // JavaScript 会自动将数组转换为字符串，默认行为是调用数组的 toString() 方法，
  // 这个方法会将数组元素以逗号分隔拼接成一个字符串。

  //方式二 post方法 @RequestBody 实体内部 List<String> ids;

//可以
  // testPostUseParamMethod({
  //   ids: [1, 2, 3],
  //   str: 1
  // })
//可以
  // testPostUseBodyMethod({
  //   ids: [1, 2, 3],
  //   str: 1
  // })
  // 不可以
  // 在反序列化 JSON 时，试图将一个字符串（例如："122ss,22s2,3ss11aa"）转换成一个 ArrayList 类型，
  // 但它找不到合适的构造函数或工厂方法来从单个字符串创建一个 List 对象。
/*  testPostUseBodyMethod({
    ids: "122ss,22s2,3ss11aa",
    str: 1
  })*/
  // get 方法 @RequestParam("ids") List<String> ids
  // ids = 122ss,22s2,3ss11a
  testGetParamMethod({
    ids: "122ss,22s2,3ss11aa",
    str: 1
  })
  //不行会变成 ids[]=1&ids[]=2&ids[]=3&str=1
/*  testGetParamMethod({
    ids:  [1, 2, 3],
    str: 1
  })*/

  //手动处理
  //ids=1&ids=2&ids=3
  testGetParamMethodList({
    ids:  [1, 2, 3],
    str: 1
  })

  //ids=1&ids=2&ids=3
  testGetParamMethodqs({
    ids:  [1, 2, 3],
    str: 1
  })






})

// 树形数据
const treeData = ref([
  {
    id: 1,
    label: '父级1',
    children: [
      { id: 11, label: '子级1-1' },
      { id: 12, label: '子级1-2' },
      {
        id: 13,
        label: '子级1-3',
        children: [
          { id: 131, label: '子子级1-3-1' },
          { id: 132, label: '子子级1-3-2' },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '父级2',
    children: [
      { id: 21, label: '子级2-1' },
      { id: 22, label: '子级2-2' },
    ],
  },
]);

// 树形选择的配置属性
const treeProps = {
  value: 'id',
  label: 'label',
  children: 'children',
};

// 当前选中的值
const selectedValue = ref(null);

// 处理节点选中事件
const handleCheck = (currentNode, checkedNodes) => {
  // 获取所有选中的节点
  const checked = checkedNodes.checkedNodes;

  // 用于存储最终的叶子节点id
  const finalIds = new Set(); // 使用Set避免重复

  checked.forEach(node => {
    // 判断是否是叶子节点（即没有子节点）
    if (!node.children || node.children.length === 0) {
      //在这 可以 node.属性 去个性化判断
      finalIds.add(node.id);
    } else {
      // 如果是父级节点，递归获取其下的叶子节点id
      const leafIds = getLeafIds(node, new Set());
      leafIds.forEach(id => finalIds.add(id));
    }
  });

  console.log('最终的叶子节点id列表：', Array.from(finalIds));
};

// 递归获取叶子节点id
const getLeafIds = (node, visited) => {
  const ids = new Set();
  if (node.children) {
    node.children.forEach(child => {
      if (!child.children || child.children.length === 0) {
        //同理这里 //在这 可以 child.属性 去个性化判断
        // 如果是叶子节点，添加其id
        ids.add(child.id);
      } else {
        // 如果不是叶子节点，继续递归
        if (!visited.has(child.id)) {
          visited.add(child.id);
          const childIds = getLeafIds(child, visited);
          childIds.forEach(id => ids.add(id));
        }
      }
    });
  }
  return ids;
};

</script>

<style lang="scss" scoped>
.activity-center {
  max-width: 1200px;
  margin: 0 auto;
}
</style>
