<template>
	<div class="seriesDesign">
		<workspace @setProject="workspaceBack" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
		<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
		<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
	</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 SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import deReconstruction from '../../model/deReconstruction/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import mannequin from '../../model/mannequin/index.vue'

import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{ 
		workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
    },
	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({
			sketchBoard:null as any,
			deReconstruction:null as any,
			canvas:null as any,
			mannequin:null as any,
		})
		const open = (str:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData(str)
				}
			})
		}
		const setitemData = (arr:any)=>{
			return new Promise((resolve,reject)=>{
			    nextTick(()=>{
					arr.forEach((rv:any)=>{
						if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !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":["sketchBoard",'deReconstruction','mannequin']
			}
			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
				historyChooseData(rv)
				let allBoardData = ['sketchBoard','deReconstruction','mannequin']
				let canvasData = ['deReconstruction','canvas']
				for (let index = 0; index < canvasData.length; index++) {
					const item = canvasData[index];
					await getCanvasData(item)
				}
				await setitemData(allBoardData)
				//还有一个canvas
				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
				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 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)=>{
			let collectionData = {
				sketchboardFiles: dealViewChooseData(
					data.sketchBoard,"Sketchboard"
				),
			};
			store.commit("setAllBoardDataChoose", collectionData);
			if(data.deReconstruction){
				data.deReconstruction.url = data.deReconstruction.collageSketchUrl
				data.deReconstruction.isLike = data.deReconstruction.liked
				let value = {
					list: [data.deReconstruction],
					str:'add',
					index:-1,
				}
				store.commit("setDeReconstruction", value);
			}
		} 
		//统一处理选择组的渲染数据
		const dealViewChooseData = (data: any,str:string)=> {
			if (!data) {
				return [];
			}
			let filesList = data.map((v: any) => {
				let newData: any = {
					imgUrl: v.url?v.url:v.designOutfitUrl,
					id: v.id,
					status: "done",
					resData: v,
					type_:{
						type1:'material',
						type2:v.level1Type
					}
				};
				if (v.level1Type === "Sketchboard") {
					newData.pin = v.isPin;
					newData.categoryValue = v.level2Type;
					newData.level2Type = v.level2Type;
				}
				return newData;
			});
			return filesList;
		}
		
		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>