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

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

const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
	namespaced: true,
    state:{
        designDetail:null,
		designPreviewData:{},
		frontBack:{
			front:[],
			back:[],
			body:{},
		},
		selectDetail:null,
		printZIndex:-1,
		currentDetailType:'',
    },
    mutations:{
        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 = []
			// let printZIndex = 
			data.clothes.forEach((v:any,index:any)=>{
				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.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
            state.designDetail = data
        },
		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,data){
			// state.designDetail.clothes.forEach((item:any) => {
			// 	if(item.id == state.selectDetail.id){
			// 	}
			// });
			if(!state.selectDetail.newDetail){
				state.selectDetail.newDetail = {}
			}
			if(state.currentDetailType == 'sketch'){
				state.selectDetail.newDetail[state.currentDetailType] = data
			}else if(state.currentDetailType == 'color'){
				state.selectDetail.newDetail[state.currentDetailType] = data
			}else{
				if(!state.selectDetail.newDetail[state.currentDetailType])state.selectDetail.newDetail[state.currentDetailType] = []
				const foundObjects = state.selectDetail.newDetail[state.currentDetailType].filter((item:any) => item.id === data.id);
				if(foundObjects.length == 0){
					state.selectDetail.newDetail[state.currentDetailType].push(data)
				}
			}
		},
		setCurrentDetailType(state,data){
			if(state.selectDetail && state.selectDetail.id)state.currentDetailType = data
		},
        setDesignColthes(state,data){
			if(!state.currentDetailType)state.currentDetailType = 'sketch'
			if(state.selectDetail && state.selectDetail.id == data){
				return
			}
			//切换选择
			// 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)=>{
						v.designOpenrtionBtn = false
						if(v.id == data){
							v.designOpenrtionBtn = true
						}
					})
				}
			});
        },
		setPraeview(state,data){//preview
			data.clothes.forEach((item:any) => {
				if(!item.id)return
				let id_ = state.selectDetail.id
			    state.selectDetail.change = item.change
				if(state.selectDetail?.newDetail?.color){
					state.selectDetail.color = state.selectDetail?.newDetail?.color
					state.selectDetail.newDetail.color = null
				}
				state.selectDetail.designType = item.designType
				state.selectDetail.gradient = item.gradient
				state.selectDetail.id = item.id
				state.selectDetail.layersObject = item.layersObject
				state.selectDetail.newDetail[state.currentDetailType] = null
				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.type = item.type
				state.selectDetail.undividedLayer = item.undividedLayer
				// if(state.currentDetailType == 'sketch'){//如果是sketch更新front和back
					let el:any = document.querySelector('.molepositon .perview_img')
					const img = new Image();
					img.onload = () => {
						let scale:any = el.parentNode.offsetWidth / img.width
						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
								}
								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
								}
							}
						}
					})
					};
					img.src = state.frontBack.body.path;
					
				// }
			})
			
		},
		// setDesignItemOthers(state,data){
        //     state.designDetail.others[data.index] = data.others
        // },
    },
    actions:{
		async setSubmit({ commit },str) {
				console.log(str);
				
			//   setTimeout(() => {
			// 	const message = 'Hello from Vuex';
			// 	commit('setMessage', message); // 更新状态
			// 	resolve(message);  // 返回数据
			//   }, 1000);
		  },
	  
    }
}

export default DesignDetailCopy