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

const props = defineProps({
	versionsList: {
		type: Array,
		default: () => []
	},
	treeState:{
		default:false,
	},
	selectItem: {
		type: Object,
		default: () => ({})
	} as any,
})
const emit = defineEmits([
	'update:selectItem',
	'versionRestore',
	'versionDelete',
])
let data = reactive({
})

const view1Ref = ref(null)

const isLoad = ref(false)
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 treeList = ref([
	
])

function traverseArray(items, callback) {
	for (let i = 0; i < items.length; i++) {
		const item = items[i]
		callback(item, i)
		if (item.child && Array.isArray(item.child) && item.child.length > 0) {
			traverseArray(item.child, callback)
		}
	}
}
const initialize = ()=>{
	isLoad.value = false
	treeList.value = []
	treeList.value.push({id: null,name:'index',})
	traverseArray(props.versionsList, (item, index) => {
		treeList.value.push(item)
	})
	isLoad.value = true
	if(!props.selectItem?.id)setSelectItem(treeList.value[treeList.value.length - 1])
} 

const setSelectItem = (item)=>{
	if(!item.id)return
	emit('update:selectItem', {...item})
}

// 滚动到选中项
const scrollToActive = ()=>{
	nextTick(() => {
		const activeEl = view1Ref.value?.querySelector('.active')
		console.log(activeEl)
		activeEl.scrollIntoView({ 
			behavior: 'smooth', 
			block: 'nearest' 
		})
	})
}

watch(()=>treeStateTime.value,(newVal,oldVal)=>{
	if((props.treeState + '') == 'false'){
		// scrollToActive()
	}
})

watch(()=>props.selectItem,(newVal,oldVal)=>{
	// scrollToActive()
},{immediate: true})

onMounted(()=>{
	initialize()
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="tree" v-show="treeStateTime" v-if="isLoad">
		<!-- <div v-show="!treeState" class="box view1" ref="view1Ref">
			<view1Item v-for="item in treeList" :key="item.name" :selectItem="props.selectItem" :item="item" @click="setSelectItem(item)"></view1Item>
		</div> -->
		<div v-show="treeState" class="box view2">
			<view2 
				ref="view2Ref" 
				@setSelectItem="setSelectItem"
				:treeList="treeList"
				:selectItem="props.selectItem"
				@versionRestore="()=>emit('versionRestore')"
				@versionDelete="emit('versionDelete')"
			></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;
				&::-webkit-scrollbar {
					display: none;
				}
			}
			&.view2{
				border: 1px solid #D9D9D9;
				background-color: #f7f7f7;
				border-radius: var(--border-radius, 1rem);
			}
		}
	}
</style>