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,
	canvasKey:any,
}

const DesignDetail : Module<DesignDetail,RootState> = {
	namespaced: true,
    state:{
        designDetail:null,
		designPreviewData:{},
		frontBack:{
			front:[],
			back:[],
			body:{},
		},
		selectDetail:null,
		printZIndex:-1,
		currentDetailType:'',
		currentPrintElement:null,
		canvasKey:0,
    },
    mutations:{
		clearDetailData(state){
			state.designDetail = null
			state.designPreviewData = {}
			state.frontBack = {
				front:[],
				back:[],
				body:{},
			}
			state.selectDetail = null
			state.printZIndex = -1
			state.currentDetailType = ''
			state.currentPrintElement = null
			state.canvasKey = 0
		},
        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){
				// }
				function isJSONString(str) {
					try {
						JSON.parse(str);
						return true;  // 解析成功，是有效的JSON字符串
					} catch (e) {
						return false; // 解析失败，不是有效的JSON字符串
					}
				}
				v?.printObject?.prints?.forEach((item:any) => {
					if(isJSONString(item.object)){
						item.object = JSON.parse(item.object)
					}
				});
				v?.trims?.prints?.forEach((item:any) => {
					if(isJSONString(item.object)){
						item.object = JSON.parse(item.object)
					}
				});
				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]
					}
				}
			});
		},
		addDesign(state,data){

		},
		setNewDetail(state,value){
			// state.designDetail.clothes.forEach((item:any) => {
			// 	if(item.id == state.selectDetail.id){
			// 	}
			// });
			let select = state.selectDetail
			if(value.id){
				select = state.designDetail.clothes.find((item:any) => item.id == value.id)
			}
			let {data} = value
			let str = value.str || state.currentDetailType
			if(!select)return
			if(!select.newDetail){
				select.newDetail = {}
			}
			if(str == 'sketch'){
				select.newDetail[str] = data
			}else if(str == 'color'){
				select.newDetail[str] = data
			}else if(str == 'print'){
				select.newDetail[str] = data
			}else if(str == 'element'){
				select.newDetail[str] = data
			}else if(str == 'models'){
				// if(!state.designDetail.newModel)state.designDetail.newModel={}
				state.designDetail.newModel = JSON.parse(JSON.stringify(data))
			}else{
				if(!select.newDetail[str])select.newDetail[str] = []
				const foundObjects = select.newDetail[str].filter((item:any) => item.id === data.id);
				if(foundObjects.length == 0){
					select.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
		},
		changeCanvasKey(state){
			state.canvasKey+=1
		},
		canvasPreviewUpdata(state,{type,callBack}){
			// state.selectDetail.newDetail?.print?.forEach((item:any) => {
			// 	state.selectDetail.printObject.prints = []
			// 	state.selectDetail.printObject.push({
			// 	})
			// });
			if((type == 'print' || type == 'all') && state.selectDetail.newDetail?.print)state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
			if((type == 'color' || type == 'all') && state.selectDetail.newDetail?.color?.rgba)state.selectDetail.color = {
				...state.selectDetail.newDetail?.color,
				...state.selectDetail.newDetail?.color?.rgba,
				...state.selectDetail.newDetail?.color?.hsv,
			}
			if((type == 'element' || type == 'all') && state.selectDetail.newDetail?.element)state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
			if(type == 'all'){
				state.selectDetail.newDetail = {}
			}else{
				state.selectDetail.newDetail[type] = null
			}
			callBack()
		},
		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
				}
				if(state.frontBack?.body?.path){
					let scale:any = value.scale
					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:`scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1}) rotate(${item.layersObject?.[i]?.rotate || 0}deg)`,
								}
								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
								}
							}
						}
					})
				}
				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.canvasId = item.canvasId
					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
					function isJSONString(str) {
						try {
							JSON.parse(str);
							return true;  // 解析成功，是有效的JSON字符串
						} catch (e) {
							return false; // 解析失败，不是有效的JSON字符串
						}
					}
					item.trims?.prints?.forEach((item:any) => {
						if(isJSONString(item.object)){
							item.object = JSON.parse(item.object)
						}
					});
					item.printObject?.prints?.forEach((item:any) => {
						if(isJSONString(item.object)){
							item.object = JSON.parse(item.object)
						}
					});
					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)
				}
			}

		},
		
		// 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