<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'
import { useProjectStore } from '@/stores'


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

const view1Ref = ref(null)

const isLoad = ref(false)
const treeStateTime = ref(true)
const projectStore = useProjectStore()


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.children && Array.isArray(item.children) && item.children.length > 0) {
			traverseArray(item.children, callback)
		}
	}
}
const initialize = ()=>{
	isLoad.value = false
	treeList.value = []
	// treeList.value.push({versionId: null,name:'index',})
	traverseArray(props.versionsList, (item, index) => {
		treeList.value.push(item)
	})
	console.log(treeList)
	isLoad.value = true
	// if(!props.selectItem?.versionId)setSelectItem(treeList.value[treeList.value.length - 1])
} 

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

// 滚动到选中项
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()
	}
})

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 class="nodeInfo">
				<!-- <span class="versionsName">111</span> -->
				<span class="versionsTime">{{ new Date(treeList.find(item=>item.id == props.selectItem.id)?.createdTime * 1000)?.toLocaleString?.() || 0 }}</span>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.tree{
		width: 100%;
		height: 100%;
		position: relative;
		.box{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			&.view1{
				overflow-y: auto;
				&::-webkit-scrollbar {
					display: none;
				}
			}
			&.view2{
				border: 1px solid #D9D9D9;
				background-color: #f7f7f7;
				border-radius: var(--border-radius, 1rem);
			}
			> .nodeInfo{
				position: absolute;
				right: 1.6rem;
				top: 1.6rem;
				padding: 0 1.6rem;
				border: 2px solid #E6E6E7;
				background-color: #fff;
				border-radius: .4rem;
				line-height: 3.6rem;
				> span{
					font-size: 1.2rem;
					&.versionsName{
						margin-right: .5rem;
						font-size: 1.4rem;
					}
				}
			}
		}
	}
</style>