aida_front/src/store/Detail/designDetail.ts

import {Module} from 'vuex'
import {RootState} from '../index'

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){
			console.log(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],
					}
					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
						front[index].id = v.id
						front[index].undividedLayer = v.undividedLayer
					}else{
						back[index] = v.layersObject[i]
						back[index].style.zIndex = v.priority
						back[index].id = v.id
						back[index].undividedLayer = v.undividedLayer
						// 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
			}
		},
        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,
				undividedLayer:null,
			}
			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
		},
		async setPraeview(state,value){//preview
			let data = value?.rv || value 
			console.log(data,'preview')
			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
				if(item.id == state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id == item.id){

				}
				let id_:any
				if(state.currentDetailType != 'models'){
					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){
						state.frontBack.front[0].undividedLayer = value.rv.clothes[0].undividedLayer
						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
									}
									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
										state.frontBack.front[index].undividedLayer = item.undividedLayer
									}else{
										state.frontBack.back[index] = item.layersObject[i]
										// state.frontBack.back[index].style.zIndex = v.priority
										state.frontBack.back[index].id = item.id
										state.frontBack.back[index].undividedLayer = item.undividedLayer
									}
								}
							}
						})
						resolve('')
					};
				})
				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.gradient = item.gradient
					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.color = {
						...item.color,
						rgba:{
							r:item.color?.r,
							g:item.color?.g,
							b:item.color?.b,
						}
					}
					state.selectDetail.undividedLayer = item.undividedLayer
					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