<template>
	<view class="main">
		<movable-area class="tree" :style="'width:'+screen.width*4+'px;height:'+screen.height*4+'px;'">
			<movable-view class="canvas" direction="all" out-of-bounds scale :x="screen.width/2">
				<Node :data="treeData" isTop></Node>
			</movable-view>
		</movable-area>

	</view>
</template>

<script>
	import Node from "./Node.vue"
	export default {
		name: 'BuTingTree',
		props: {
			data: {
				type: Array,
				default: []
			}
		},
		components:{
			Node
		},
		data() {
			return {
				screen: {
					height: 1920,
					width: 1080
				},
				treeData: []
			}
		},
		mounted() {
			let system = uni.getSystemInfoSync()
			this.screen = {
				height: system.screenHeight,
				width: system.screenWidth
			}
			console.log(this.screen)
		},
		watch:{
			data(newData,old){
				this.treeData = newData
			}
		},
		methods: {

			filterTree(tree) {
				return tree.map(item => {
					
					if (item.children.length > 0) {
						item.children = this.filterTree(item.children)
					}
					return item
				})
			},
			onChange(e) {
				console.log(e)
			}
		}
	}
</script>

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