<template>
	<view class="niu-tree component">
		<view class="niu-tree__item" v-for="(item,index) in list" :key="index">
			<view class="niu-tree__title" @click="clickFile(item,index)">
				<niu-image right="10rpx" :src="item.isFloder?'/static/dir.svg':'/static/file.svg'" height="35rpx"
					width="35rpx" mode=""></niu-image>
				<view class="niu-tree__title__text">{{item.title}}</view>
			</view>
			<view class="niu-tree__sub" :class="[item.isOpen?'':'close']">
				<niu-tree :list="item.children"></niu-tree>
			</view>
		</view>
	</view>
</template>

<script>
	import anim from "./anim.vue"
	export default {
		name: "niu-tree",
		components: {
			anim
		},
		props: {
			list: {
				type: Array,
				default: () => [{
					title: "文件夹1",
					isFloder: true,
					isOpen: true,
					children: [{
						title: "文件夹2",
						isFloder: true,
						isOpen: true,
						children: [{
							title: "文件夹3",
							isFloder: false,
							isOpen: false,
							children: [

							]
						}]
					}]
				}, {
					title: "asdsad",
					isFloder: true,
					isOpen: false,
					children: [{
						title: "asd",
						isFloder: true,
						isOpen: false,
						children: [{
							title: "asdasdas",
							isFloder: false,
							isOpen: false,
							children: [

							]
						}]
					}]
				}]
			},
		},
		data() {
			return {

			};
		},
		methods: {
			clickFile(item) {
				item.isOpen = !item.isOpen
			}
		},
	}
</script>

<style lang="scss" scoped>
	.niu-tree.component {
		line-height: 1;
		font-size: 24rpx;

		.niu-tree__title {
			padding: 10rpx 60rpx;
			display: flex;
			align-items: center;

			&__text {
				flex: 1;
				width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.niu-tree__sub {
			margin-left: 20rpx;
			height: auto;
			overflow: hidden;
			transition: height .5s linear;
			&.close{
				height: 0;
			}
		}
	}
</style>
