<template>
	<div class="contentBox" :class="{active:selectKey_ == 'design'}">
		<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
		<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
		<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
		<productDrawingDesign v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></productDrawingDesign>
		<printingDesign3D v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printingDesign3D>
		<printDesign v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printDesign>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,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 workspace from '../../workflow/workspace.vue'
import seriesDesign from './seriesDesign.vue'
import printDesign from './printDesign.vue'
import singleProductDesign from './singleProductDesign.vue'
import sketchDesign from './sketchDesign.vue'
import productDrawingDesign from './productDrawingDesign.vue'
import printingDesign3D from './printingDesign3D.vue'
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";

import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{
		workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
    },
	props:{
		selectKey_:String,
		workflowType:String,
		httpWorkflowType:String,
	},
    setup(props,{emit}) {
        const store = useStore();
		const data = reactive({
			navListData:computed(()=>store.state.Workspace.projectList),
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			userDetail:computed(()=>{
				return store.state.UserHabit.userDetail
			}),
		})
		const dataDom:any = reactive({
			seriesDesign:null as any,
			singleProductDesign:null as any,
			printDesign:null as any,
			sketchDesign:null as any,
			productDrawingDesign:null as any,
			printingDesign3D:null as any,
		})
		//处理design数据
		const setDesignData = (str:any)=>{
			if(str == 'workspace')return
			return new Promise(async (resolve,reject)=>{
				if(str == "colorBoard")await setColor()
				// if(str == "sketchBoard")await setSketch()
				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
				let value = {
				    type:str,
					objectName:data.selectObject.type,
				}
				if(allBoardData.indexOf(str) != -1){
					await store.dispatch('setAllBoardData',value)
				}else{
					let value = {
						type:str,
						objectName:data.selectObject.type,
					}
					store.dispatch('setModularData',value)
				}
				saveProject(str)
				resolve('')
			})
		}
		const saveCanvas = (value:any,str:any)=>{
			let json = dataDom[data.selectObject.type][str].getCanvasData()
			let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
			let formData = new FormData();
			// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			formData.append("file", blob, "data.json");
			formData.append('module', str);
			formData.append('projectId', value.projectId);
			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
			Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
				// message.success(t('exportModel.jsContent7'))
            })
		}
		const saveProject = (str:any)=>{
			if(str == 'design')return
			let value:any = {
				projectId:data.selectObject.id,
			}
			if(str == 'deReconstruction' || str == 'canvas'){
				saveCanvas(value,str)
				return
			}
			store.dispatch('getProjectData',str).then((data)=>{
				// if(!data[str])return
				value[str] = data[str]
				
				Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
					if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
				})
			})
		}
		const setSketch = ()=>{

		}
		const setColor = ()=>{
			return new Promise((resolve,reject)=>{
			    let colorBoards = store.state.UploadFilesModule.colorBoards;
				if(colorBoards.length == 0)return resolve('')
				let data: any = [];
				for (let v of colorBoards) {
					let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
					let hsv = rgbToHsv(color);
					v.hsv = hsv[0] + hsv[1] + hsv[2];
					data.push({
						h: hsv[0],
						s: hsv[1],
						v: hsv[2],
					});
				}
				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
					.then((rv: any) => {
						if (rv) {
							rv.forEach((ele: any, index: number) => {
								colorBoards[index].id = ele.id;
								colorBoards[index].tcx = ele.tcx;
								colorBoards[index].name = ele.name;
							});
							store.commit("setColorboardList", colorBoards);
							resolve('');
						}
					})
					.catch((res) => {
						reject();
					});
			})
		}
		const setModule = (value:any)=>{//选中设置数据
			// setStoreData(value)//设置数据或者清除数据
			if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
		}
		const setStoreData = async (data:any)=>{
			let {value,select} = data
			let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
		    if (select) {
				await setDesignData(value)
				if(allBoardData.indexOf(value) != -1){
					store.commit('setAllBoardData',value)
				}else{
					let data = {
						data:'',
						type:value
					}
					store.commit('setModularData',data)
				}
			}else{
				if(allBoardData.indexOf(value) != -1){
					store.commit('clearAllBoardData',value)
				}else{
					let data = {
						data:null,
						type:value
					}
					store.commit('setModularData',data)
				}
			}
			
		}
		const unfold = ()=>{
			dataDom[data.selectObject.type].unfold()
		}
		watch(()=>props.selectKey_,async (newVal,oldVal)=>{
			if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
				setDesignData(oldVal)
			}
			// if(newVal == '' && oldVal != ''){
			// 	//选择数据
			// 	if(data.navListData.value[index]?.select){
			// 		setDesignData(oldVal)
			// 	}
			// }
		})
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setModule,
			unfold,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.contentBox{
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
		&.active{
			overflow: initial;
		}
		> .contentBox{
			position: relative;
			flex: 1;
			overflow-x: initial;
			> .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>