<template>
  <div
    ref="tree"
    class="organization-tree flex relative items-center py-4"
    :class="foldFlag ? '' : 'pl-4'"
  >
    <div
      class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
      :class="foldFlag ? '' : '-right-4'"
      @click="handleFold"
    >
      <div>
        <CaretRightOutlined
          :class="[foldFlag ? '' : 'rotate-180']"
          class="transform fill-gray-100"
        />
      </div>
    </div>
    <div :style="{ width: foldFlag ? '0px' : '100%' }" class="bg-white mr-0 overflow-hidden h-full">
      <BasicTree
        title="组织列表"
        toolbar
        search
        :clickRowToExpand="false"
        :treeData="treeData"
        :expandedKeys="treeExpandData"
        :replaceFields="{ key: 'id', title: 'name' }"
        :selectedKeys="selectedKeys"
        @select="handleSelect"
        v-bind="$attrs"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="OrganizationIdTree">
  import { onMounted, ref, unref } from 'vue';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { getOrganizationList } from '/@/api/system/system';
  import { CaretRightOutlined } from '@ant-design/icons-vue';
  import { getBoundingClientRect } from '/@/utils/domUtils';

  const tree = ref<Nullable<HTMLDivElement>>();
  const emit = defineEmits(['select']);
  const treeData = ref<TreeItem[]>([]);
  const selectedKeys = ref<string[]>();
  const treeExpandData = ref([]);
  //获取所有父级id
  function findForAllId(data = [], arr = []) {
    for (const item of data) {
      arr.push(item.id);
    }
    return arr;
  }
  function handleSelect(keys) {
    emit('select', keys[0]);
  }
  function resetOrganization() {
    selectedKeys.value = [];
  }

  const foldFlag = ref(true);
  const handleFold = () => {
    foldFlag.value = !unref(foldFlag);
  };

  const setTreeHeight = () => {
    const rect = getBoundingClientRect(unref(tree)!);
    if (rect) {
      const { y } = rect as DOMRect;
      const clientHight = document.documentElement.clientHeight;
      const maxHeight = clientHight - y;
      if (unref(tree)) unref(tree)!.style.height = `${maxHeight}px`;
    }
  };

  onMounted(async () => {
    treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
    const getAllIds = findForAllId(treeData.value as any, []);
    //设置要展开的id
    treeExpandData.value = getAllIds;

    setTreeHeight();
  });
  defineExpose({
    resetOrganization,
  });
</script>

<style scoped lang="less">
  .organization-tree {
    max-height: 100vh;

    .expand {
      opacity: 0;
    }

    &:hover {
      .expand {
        opacity: 1;
      }
    }
  }
</style>