<template>
	<div class="seriesDesign">
		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
		<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
		<!-- <canvasUpload></canvasUpload> -->
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} 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 patternMaking3D from '../../model/patternMaking3D/index.vue'
import canvasUpload from "@/component/Canvas/test.vue";
import workspace from '../../workflow/workspace.vue'

import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{ 
		patternMaking3D,canvasUpload,workspace
    },
	props:{
		selectKey_:{
			type:String,
			default:''
		},
		workflowType:String,
		httpWorkflowType:String,
	},
    setup(props,{emit}) {
        const store = useStore();
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		}) 
		provide('driver__',driver__) 
		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
		const data = reactive({
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
		})
		const dataDom:any = reactive({
			patternMaking3D:null as any,
		})
		const open = (str:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData()
				}
			})
		}
		const setitemData = (arr:any)=>{
			return new Promise((resolve,reject)=>{
			    nextTick(()=>{
					arr.forEach((rv:any)=>{
						let arr = ['design','patternMaking3D']
						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
						dataDom[rv].openSetData()
					})
					resolve('')
				})
			})
		}
		const unfold = ()=>{
			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
		}
		const getCollection = ()=>{
			let value:any = {
				 "id":data.selectObject.id,
				"moduleList":["patternMaking3D", ]
			}
			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
				historyChooseData(rv)
				let allBoardData = ['patternMaking3D']
				await setitemData(allBoardData)
				allBoardData.forEach((item)=>{
					let value = {
						type:item,
						objectName:data.selectObject.type,
					}
					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
					if(arr.indexOf(item) != -1){
						store.dispatch('setAllBoardData',value)
					}else{
						store.dispatch('setModularData',value)
					}
				})

			})
		}
		const historyChooseData = (value:any)=>{
			store.commit('setPatternMaking3D',value.threeDSimpleId)
		}
		onMounted(()=>{
			nextTick(()=>{
				getCollection()
			})
		})
        return{
			...toRefs(dataDom),
			...toRefs(data),
			open,
			unfold,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.seriesDesign{
		display: flex;
		width: 100%;
		height: 100%;
		> .contentBox{
			position: relative;
			flex: 1;
			overflow: hidden;
			> .content,
			>.homeContent{
				width: 100%;
				height: 100%;
				padding: 4rem;
				// 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>