aida_front/src/store/Detail/designDetail.ts

import {Module} from 'vuex'
import {RootState} from '../index'
import { forEach } from 'jszip'
import { transform } from 'typescript'

interface DesignDetail{
    designDetail:any,
	designPreviewData:any,
	frontBack:any,
	selectDetail:any,
	printZIndex:any,
	//值都有 sketch，color,print,element
	currentDetailType:any,
	currentPrintElement:any,
}

const DesignDetail : Module<DesignDetail,RootState> = {
	namespaced: true,
    state:{
        designDetail:null,
		designPreviewData:{},
		frontBack:{
			front:[],
			back:[],
			body:{},
		},
		selectDetail:null,
		printZIndex:-1,
		currentDetailType:'',
		currentPrintElement:null,
    },
    mutations:{
		clearDetailData(state){
			state.designDetail = null
			state.designPreviewData = {}
			state.frontBack = {
				front:[],
				back:[],
				body:{},
			}
			state.selectDetail = null
			state.printZIndex = -1
			state.currentDetailType = ''
			state.currentPrintElement = null
		},
        setDesignDetail(state,data){
			if(data.others.length > 0 && data.others[0].type == "Body"){
				state.frontBack.body = data.others[0]
			}
			let front:any = []
			let back:any = []
            state.designDetail = data
			// let printZIndex = 
			data.clothes.forEach((v:any,index:any)=>{
				// if(!v?.partialDesignDTO){
				// }
				for (let i = v.layersObject.length-1; i >= 0; i--) {
					v.layersObject[i].style = {
						top:v.layersObject[i].position?.[0],
						left:v.layersObject[i].position?.[1],
						width:v.layersObject[i].imageSize?.[0],
						height:v.layersObject[i].imageSize?.[1],
						transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
					}
					v.layersObject[i].centers={
						left:0,
						top:0,
					}
					v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
					v.maskUrl = v.layersObject?.[0]?.maskUrl
					v.layersObject[i].designOpenrtionBtn = false
					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
						front[index] = v.layersObject[i]
						front[index].style.zIndex = v.priority + 10
						front[index].id = v.id
					}else{
						back[index] = v.layersObject[i]
						back[index].style.zIndex = v.priority
						back[index].id = v.id
						// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
					}
					if(state.printZIndex < v.priority){
						state.printZIndex = v.priority
					}
				}
			})
			state.frontBack.front = front
			state.frontBack.back = back
        },
		updataDetailItem(state,data){
			state.designDetail.clothes.forEach((item:any) => {
				if(item.id == state.selectDetail.id){
					for (const key in data) {
						item[key] = data[key]
					}
				}
			});
		},
		clearDesignDetail(state){
			state.designDetail = null
			state.designPreviewData = {}
			state.frontBack = {
				front:[],
				back:[],
				body:{},
			}
			state.selectDetail = null
			state.currentDetailType = ''
			state.printZIndex = -1
		},
		addDesign(state,data){

		},
		setNewDetail(state,value){
			// state.designDetail.clothes.forEach((item:any) => {
			// 	if(item.id == state.selectDetail.id){
			// 	}
			// });
			let {data} = value
			let str = value.str || state.currentDetailType
			if(!state.selectDetail)return
			if(!state.selectDetail.newDetail){
				state.selectDetail.newDetail = {}
			}
			if(str == 'sketch'){
				state.selectDetail.newDetail[str] = data
			}else if(str == 'color'){
				state.selectDetail.newDetail[str] = data
			}else if(str == 'print'){
				state.selectDetail.newDetail[str] = data
			}else if(str == 'element'){
				state.selectDetail.newDetail[str] = data
			}else if(str == 'models'){
				// if(!state.designDetail.newModel)state.designDetail.newModel={}
				state.designDetail.newModel = JSON.parse(JSON.stringify(data))
			}else{
				if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
				const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
				if(foundObjects.length == 0){
					state.selectDetail.newDetail[str].push(data)
				}
			}
		},
		setCurrentPrintElement(state,data){//临时存放印花和元素点击用来监听在衣服上添加元素
			state.currentPrintElement = data?.resData || data
		},
		setCurrentDetailType(state,data){
			if(state.selectDetail && state.selectDetail.id){
				state.currentDetailType = data
			}else if(state.selectDetail && data == 'sketch'){
				state.currentDetailType = data
			}
		},
		setFrontBack(state,data){
			state.frontBack = data
		},
        setDesignColthes(state,data){
			if(!state.currentDetailType)state.currentDetailType = 'sketch'
			//切换选择
			// state.currentDetailType = ''
            // state.designDetail.clothes[data.index] = data.clothes
			state.designDetail.clothes.forEach((item:any) => {
				if(item.id == data){
					state.selectDetail = item
					state.frontBack.front.forEach((v:any,index:any)=>{
						v.designOpenrtionBtn = false
						if(v.id == data){
							v.designOpenrtionBtn = true
						}
					})
				}
			});
        },
		addDesignColthes(state){
			let data = {
				changed:null,
				color:{rgba:{
					r:255,
					g:255,
					b:255,
				}},
				designType:null,
				gradient:null,
				id:null,
				partialDesign:{
					layers:[],
					partialDesignPath:'',
					partialDesignMinioPath:'',
					partialDesignBase64:''
				},
				layersObject:null,
				newDetail:{},
				level1Type:'Sketchboard',
				minIOPath:null,
				path:null,
				printObject:null,
				trims:null,
				type:null,
				transpose:[1,1],
				rotate:0,
			}
			if(!state.currentDetailType)state.currentDetailType = 'sketch'
			state.designDetail.clothes.forEach((item:any) => {
				state.frontBack.front.forEach((v:any,index:any)=>{
					v.designOpenrtionBtn = false
				})
			});
			state.selectDetail = data
		},
		canvasPreviewUpdata(state,{type,callBack}){
			console.log(state.selectDetail,type)
			// state.selectDetail.newDetail?.print?.forEach((item:any) => {
			// 	state.selectDetail.printObject.prints = []
			// 	state.selectDetail.printObject.push({
			// 	})
			// });
			if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
			if(type == 'color' || type == 'all')state.selectDetail.color = {
				...state.selectDetail.newDetail?.color,
				...state.selectDetail.newDetail?.color?.rgba,
				...state.selectDetail.newDetail?.color?.hsv,
			}
			console.log(state.selectDetail,type,state.selectDetail.newDetail)
			if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
			if(type == 'all'){
				state.selectDetail.newDetail = {}
			}else{
				state.selectDetail.newDetail[type] = null
			}
			callBack()
		},
		async setPraeview(state,value){//preview
			let data = value?.rv || value 
			let currentType = value?.currentType
			if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url
			if(value?.rv?.currentFullBodyView)state.designDetail.currentFullBodyView = value.rv.currentFullBodyView
			for (let j = 0; j < data.clothes.length; j++) {
				const item = data.clothes[j];
				if(!item.id)continue
				let id_:any
				if(state.currentDetailType != 'models'){
					if(data.clothes.length > 2){
						//缺少字段临时添加
						id_ = item.id || state.selectDetail.newDetail?.sketch?.id
					}else{
						id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
					}
				}else{
					id_ = item.id
				}
				let el:any = document.querySelector('.molepositon .perview_img')
				await new Promise((resolve, reject) => {
					if(!state.frontBack?.body?.path){
						resolve('')
					}
					const img = new Image();
					img.src = state.frontBack.body.path;
					img.onload = () => {
						let scale:any = el.parentNode.offsetWidth / img.width;
						if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
							state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})	
							state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})	
						}
						state.frontBack.front.forEach((v:any,index:any)=>{
							if(v.id == id_){
								for (let i = item.layersObject.length-1; i >= 0; i--) {
									item.layersObject[i].style = {
										top:item.layersObject[i].position?.[0] * scale + 'px',
										left:item.layersObject[i].position?.[1] * scale + 'px',
										width:item.layersObject[i].imageSize?.[0] * scale + 'px',
										height:item.layersObject[i].imageSize?.[1] * scale + 'px',
										zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
										transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
									}
									item.layersObject[i].centers={
										left:0,
										top:0,
									}
									item.layersObject[i].designOpenrtionBtn = false
									if(item.layersObject[i].imageCategory.indexOf("back") == -1){
										state.frontBack.front[index] = item.layersObject[i]
										// state.frontBack.front[index].style.zIndex = v.priority
										state.frontBack.front[index].id = item.id
									}else{
										state.frontBack.back[index] = item.layersObject[i]
										// state.frontBack.back[index].style.zIndex = v.priority
										state.frontBack.back[index].id = item.id
									}
								}
							}
						})
						resolve('')
					};
				})
				let uploadDetail = (detailItem)=>{
					detailItem.change = item.change
					if(detailItem?.newDetail?.color && currentType != 'color'){
						detailItem.color = detailItem?.newDetail?.color
						detailItem.newDetail.color = null
					}
					if(item.partialDesign){
						detailItem.partialDesign = item.partialDesign
					}
					detailItem.designType = item.designType
					detailItem.layersObject = item.layersObject
					detailItem.path = item.path
					detailItem.minIOPath = item.minIOPath
					detailItem.scale = [1,1]
					detailItem.offset = [0,0]
					detailItem.transpose = item.transpose || [1,1]
					detailItem.rotate = item.rotate || 0
					detailItem.printObject = item.printObject
					detailItem.trims = item.trims
					detailItem.type = item.type
					detailItem.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
					detailItem.maskUrl = item.layersObject?.[0]?.maskUrl
					detailItem.color = {
						...item.color,
						rgba:{
							r:item.color?.r,
							g:item.color?.g,
							b:item.color?.b,
						},
						gradient:item.gradient,
					}
					if(detailItem.newDetail?.sketch?.id && !detailItem.id){
						state.designDetail.clothes.push(detailItem)
					}
					detailItem.id = item.id
					if(currentType)if(detailItem.newDetail?.[currentType] && currentType != 'color')delete detailItem.newDetail[currentType]
				}
				if(data.clothes.length > 2){
					state.designDetail.clothes.forEach((detailItem:any) => {
						if(detailItem.id == id_){
							uploadDetail(detailItem)
						}
					});
				}else{
					uploadDetail(state.selectDetail)
				}
				
				if(state.currentDetailType != 'models'){
					// state.selectDetail.change = item.change
					// if(state.selectDetail?.newDetail?.color && currentType != 'color'){
					// 	state.selectDetail.color = state.selectDetail?.newDetail?.color
					// 	state.selectDetail.newDetail.color = null
					// }
					// if(item.partialDesign){
					// 	state.selectDetail.partialDesign = item.partialDesign
					// }
					// state.selectDetail.designType = item.designType
					// state.selectDetail.layersObject = item.layersObject
					// state.selectDetail.path = item.path
					// state.selectDetail.minIOPath = item.minIOPath
					// state.selectDetail.scale = [1,1]
					// state.selectDetail.offset = [0,0]
					// state.selectDetail.printObject = item.printObject
					// state.selectDetail.trims = item.trims
					// state.selectDetail.type = item.type
					// state.selectDetail.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
					// state.selectDetail.maskUrl = item.layersObject?.[0]?.maskUrl
					// state.selectDetail.color = {
					// 	...item.color,
					// 	rgba:{
					// 		r:item.color?.r,
					// 		g:item.color?.g,
					// 		b:item.color?.b,
					// 	},
					// 	gradient:item.gradient,
					// }
					// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
					// 	state.designDetail.clothes.push(state.selectDetail)
					// }
					// state.selectDetail.id = item.id
					// if(currentType)if(state.selectDetail.newDetail?.[currentType] && currentType != 'color')delete state.selectDetail.newDetail[currentType]
				}
			}
			if(value.fun)value.fun()
		},
		
		// setDesignItemOthers(state,data){
        //     state.designDetail.others[data.index] = data.others
        // },
    },
    actions:{
		async setSubmit({ commit },str) {
				
			//   setTimeout(() => {
			// 	const message = 'Hello from Vuex';
			// 	commit('setMessage', message); // 更新状态
			// 	resolve(message);  // 返回数据
			//   }, 1000);
		  },
	  
    }
}

export default DesignDetail