<template>
	<div class="file-tree">
		<TreeTraverse :list="fileList" ancestors :deep="1"></TreeTraverse>
	</div>
</template>

<script>
import TreeTraverse from "@/components/FileTree/TreeTraverse";
import config from '@/config.json';

export default {
	name: "FileTree",
	components: {
		TreeTraverse
	},
	data: function () {
		return {
			fileList: []
		}
	},
	mounted() {
		this.fetchProjectList();
	},
	methods: {
	    async fetchProjectList() {
	    	let preData = await fetch(window.api + '/filepath')
			    .then(response => response.json());

	    	const traverse = (arr, handler) => {
	    	    arr.forEach(item => {
	    	    	if (Array.isArray(item)) {
	    	    		traverse(arr, handler)
			        } else {
	    	    		handler(item);
	    	    		if(item.children) {
	    	    			traverse(item.children, handler);
				        }
			        }
		        })
	    	}
		    traverse(preData.list, item => {
			    item.relativePath = item.path.replace(preData.root + '\\', '');
			    item.name = item.relativePath.split('\\');
			    item.name = item.name[item.name.length - 1];
		    });
		    this.fileList = preData.list;
	    	console.log(preData);
	    },
		onSelect() {

		},
		onExpand() {

		}
	},
}
</script>

<style scoped lang="scss">
.file-tree {
	padding: 10px 0;
	font-size: 16px;
	height: 100%;
	overflow: auto;
}
</style>
