aida_front/src/component/Detail/detailRight/editPrintElement.vue

<template>
    <div class="editPrintElement">
		<div class="detailText" style="text-align: left; margin-bottom: 1rem;" v-if="type == 'print'">
			{{ $t('DesignPrintOperation.ModifyPrint') }}
		</div>
		<div class="printOverallBtn" v-if="type == 'print'">
			<div class="overallSlogin">
				<label>
					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="single">
					{{ $t('DesignPrintOperation.Single') }}
				</label>
				<label>
					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="overall">
					{{ $t('DesignPrintOperation.Overall') }}
				</label>
			</div>
			
		</div>
		<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}">
			<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
				<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}">
					<div class="imgItem" 
						v-if="stateOverallSingle == 'single'"
						v-for="item in printStyleList[type][stateOverallSingle]" 
						:key="item"
						@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
						@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
					>
						<img :src="item.path" alt="">
						<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
					</div>
					<div class="imgItem" 
						v-if="stateOverallSingle == 'overall'"
						v-for="item in printStyleList[type][stateOverallSingle]" 
						:key="item"
						style="width:14rem;height:14rem;left: 0;right: 0;margin: 0 auto;"
					>
						<img :src="item.path" alt="">
						<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
					</div>
				</div>
			</div>
		</div>
		<div v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
			<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
			<a-slider id="system_silder"
				class="system_silder"
				:min="20"
				:max="1000"
				v-model:value="systemDesignerPercentage"
				:tip-formatter="formatter"
			>
			</a-slider>
		</div>
		<div class="editPrintElementBox">
			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
			<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
				<div class="designOpenrtion_imgMask">
					<div class="designOpenrtion_print">
						<div 
							v-for="item,index in printStyleList[type][stateOverallSingle]" 
							:key="item"
							v-if="stateOverallSingle == 'single'"
							:style="item?.pattern?.style" 
							@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
							class="modal_imgItem" 
							ref="content" 
							>
							<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
						</div>
					</div>
					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
					<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
					<div class="designOpenrtion_btn">
						<ul v-if="stateOverallSingle == 'single'" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
							<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
							<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
							<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
							<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
							<li class="designOpenrtion_rotote" v-rotote.stop="[index,item?.transform,type]"></li>
							<li class="designOpenrtion_delete" @click.stop="deletePrint">
								<img src="../../../assets/images/homePage/cuowu.svg" alt="">
							</li>
						</ul>
						<div v-show="stateOverallSingle != 'single'"></div>
						<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
							<i class="fi fi-rr-arrows animtion1"></i>
							<i class="fi fi-rr-arrows animtion2"></i>
							<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="mark_loading" v-show="loadingShow">
				<a-spin size="large" />
			</div>
		</div>
		<!-- <div class="clearOverall" style="text-align: center; height: 6rem;">
			<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
		</div> -->
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive, onBeforeUnmount} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
    components:{
    },
	props: {
		type: {
		    type: String,
			default: 'print',
		}
	},
    setup(props,{emit}) {
        const store = useStore();
		const editPrintElementDom = reactive({
			imgDom:null as any,
			sketchImg:null as any,
		})
		const editPrintElementData = reactive({
			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
			currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
			systemDesignerPercentage:0,
			printStyleList:{
				print:{
					single:[],
					overall:[],
				},
				element:{
					single:[],
				}
			} as any,
			stateOverallSingle:'single',
			type:props.type,
			imgDomIndex:0,
			direction:'',//判断点的那条边
			printZIndex:2,//印花优先级
			sketchWH:{
				width:0,
				height:0,
				scale:[1,1],
			},
			loadingShow:false,
			printElementList:null as any,
			isSketchLoad:false,
		})
		const collItemSize = reactive({
			collValue:18,
			num:1,
			prentWidth:0 as any,
			padding:10,
			likeStyle:{
				
			},
			itemStyle:{
				width:0,
				height:0,
			},
			collTime:null as any,
			isMove:false,
			elList:[] as any,
			selectIndex:0,
		})
		
		const setOveralSingle = ()=>{
			setItemPosition()
		}
		const formatter = (value:any)=>{
			return `${value}%`;
		}
		const deletePrint = ()=>{
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
		}
		const setScaleLocation:any = (item:any)=>{
		    return new Promise((resolve, reject) => {
				// let location = [,]
				let img = new Image
				img.onload = ()=>{
					let imgScale = img.width / img.height
					let zoom = 2
					let width = editPrintElementData.sketchWH.width / zoom
					let height = width / editPrintElementData.sketchWH.height
					
					let scale = [width / editPrintElementData.sketchWH.width,height]

					let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale[0]
					let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale[1]
					let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
					let y = sketchH / 2 -(sketchH * height/2)
					if(!editPrintElementData.stateOverallSingle == 'single'){
						x = sketchW / 2
						y = sketchH / 2
					}
					let location = [x,y]
					resolve({scale,location})
				}
				img.src = item.url
			})
		}
		const addPrintELement = async (data:any)=>{
			if(!editPrintElementData.isSketchLoad)return
			let {scale,location} = await setScaleLocation(data)
			let item = {
				angle:0,
				designType:data.designType,
				ifSingle:editPrintElementData.stateOverallSingle == 'single',
				level2Type:data.level2Type,
				location,
				minIOPath:data.minIOPath || data.originalUrl,
				path:data.url,
				priority:editPrintElementData.printZIndex,
				scale,
			}
			getItemPosition(item)
			setItemPosition()
			store.commit('DesignDetail/setCurrentPrintElement',null)
		}
		const previewDetailPrintData = ()=>{
			let data:any = []
			let index = 1
			let setData = (item:any,index:number)=>{
				let scale,location
				let style = item.pattern.style
				let sketchWH = editPrintElementData.sketchWH.scale
				if(item.ifSingle){
					scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
					location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
				}else{
					let x = Number(style.left.replace(/px/g,''))
					let y = Number(style.top.replace(/px/g,''))
					location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
					scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
					// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
					// location = [item.pattern.style.left,item.pattern.style.top]
				}
				let value  ={
					angle : item.pattern.transform.rotateZ,
					// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
					location : location,
					priority:index,
					scale: scale,
					designType:item.designType,
					level2Type:item.level2Type,
					path:item.path,
					minIOPath:item.minIOPath,
					ifSingle:!!item.ifSingle,
				}
				return value
			}
			if(editPrintElementData.printStyleList[props.type].single.length>0){
				sort(editPrintElementData.printStyleList[props.type].single)
			}
			editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
				data.push(setData(item,index))
				index++ 
			})
			editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
				data.push(setData(item,index))
				index++ 
			})
			let value = {
				data,
				str:props.type
			}
			store.commit('DesignDetail/setNewDetail',value)
		}
		const sort = (list:any)=>{
			list.sort((a:any,b:any)=>{
			    var a_num = a.pattern.style.zIndex;
				var b_num = b.pattern.style.zIndex;
				return a_num - b_num;
			})
		}
		const getPosition = ()=>{
		    
			// editPrintElementData.selectDetail.newDetail[props.type].push()
		}
		const getItemPosition = (item:any)=>{
			let left,top
			
			if(item.ifSingle){
				//single
				left = item.location[0] / editPrintElementData.sketchWH.scale[0]
				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
			}else{
				//overall
				editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
				left = item.location[0] / editPrintElementData.sketchWH.scale[0]
				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
				editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
			}
			let pattern = {
				centers:{left:0,top:0},
				style:{
					left:left+'px',
					top:top+'px',
					right:"auto",
					bottom:"auto",
					width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
					height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
					// zIndex:item.priority,
				},
				transform:{
					rotateZ:item.angle?item.angle:0
				},
				designOpenrtionBtn:false
			}
			editPrintElementData.printZIndex++
			item.pattern = pattern
			if(item.ifSingle){
				editPrintElementData.printStyleList[props.type].single.push(item)
			}else{
				editPrintElementData.printStyleList[props.type].overall = []
				editPrintElementData.printStyleList[props.type].overall.push(item)
			}

		}
		const setPosition = ()=>{
			nextTick(()=>{
				let img = new Image
				img.onload = ()=>{
					// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
					let sketchScale = [1,1]
					let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
					let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight

					editPrintElementData.sketchWH = {
						width:editPrintElementDom.sketchImg.offsetWidth,
						height:editPrintElementDom.sketchImg.offsetHeight,
						scale:[scaleX,scaleY],
					}
					if(!editPrintElementData.selectDetail.printObject.prints)return
					let state = true
					// editPrintElementData.stateOverallSingle = 'single'
					let arr:any = editPrintElementData.selectDetail.printObject.prints
					if(props.type == 'element'){
						arr = editPrintElementData.selectDetail.trims.prints
					}
					if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
						arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
					}
					if(arr && arr.length > 0){
						arr.forEach((item:any)=>{
							if(!item.ifSingle && arr.length == 1){
								editPrintElementData.stateOverallSingle = 'overall',
								state = false
							}
							getItemPosition(item)
						})
						setItemPosition()
					}
					// if(props.type == 'print'){
					// 	editPrintElementData.overallSingle = state
					// }
				}
				// undividedLayer
				//计算宽高使用editPrintElementData.selectDetail.path
				// img.src = editPrintElementData.selectDetail.path
				img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
			})
		}
		// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
		// 	if(!newVal)return
		// 	editPrintElementData.printStyleList[props.type] = {
		// 		single:[],
		// 		overall:[],
		// 	}
		// 	setPosition()
		// },{immediate: true,})
		watch(()=>editPrintElementData.currentPrintElement,(newVal)=>{
			if(newVal){
				addPrintELement(newVal)
			}
		})
		watch(()=>((editPrintElementData.selectDetail?.undividedLayer || editPrintElementData.selectDetail?.id)),(newVal)=>{
			if(!newVal)return
			editPrintElementData.isSketchLoad = false,
			editPrintElementData.printStyleList[props.type] = {
				single:[],
				overall:[],
			}
			setPosition()
		},{immediate: true,})
		//设置移动
		const itemMoveMousedown = (index:number,event:any)=>{
			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
			editPrintElementData.imgDomIndex = index
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
				v.pattern.designOpenrtionBtn = false
			})
			if(editPrintElementData.stateOverallSingle != 'single'){
				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
			}else{
				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
			}
			let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
			let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
				scale:scale,
				rotateZ:rotateZ?rotateZ:0,
			}
			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
			let left = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.left.replace(/px/g,''))
			let top = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.top.replace(/px/g,''))
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.left = imgDomWH.x+event.offsetX-left
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.top = imgDomWH.y+event.offsetY-top
			// document.addEventListener("mouseup", this.mouseup);
			// document.addEventListener("mousemove", this.moveMousemove);
			document.addEventListener('mousemove', mouseMove);
			document.addEventListener('touchmove', touchmove);
			document.addEventListener('mouseup', mouseup);
			document.addEventListener('touchend', mouseup);
		}
		//设置尺寸
		const itemSizeMousedown = (direction:any,event:any)=>{
			editPrintElementData.direction = direction
			editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
			let scale = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
			let rotateZ = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.designOpenrtionBtn = true
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.transform = {
				scale:scale,
				rotateZ:rotateZ?rotateZ:0,
			}
			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
			let li = (document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
			if(editPrintElementData.direction == 'right' || editPrintElementData.direction == 'bottom'){
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX-li
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY-li
			}else{
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
			}
			
			// document.addEventListener("mouseup", this.sizeMouseup);
			// document.addEventListener("mousemove", this.sizeMousemove);
			document.addEventListener('mousemove', sizeMouseMove);
			document.addEventListener('touchmove', sizeTouchmove);
			document.addEventListener('mouseup', sizeMouseup);
			document.addEventListener('touchend', sizeMouseup);
		}
		const mouseMove = (event:any)=>{
			let e = getMousePosition(event,false)
			mouseMoveOperation(e)
		}
		const touchmove = (event:any)=>{
			let e = getMousePosition(event,true)
			mouseMoveOperation(e)
		}
		//鼠标移动
		const mouseMoveOperation = (e:any)=>{
			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
			let parentNode:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
			parentNode = parentNode.getBoundingClientRect()
			let x:any = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)+'px'
			let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
			if(editPrintElementData.stateOverallSingle != 'single'){
				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
				}
				if(x.replace(/px/g,'') <= 0){
					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 0+'px'
				}
				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = parentNode.height - imgDomWH.height+'px'
				}
				if(y.replace(/px/g,'') <= 0){
					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 0+'px'
				}
			}
		
		}
		const sizeMouseMove = (event:any)=>{
			let e = getMousePosition(event,false)
			sizeMouseMoveOperation(e)
		}
		const sizeTouchmove = (event:any)=>{
			let e = getMousePosition(event,true)
			sizeMouseMoveOperation(e)
		}
		const sizeMouseMoveOperation = (e:any)=>{
			let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
			let parentNode =editPrintElementDom.imgDom.parentNode
			let width = imgDomWH.width
			let height = imgDomWH.height
			let num = width/height
			let num1 = height/width
			let w,h
			//判断移动四个边
			if(editPrintElementData.direction == 'right'){
				w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)
				h = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
				width = w+'px'
				height = w*num1+'px'
			}else if(editPrintElementData.direction == 'top'){
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 'auto'
				// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.bottom = parentNode.offsetHeight -imgDomWH.height - editPrintElementDom.imgDom.offsetTop+'px'
				w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
				h = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top - e.clientY)
				
				height = h+'px'
				width = h*num+'px'
			}else if(editPrintElementData.direction == 'bottom'){
				h = (e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)
				height = h+'px'
				width = h*num+'px'
			}else if(editPrintElementData.direction == 'left'){
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
				editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.right = parentNode.offsetWidth -imgDomWH.width - editPrintElementDom.imgDom.offsetLeft+'px'
				w = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left - e.clientX)
				width = w+'px'
				height = w*num1+'px'
			}
			//判断尺寸是否到边
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.width = width
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.height = height

		}
		//鼠标抬起
		const sizeMouseup = (e:any)=>{
			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style={
				right:'auto',
				left:editPrintElementDom.imgDom.offsetLeft+'px',
				bottom:'auto',
				top:editPrintElementDom.imgDom.offsetTop+'px',
				height:editPrintElementDom.imgDom.offsetHeight+'px',
				width:editPrintElementDom.imgDom.offsetWidth+'px',
				// zIndex:editPrintElementData.printZIndex
			}
			document.removeEventListener('mousemove',sizeMouseMove)
			document.removeEventListener('touchmove',sizeTouchmove)
			document.removeEventListener('mouseup',sizeMouseup) 
			document.removeEventListener('touchend',sizeMouseup)
		}
		const mouseup = (e:any)=>{

			document.removeEventListener('mousemove',mouseMove)
			document.removeEventListener('touchmove',touchmove)
			document.removeEventListener('mouseup',mouseup) 
			document.removeEventListener('touchend',mouseup)
		}
		const clearOverall = ()=>{
			editPrintElementData.printStyleList[props.type].overall = []
		}


		const designMousedown = (e:any,uniqueId:number,str:string)=>{
			let item:any  = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
			if(!item)return
			const pEl = editPrintElementData.printElementList;
			item.el.style.zIndex = 2;
			item.el.style.transition = 'all 0s';
			let startX = e.clientX,
			startY = e.clientY,
			startSL = + pEl.scrollLeft,
			left = item.el.offsetLeft,
			top = item.el.offsetTop;
			collItemSize.isMove = false;
			const elWidth = item.el.offsetWidth;

			
			var toMovePx = 1;
			var toMoveType = "";//left right
			let moveFun = (e:any) => {
				collItemSize.isMove = true
				let X = e.clientX - startX + (pEl.scrollLeft - startSL) + left;
				let Y = 0;
				if(X < 0) X = 0;
				const maxLeft = parseInt(collItemSize.prentWidth) - elWidth - collItemSize.padding ;
				if(X > maxLeft) X = maxLeft;
				item.el.style.left = `${X}px`;
				item.el.style.top = `${Y}px`;

				const pElBCR = pEl.getBoundingClientRect();
				var num = 2;
				if(X < pEl.scrollLeft){
					toMoveType = "left";
					num = pElBCR.x-e.clientX;
				}else if(X > pEl.scrollLeft + pEl.clientWidth - elWidth){
					toMoveType = "right";
					num = e.clientX - pElBCR.x - pElBCR.width;
				}else{
					toMoveType = "";
				}
				toMovePx = num / 20;
				if(toMovePx < 2) toMovePx = 2;


				reRange(item, X, Y,str);
			};

			const updataFun = ()=>{
				if(toMoveType == "left"){
					let left = pEl.scrollLeft - toMovePx;
					if(left < 0)left = 0;
					item.el.style.left = `${left}px`;
					pEl.scrollLeft = left;
					reRange(item, left, 0);
				}else if(toMoveType == "right"){
					let left = pEl.scrollLeft + toMovePx;
					if(left > pEl.scrollWidth - pEl.clientWidth)left = pEl.scrollWidth - pEl.clientWidth;
					const elLeft = left + pEl.clientWidth - elWidth - collItemSize.padding;
					item.el.style.left = `${elLeft}px`;
					pEl.scrollLeft = left;
					reRange(item, elLeft, 0);
				}else if(toMoveType == "stop"){
					return;
				}
				requestAnimationFrame(updataFun);
			}
			updataFun();

			let mouseUpFun = ()=>{
				toMoveType = "stop"
				document.removeEventListener('mousemove',mouseMove)
				document.removeEventListener('touchmove',touchmove)

				document.removeEventListener('mouseup',mouseUpFun) 
				document.removeEventListener('touchend',mouseUpFun) 
				item.el.style.zIndex = 1;
				item.el.style.transition = 'top .5s';
				moveItem();
				sortDesignCollection()
			}
			let mouseMove = function(event:any){
				let e = getMousePosition(event,false)
				moveFun(e)
			}
			let touchmove = function(event:any){
				let e = getMousePosition(event,true)
				moveFun(e)
			}

			document.addEventListener('mousemove',mouseMove)
			document.addEventListener('touchmove',touchmove)

			document.addEventListener('mouseup',mouseUpFun) 
			document.addEventListener('touchend',mouseUpFun) 
		}
		//排序  从大到小
		const sortDesignCollection = ()=> {
		
		}
		const reRange = (item:any, x:number, y:number,str?:string)=>{
			let elList:any = collItemSize.elList
			let index = collItemSize.selectIndex
			let width,height,num
			num = collItemSize.num
			width = collItemSize.itemStyle.width
			height = collItemSize.itemStyle.height
			
			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
			moveIndex = elList.length - 1 - moveIndex
			moveIndex = moveIndex < 0 ? 0 : moveIndex;
			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
			if(moveIndex != index){
				collItemSize.selectIndex = moveIndex;
				let currentSort = item.sort;
				for(let i = 0;i < elList.length;i++){
					if(currentSort < moveIndex){
						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
							elList[i].sort -= 1;
						};
					}else if(currentSort > moveIndex){
						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
							elList[i].sort += 1;
						};
					}
				};
				elList[item.index].sort = moveIndex;
				moveItem();
			}
		}
		const moveItem = ()=>{
			let value = collItemSize.num
			for(let i = 0;i < collItemSize.elList.length;i++){
				let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.width +collItemSize.padding) + 'px';
				collItemSize.elList[i].el.style.left = height
			}
			setZIndex()
		}
		const navDelete = (item:any)=>{
			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
			let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
			arr.splice(index,1)
			setItemPosition()
		}
		const setZIndex = ()=>{
			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
			collItemSize.elList.forEach((elItem:any)=>{
				let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
				arr[clothesIndex].pattern.style.zIndex = elItem.sort
				// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
				// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
				// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
				// editPrintElementData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
			})
		}
		const setItemPosition = async ()=>{
			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
			await nextTick()
			let parent = editPrintElementData.printElementList.offsetWidth
			let elArr = editPrintElementData.printElementList.querySelectorAll('.imgItem')
			let value = collItemSize.num
			const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
			const remValue = 8 * htmlFontSize;
			//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
			collItemSize.itemStyle.width = remValue
			collItemSize.elList = []
			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]

			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});

			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
			const sortMap = {} as any;
			sortedArray.forEach((item, index) => {
				sortMap[item.priority] = index ; // 1, 2, 3, 4...
			});
			for(let i = 0;i < elArr.length;i++){
				collItemSize.elList.push({
					el: elArr[i], 
					// sort: elArr.length - i -1, 
					sort: sortMap[arr[i].priority],
					index: i,
					uniqueId:arr[i]?.uniqueId || 99999,
				});
			}
			collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
			moveItem()
		} 
		onMounted(()=>{
			if(props.type == 'element'){
				editPrintElementData.stateOverallSingle = 'single'
			}
		})
		onBeforeUnmount(()=>{
			previewDetailPrintData()
		})
        return{
			getMousePosition,
			...toRefs(editPrintElementDom),
			...toRefs(editPrintElementData),
			...toRefs(collItemSize),
			setOveralSingle,
			formatter,
			itemMoveMousedown,
			itemSizeMousedown,
			deletePrint,
			previewDetailPrintData,
			clearOverall,
			designMousedown,
			navDelete,
        }
    },
	directives:{
		//操作旋转
		rotote:{
			mounted(el,value:any){
				let mousedown = function(event:any){
					let e = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event:any){
					let e = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation =  (e:any) => {
				let elParent:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
				let mouse = true;
				let angle  = 0
				let num = 1
				let x = 0
				let y = 0
				num = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.scale
				angle = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ
				// 添加鼠标按下事件监听器
				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
					mouse = true;
					var info = el.getBoundingClientRect();
					let eX = info.x + info.width / 2;
					let eY = info.y + info.height / 2;
					let mouseMove = function(event:any){
						let e = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = (e:any) => {
						if (mouse) {
							let X = eX 
							let Y = eY
							let x = e.clientX - X
							let y = Y - e.clientY
							angle = Math.atan2(x,y)*(180 / Math.PI)
							if(elParent){
								elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
							}
							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
						}
					}
					// 添加鼠标松开事件监听器
					let mouseup = () => {
						value.instance.printStyleList[value.value[2] ][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ = angle
						mouse = false;
						// document.removeEventListener('mouseup',mouseup)
						// document.removeEventListener('mousemove',mousemove)
						document.removeEventListener('mousemove',mouseMove)
						document.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',mouseup) 
					}
					// document.addEventListener('mouseup', mouseup);
					document.addEventListener('mousemove', mouseMove);
					document.addEventListener('touchmove', touchmove);
					document.addEventListener('mouseup', mouseup);
					document.addEventListener('touchend', mouseup);
				}
				el.addEventListener('mousedown',mousedown)
				el.addEventListener('touchstart',touchstart)
			}

			},
	},
	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .editPrintElement{
		height: 100%;
		width: 100%;
		display: flex;
		flex: 1;
		overflow: hidden;
		flex-direction: column;
		> .printOverallBtn{
			display: flex;
			flex-direction: column;
			> .overallSlogin{
				align-items: center;
				display: flex;
				// margin-top: 1.4rem;
				margin-bottom: 2.2rem;
				> label{
					display: flex;
					align-items: center;
					font-size: 1.6rem;
					margin-right: 2.4rem;
					&:last-child{
						margin-right: 0rem;
					}
					> input{
						margin-right: 1rem;
					}
				}
			}
		}
		.habit_System_Designer {
			align-items: center;
			display: flex;
			justify-content: center;
			.ant-slider-track,
			.ant-slider-rail {
				background-color: #e1e1e1;
				border-radius: calc(0.5rem*1.2);
			}
			:deep(.system_silder){
				width: 17rem;
			}
			.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
			.ant-slider-handle {
				background-color: #2d2e76 !important;
				border: none !important;
			}
			.ant-slider-handle:hover{
				box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
			}
			.habit_System_Designer_text{
				font-size: 1.8rem;
				color: rgba(0, 0, 0, 0.7);
				margin-right: 3rem;
				font-weight: 600;
			}
		}
		> .printElementListBorder{
			&.single{
				padding: 2rem 4rem;
				width: 100%;
				border-radius: 1.5rem;
				border: .05rem solid #000;
			}
			> .printElementList{
				width: 100%;
				height: 10rem;
				position: relative;
				overflow-x: auto;
				
				.itemList{
					height: 100%;
					object-fit: contain;
				}
				.imgItem{
					width: 8rem;
					height: 8rem;
					position: absolute;
					cursor: pointer;
					border-radius: 1rem;
					overflow: hidden;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					> i{
						position: absolute;
						right: 1rem;
						top: 1rem;
						color: #fff;
						text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
					}
				}
			}
		}
		
		> .editPrintElementBox{
			flex: 1;
			overflow: hidden;
			position: relative;
			margin: 2rem 0;
			width: 80%;
			align-self: center;
			> .mark_loading{
				position: absolute;
			}
			> .designOpenrtion_centent{
				margin: 0 auto;
				overflow: hidden;
				justify-content: space-between;
				user-select:none;
				position: absolute;
				top: 50%;
				left: 50%;
				max-width: 100%;
				max-height: 100%;
				transform: translate(-50%,-50%);
				display: flex;
				justify-content: center;
				// width: 100%;
				// max-height: 70%;
				width: max-content;
				&.active{
					flex-direction: row;
				}
				.designOpenrtion_imgMask{
					width: auto;
					height: auto;
					min-width: 60%;
					overflow-y: auto;
					overflow-x: hidden;
					// max-height: 80%;
					position: relative;
					>img{
						z-index: 2;
						position: relative;
						// height: 100%;
						max-width: 100%;
						// width: 100%;

					}
					.designOpenrtion_sketch_mask{
						z-index: 2;
						// z-index: 3;
						position: absolute;
						inset: 0;
						width: 100%;
					}
					>div{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
					}
				}
				.designOpenrtion_print{
					z-index: 3;
					.modal_imgItem{
						position: absolute;
						top: 0;
						img{
							width: 100%;
							height: 100%;
							float: left;
							user-select:none;
							-webkit-user-drag: none;
						}
					}
				}
				.designOpenrtion_btn{
					z-index: 3;
					>div{
						width: 100%;
						height: 100%;
						border: 2px solid rgb(20, 188, 255);
						position: absolute;
					}
					ul{
						list-style: none;
						// width: 100%;
						// height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						box-sizing: border-box;
						border: 2px solid rgb(20, 188, 255);
						padding: 0;
						-webkit-user-drag: none;
						user-select:none;
						opacity: 0;
						margin: 0;
					
						&.designOpenrtion_Mouoverall{
							opacity: 1;
							border: none;
							width: calc(1.4rem*1.2);
							height: calc(1.4rem*1.2);
							z-index: 2;
							i{
								display: flex;
								color: #14bcff;
								justify-content: center;
								cursor: pointer;
							}
							.animtion1{
								animation: anim 4s 2s linear infinite;
								// animation-delay: .5;
							}
							.animtion2{
								animation: anim 4s linear infinite;
								position: absolute;
								top: 0;
								left: 0;
							}
							@keyframes anim{
								0% {
									opacity: 1;
									transform: scale(1);
								}
								100% {
									opacity: 0;
									transform: scale(3);
								}
							}

						}
						li{
							cursor: pointer;
							// border-radius: 50%;
							width: calc(2rem*1.2);
							height: calc(2rem*1.2);
							background-color: rgb(20, 188, 255);
							position: absolute;
							pointer-events: none;
						}
						&.active{
							opacity: 1;
							li{
								pointer-events: auto;
							}
						}
						.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
							left: 50%;
							transform: translate(-50%,-50%) ;
							cursor: n-resize;
						}
						.designOpenrtion_btn_top{
							top: 0;
						}
						.designOpenrtion_btn_bottom{
							top: 100%;
						}
						.designOpenrtion_btn_left,.designOpenrtion_btn_right{
							top: 50%;
							transform: translate(-50%,-50%) ;
							cursor: e-resize;
						}
						.designOpenrtion_btn_left{
							left: 0;
						}
						.designOpenrtion_btn_right{
							left: 100%;
						}
						.designOpenrtion_rotote{
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							width: 0;
							height: 0;
						}
						.designOpenrtion_delete{
							position: absolute;
							top: 0;
							right: 0;
							width: 2.5rem;
							background: none;
							transform: translate(100%, -100%);
							height: 2.5rem;
							img{
								width: 100%;
								height: 100%;
							}
						}
						.designOpenrtion_rotote::after{
							position: absolute;
							content: "";
							background-color: #14bcff;
							width: calc(.2rem*1.2);
							height: calc(3rem*1.2);
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
						}
						.designOpenrtion_rotote::before{
							position: absolute;
							content: "";
							background-color: #14bcff;
							top: calc(50% - 3rem*1.2);
							left: 50%;
							transform: translate(-50%,-50%) ;
							width: calc(1.5rem*1.2);
							height: calc(1.5rem*1.2);
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
</style>