<template>
	<div class="seriesDesign">
		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
		<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
		<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
		<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
		<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
		<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>
		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></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 workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import design from '../../model/design/index.vue'
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import mannequin from '../../model/mannequin/index.vue'
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,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,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),//选择的项目
		})
		const dataDom:any = reactive({
			moodBoard:null as any,
			printBoard:null as any,
			colorBoard:null as any,
			sketchBoard:null as any,
			mannequin:null as any,
			toProduct:null as any,  
			design:null as any,
			relight:null as any,
			poseTransfer:null as any,
			canvas:null as any,
		})
		const open = (str:any,button:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData(button)
				}
			})
		}
		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":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
			}
			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
				historyChooseData(rv)//设置历史数据
				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
				let canvasData = ['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 = {
				disposeMoodboard: data.moodBoard?.moodTemplateId?[{
					id:data.moodBoard.moodTemplateId,
					imgUrl:data.moodBoard.moodTemplateUrl,
					resData:{
						name:data.moodBoard.moodTemplateName,
					}
				}]:[],
				moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
				moodboardFiles: dealViewChooseData(
					data.moodBoard?.moodBoards,"Moodboard"
				),
				printboardFiles: dealViewChooseData(
					data.printBoard,"Printboard"
				),
				generatePrintFiles: [],
				colorBoards: dealViewChooseColor(
					data.colorBoard
				),
				sketchboardFiles: dealViewChooseData(
					data.sketchBoard,"Sketchboard"
				),
			};
			if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
			store.commit("setAllBoardDataChoose", collectionData);
			// store.commit('clearShowSketchboard')
			store.commit("setShowSketchboard", data.sketchBoards);
			let likeDesignCollectionList:any = []
			if(data.design?.userLikeDetails){
				data.design?.userLikeDetails.map(
				(v: any) => {
					let data = {
						...v, 
						groupDetailId: v.id,
						designItemUrl: v.designOutfitUrl,
						designItemId: v.designItemId,
					};
					return data;
				}
			); 
			}
			if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
			store.commit("setUserGroupId", data.design.userGroupId);
			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);
			}
		}
		//统一处理选择组的渲染数据
		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;
				}
				if (v.level1Type === "Printboard") {
					newData.pin = v.isPin;
					newData.level2Type = v.level2Type;
					newData.categoryValue = v.level2Type;
				}
				return newData;
			});
			return filesList;
		}
		//统一处理选择组的渲染数据
		const dealViewChooseColor = (data: any)=>{
			let colorList = data.map((v: any) => {
				let rgbValue = v.rgbValue.split(" ");
				let newData: any = {
					id: v.id,
					name: v.name,
					tcx: v.tcx || "",
					rgbValue: {
						r: rgbValue[0],
						g: rgbValue[1],
						b: rgbValue[2],
						a: 1,
					},
				};
				if(v.gradient){
					newData.gradient = v.gradient;
				}else{
					delete newData.gradient;
				}
				return newData;
			});
				console.log(colorList)
			return colorList;
		}
		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>