<template>
	<div class="list">
		<div v-for="(item, index) in renderData"
		     :key="deep+'-'+index"
		     @click.stop="selectItem(item)"
		     @dblclick.stop="dblclick(item)"
		     :title="item.name">
			<div class="line-holder" :class="{selected: item.selected}" :style="getOffsetLeft()">
				<a-icon :type="item.open ? 'down' : 'right'"
				        :style="{opacity: isDir(item) && item.children ? 1 : 0}"
				        @click.stop="clickFolder(item)"
				        v-if="!thisFolderOnlyHasFiles"
				/>
				<a-icon class="icon" v-if="isDir(item)" :type="getIcon(item)" />
				<IconFont class="icon" v-else :type="getIcon(item)"></IconFont>
				<span>{{ item.name }}</span>
			</div>
			<TreeTraverse v-if="item.children && item.open"
			              :list="item.children"
			              :deep="deep + 1"
			              :padding="padding + 12"
			              @select="selectItem"
			></TreeTraverse>
		</div>
	</div>
</template>

<script>
import TreeTraverse from './TreeTraverse.vue';
import { Icon } from 'ant-design-vue';
const IconFont = Icon.createFromIconfontCN({
	scriptUrl: '//at.alicdn.com/t/font_2664462_d3sbv3y85m4.js',
});
export default {
	name: "TreeTraverse",
	components: {
		TreeTraverse, IconFont
	},
	props: {
		list: Array,
		deep: Number,
		ancestors: undefined, // 祖宗
		padding: {
			type: Number,
			default: 10
		}
	},
	watch: {
		list: {
			handler (val) {
				this.renderData = this.filterList(val);
			},
			immediate: true
		}
	},
	data: function () {
		return {
			currentSelectedItem: null,
			renderData: []
		}
	},
	computed: {
		thisFolderOnlyHasFiles() {
			// return this.list.every(item => item.type === 'file')
			return false
		}
	},
	methods: {
		filterList (list) {
			const folder = [];
			const file = [];
			list.forEach(item => {
				item = {
					...item,
					selected: false,
					open: false
				};
				item.type === 'directory' ? folder.push(item) : file.push(item);
			});
			return folder.concat(file)
		},
		isDir(item) {
			return item.type === "directory";
		},
		isOpen() {
			return item.open
		},
		getIcon (item) {
			if (item.type === "directory") {
				return item.open ? 'folder-open' : 'folder'
			} else {
				let type = item.name.split('.');
				type = type[type.length - 1];
				switch (type) {
					case "html": { return 'editorIcon-html' }
					case "json": { return 'editorIcon-json' }
					case "js": { return 'editorIcon-nodejs' }
					case "md": { return 'editorIcon-read' }
					case "png": { return 'editorIcon-i-img' }
					case "ico": { return 'editorIcon-i-img' }
					case "video": { return 'editorIcon-video' }
					case "vue": { return 'editorIcon-Vue' }
					case "gitignore": {return 'editorIcon-file-no-access-l'}
					case "lock": { return 'editorIcon-lock' }
					default: { return 'editorIcon-file' }
				}
			}
		},
		clickFolder(item) {
			item.open = !item.open;
			// this.$forceUpdate();
		},
		// selectItem 选中对象
		selectItem(item) {
			if (this.ancestors === undefined) {
				this.$emit('select', item);
			} else {
				if (this.currentSelectedItem) {
					this.currentSelectedItem.selected = false;
				}
				item.selected = true;
				this.currentSelectedItem = item;
			}
		},
		getOffsetLeft() {
			return {
				paddingLeft: this.padding + 'px'
			}
		},
		dblclick(item) {
			if (!this.isDir(item)) {
				this.bus.$emit('readfile', {
					type: 'current',
					path: item.path,
				}, res => {
					this.bus.$emit('tooltip', {
						component: () => import('@/components/Editor/Editor'),
						props: {
							content: res.data
						}
					})
				})
			} else {
				item.open = !item.open;
			}
		}
	}
}
</script>

<style scoped lang="scss">
.list {
	text-align: left;
	.selected {
		background: #2c3e50;
	}
}
</style>
