<template>
	<div class="home">
		<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
		<div class="contentBox">
			<div class="homeContent" ref="parent">
				<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
			</div>
			<div class="content">
				<div class="back" @click="setBack()">&lt; Back</div>
				<design class="design" v-if="selectKey_ == 'design'"></design>
				<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
				<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
				<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
				<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import design from './design/index.vue'
import MoodboardUpload from './collection/MoodboardUpload.vue'
import PrintboardUpload from './collection/PrintboardUpload.vue'
import ColorboardUpload from './collection/ColorboardUpload.vue'
import SketchboardUpload from './collection/SketchboardUpload.vue'

import navList from './nav.vue'
import navListBox from './navBox.vue'


import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{
		design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
    },
    setup(props,{emit}) {
        const store = useStore();
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		provide('driver__',driver__)

		const data = reactive({
			
			selectKey:'',
			selectKey_:'',
			adminData:{
				position:'',
				dom:null as any,
				parentDom:null as any,
			},
			navListData:[
				{
					icon:'',
					value:'design',
					name:'1',
					task:'1-1',
				},{
					icon:'',
					value:'moodBoard',
					name:'2',
					task:'1-2',
				},{
					icon:'',
					value:'printBoard',
					name:'3',
					task:'1-3',
				},{
					icon:'',
					value:'colorBoard',
					name:'3',
					task:'1-4',
				},{
					icon:'',
					value:'sketchBoard',
					name:'3',
					task:'1-5',
				},{
					icon:'',
					value:'color3',
					name:'3',
					task:'2-1',
				},{
					icon:'',
					value:'color4',
					name:'3',
					task:'3-1',
				},{
					icon:'',
					value:'color5',
					name:'3',
					task:'4-1',
				},{
					icon:'',
					value:'color6',
					name:'3',
					task:'4-2',
				},{
					icon:'',
					value:'color7',
					name:'3',
					task:'5-1',
				},
			],
		})
		const dataTime = reactive({
			selectTime:null as any,
		})
		const dataDom = reactive({
			parent:null as any
		})
		const setBack = ()=>{
			data.selectKey = ''
			updataPage()
		}
		const setSelectKey = (value:any)=>{
			let {str,dom,position} = value
			data.adminData.dom = dom
			data.adminData.parentDom = value?.parentDom
			data.adminData.position = position
			data.selectKey = str
			updataPage()
		}
		const updataPage = ()=>{
			let {dom,position} = data.adminData
			let contentDom:any = document.querySelectorAll('.home .content')[0]
			clearTimeout(dataTime.selectTime)
			let {top,left,width,height} = dom.getBoundingClientRect()
			let parentPosition = dataDom.parent.getBoundingClientRect()
			let parentTop = parentPosition?.top
			let parentLeft = parentPosition?.left
			if(data.selectKey_ && data.selectKey == ''){
				// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
				let y = top - parentTop + height / 2
				let x = left - parentLeft + width / 2
				if(position == 'nav'){
					x = 0
					y = dom.offsetTop + dom.offsetHeight / 2
				}
				contentDom.style.transformOrigin = `${x}px ${y}px`
				gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
				dataTime.selectTime = setTimeout(() => {
					data.selectKey_ = data.selectKey
				}, 500);
			}else{
				data.selectKey_ = data.selectKey
				nextTick(()=>{
					// let index = data.navListData.findIndex((item:any) => item.value === str);
					let y = top - parentTop + height / 2
					let x = left - parentLeft + width / 2
					if(position == 'nav'){
						x = 0
						y = dom.offsetTop + dom.offsetHeight / 2
					}
					contentDom.style.transformOrigin = `${x}px ${y}px`
					gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
				})
			}
		}
		// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
		// 	let navDom:any = document.querySelectorAll('.home .navList')
		// 	let contentDom:any = document.querySelectorAll('.home .content')[0]
		// 	clearTimeout(dataTime.selectTime)
		// 	if(oldVal && newVal == ''){
		// 		dataTime.selectTime
		// 		let index = data.navListData.findIndex(item => item.value === oldVal);
		// 		let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
		// 		contentDom.style.transformOrigin = `0px ${top}px`
		// 		gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
		// 		dataTime.selectTime = setTimeout(() => {
		// 			data.selectKey_ = newVal
		// 		}, 500);
		// 	}else{
		// 		data.selectKey_ = newVal
		// 		nextTick(()=>{
		// 			let index = data.navListData.findIndex(item => item.value === newVal);
		// 			let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
		// 			contentDom.style.transformOrigin = `0px ${top}px`
		// 			gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
		// 		})
		// 	}
		// })
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setBack,
			setSelectKey,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.home{
		display: flex;
		width: 100%;
		height: 100%;
		> .contentBox{
			position: relative;
			flex: 1;
			overflow: hidden;
			> .content,
			>.homeContent{
				width: 100%;
				height: 100%;
				padding: 3rem;
			}
			> .content{
				position: absolute;
				top: 0;
				left: 0;
				transform: scale(0);
				background: #ff6666;
				display: flex;
				flex-direction: column;
				> *{
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
				> .back{
					width: auto;
					height: auto;
					cursor: pointer;
				}
			}
			> .homeContent{
				// background: #91ff66;
				position: absolute;
			}
		}
	}
</style>