<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { useRequest } from '@/hooks/request';
import { getSubOrgsByToken } from '@/api';

import type { DataNode, TreeProps } from 'ant-design-vue/es/tree';
import type { Organization } from '@/types';

const treeStructure = ref<DataNode[]>([]);
const { handleRequest } = useRequest();
const expandedKeys = ref<number[]>([]); // 初始展开父节点
const selectedKeys = ref<number[]>([]); // 选中的节点

const fieldNames: TreeProps['fieldNames'] = {
  children: 'subOrgs',
  title: 'orgName',
  key: 'id',
};

const emit = defineEmits<{
  change: [id: number];
}>();
const transformTreeData = (data: Organization[]): DataNode[] => {
  return data.map((item) => ({
    ...item,
    key: item.id, // 关键：将 id 映射到 key
    title: item.orgName,
    children: item.subOrgs ? transformTreeData(item.subOrgs) : undefined,
  }));
};

const getParentIds = (nodes: Organization[]): number[] => {
  const parentIds: number[] = [];

  const traverse = (node: Organization) => {
    // 判断是否为有效父节点：存在子节点且非空数组
    if (node.subOrgs?.length) {
      parentIds.push(node.id);
      // 继续遍历子节点
      node.subOrgs.forEach((child) => traverse(child));
    }
  };

  nodes.forEach((node) => traverse(node));
  return parentIds;
};

const addMenu = () => {
  if (selectedKeys.value.length) {
    emit('change', selectedKeys.value[0]);
  } else {
    emit('change', treeStructure.value[0].id);
    selectedKeys.value.push(treeStructure.value[0].id);
  }
};

onMounted(() => {
  selectedKeys.value = [];
  handleRequest(async () => {
    const data = await getSubOrgsByToken();
    treeStructure.value = transformTreeData(data);
    expandedKeys.value = getParentIds(data);
    selectedKeys.value.push(data[0].id);
    emit('change', data[0].id);
  });
});
</script>

<template>
  <div>
    <div class="content">
      <div class="content-text">组织架构</div>
      <ATree
        v-model:expanded-keys="expandedKeys"
        v-model:selected-keys="selectedKeys"
        :tree-data="treeStructure"
        block-node
        @select="addMenu"
        class="tree-organization"
        :field-names="fieldNames"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.content) {
  .ant-tree-list-holder-inner > div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 5px;
  }

  .ant-tree-list-holder-inner > div > .ant-tree-checkbox {
    margin-block-start: 0;
  }

  .ant-tree-list-holder-inner > div > .ant-tree-switcher > span {
    margin-top: 13px;
  }
}

.content-text {
  margin-bottom: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #333;
  text-align: left;
}

.content {
  width: 246px;
  height: calc(100vh - 80px);
  padding: 16px;
  margin-right: 16px;
  background: #fff;
  border-radius: 16px;
}
</style>
