<template>
  <div 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';

  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);
  };

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

<style scoped lang="less">
  .organization-tree {
    .expand {
      opacity: 0;
    }

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