<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)=>{
	view2Ref.value.push(item)
}

const view1List = ref([
	{
		name:'P1',
	},{
		name:'V1',
	},{
		name:'V1-1',
	}
])
onMounted(()=>{
	// addView2Item()
	view2Ref.value.init(versionsList)
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="tree" v-show="treeStateTime">
		<div v-show="!treeState" class="box view1">
			<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
		</div>
		<div v-show="treeState" class="box view2">
			<view2 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>