<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
import view1Item from './view1Item.vue'
import view2 from './view2/index.vue'
import { versionsList } from './view2/tools/versionsData'

const props = defineProps({
	treeState:{
		default:false,
	},
})
//const emit = defineEmits([
//])
let data = reactive({
})

const treeStateTime = ref(true)

watch(()=>props.treeState,(newVal,oldVal)=>{
	treeStateTime.value = false
	setTimeout(()=>{
		treeStateTime.value = true
	},250)
})

const view2Ref = ref(null)
const pushView2Item = (item)=>{
	// if(node)view2Ref.value.pushNode(node)
	// if(edge)view2Ref.value.pushEdge(edge)
	view2Ref.value.push(item)
}

function traverseArray(items, callback) {
	for (let i = 0; i < items.length; i++) {
		const item = items[i]
		callback(item, i)
		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
			traverseArray(item.children, callback)
		}
	}
}

const addView2Item = ()=>{
	traverseArray(versionsList, (item, index) => {
		pushView2Item(item)
	})
	
}

const view1List = ref([
	{
		name:'P1',
	},{
		name:'V1',
	},{
		name:'V1-1',
	}
])
onMounted(()=>{
	addView2Item()
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="tree" v-show="treeStateTime">
		<div v-if="!treeState" class="box view1">
			<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
		</div>
		<div v-else class="box view2">
			<view2 :list="view1List" ref="view2Ref"></view2>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.tree{
		width: 100%;
		height: 100%;
		position: relative;
		.box{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			&.view1{
				overflow-y: auto;
				
			}
			&.view2{
				border: 1px solid #D9D9D9;
				background-color: #f7f7f7;
				border-radius: var(--border-radius, 1rem);
			}
		}
	}
</style>