<template>
	<div class="seriesDesign">
		<workspace @setProject="workspaceBack" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
		<toProduct ref="toProduct" 
			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
			class="toProduct" 
		 	:isState="selectKey_ =='toProduct'" 
			v-show="selectKey_ == 'toProduct'"
		></toProduct>
		<toProduct ref="relight" 
			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
			class="relight" 
			:isState="selectKey_ =='relight'"	
			v-show="selectKey_ == 'relight'"
		></toProduct>
		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import toProduct from '../../model/toProduct/index.vue'
import poseTransfer from '../../model/poseTransfer/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";

import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{ 
		workspace,toProduct,canvasUpload,poseTransfer
    },
	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),//选择的项目
			workspaceBack:inject('setBack') as any,
		})
		const dataDom:any = reactive({
			toProduct:null as any,  
			relight:null as any,
			poseTransfer:null as any,
			canvas:null as any,
		})
		const open = (str:any)=>{
			console.log(str)
			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":['toProduct','relight','poseTransfer']
			}
			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
				historyChooseData(rv)//设置历史数据
				let allBoardData = ['toProduct','relight','poseTransfer']
				let canvasData = ['canvas']
				for (let index = 0; index < canvasData.length; index++) {
					const item = canvasData[index];
					await getCanvasData(item)
				}
				await setitemData(allBoardData)
				//还有一个canvas
				allBoardData.forEach((item)=>{
					let value = {
						type:item,
						objectName:data.selectObject.type,
					}
					store.dispatch('setModularData',value)
				})

			})
		}
		const getCanvasData = (str:any)=>{
			return new Promise((resolve, reject) => {
				let value = {
					module:str,
					projectId:data.selectObject.id,
				}
				Https.axiosPost(Https.httpUrls.exportSearch, value)
				.then((rv) => {
					store.commit("setCanvasData", {type:str,file:rv});
					resolve('')
				})
				.catch((rv) => {
					resolve(null)
				});
			})
		}
		const historyChooseData = (data:any)=>{
			if(data.toProduct){
				let value = {
					list: data.toProduct,
					str:'add',
					index:-1,
				}
				store.commit("setToProductImage", value);
			}
			if(data.relight){
				let value = {
					list: data.relight,
					str:'add',
					index:-1,
				}
				store.commit("setRelightList", value);
			}
			if(data.poseTransfer){
				let value = {
					list: data.poseTransfer,
					str:'add',
					index:-1,
				}
				store.commit("setPoseTransfer", value);
			}
		}
		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>