<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Test",
});
</script>

<script setup lang="ts">
async function getDirectory() {
  try {
    const dirHandle = await window?.showDirectoryPicker();
    console.log("dirHandle", dirHandle);
    console.log("dirHandle", await dirHandle.getDirectoryHandle());
    return dirHandle;
  } catch (err) {
    console.error("Error accessing directory:", err);
  }
}

// 是否是隐藏文件夹
const hasHiddenFolder = (path: string) => {
  return path.split("/").some((part) => part.startsWith("."));
};

const processDirectory = async (
  dirHandle: FileSystemDirectoryHandle,
  path: string = "",
  callBack: (fileWithPath: File) => Promise<void>,
) => {
  // 遍历目录中的所有项
  for await (const entry of dirHandle.values()) {
    // 如果项的名称以.开头，则跳过该项
    if (entry.name.startsWith(".")) continue;

    // 获取项的路径
    const entryPath = path ? `${path}/${entry.name}` : entry.name;

    // 如果项的路径包含隐藏文件夹，则跳过该项
    if (hasHiddenFolder(entryPath)) continue;

    // 如果项是文件
    if (entry.kind === "file") {
      // 获取文件
      const file = await entry.getFile();
      // 创建带有路径的文件
      const fileWithPath = new File([file], entryPath, { type: file.type });

      if (callBack) {
        await callBack(fileWithPath);
      }

      // 如果项是目录
    } else if (entry.kind === "directory") {
      // 如果目录的名称不以.开头，则递归处理目录
      if (!entry.name.startsWith(".")) {
        await processDirectory(entry, entryPath, callBack);
      }
    }
  }
};
</script>

<template>
  <div>
    test

    <a-button @click="getDirectory">test</a-button>
  </div>
</template>

<style lang="scss" scoped></style>
