aida_front/src/component/HomePage/layout.vue

<template>
  <div ref="layoutModal">
	<a-modal
            class="layout_modal generalModel"
            v-model:visible="layout"
            :footer="null"
			:get-container="() => $refs.layoutModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
			:keyboard="false"
            :mask="true"
			:destroyOnClose="true"
        >
            <div class="layout_content">
				<div class="collection_title">
					<div class="collection_title_text">
						<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
					</div>
				</div>
				<div class="generalModel_btn">
					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
						<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
							<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
							<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
							<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
						</svg>
					</div>
				</div>
				<div class="layout_nav">
					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.passive="setpitch(item,index)">
						<img :src="item.imgUrl">
					</div>
				</div>
				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content"  :style="{'background-image':`url(${item.imgUrl})`,'transform':`scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}">
						<!-- <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg>  -->
						<ul v-show="item.setPitch" class="layout_btn" >
							<li class="layout_btn_top" v-compile.stop="'top'"></li>
							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
							<li class="layout_btn_left" v-compile.stop="'left'"></li>
							<li class="layout_btn_right" v-compile.stop="'right'"></li>
							<li class="layout_rotote" v-rotote.stop='item' :style="{'transform':`translate(-50%, -50%) rotateZ(${item.angle}deg)`}"></li>
							<li class="layout_translate" v-translate.stop></li>
							<!-- <li class="layout_translate" v-translate.stop></li> -->
							<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
							<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
							<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
							<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
						</ul>
					</div>
						<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
					<!-- <draggable 
						v-model="layoutList" 
						group="people" 
						@start="drag=true" 
						@end="drag=false" 
						animation= "150"
						item-key="id">
						<template #item="{element,index}">
							<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
								<img :src="element.imgUrl">
							</div>
						</template>
					</draggable> -->
				</div>
               
				<div class="layout_left">
					<div class="layout_left_text">
						{{ $t('layout.LayerOptions') }}
					</div>
					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
						</div>
					</div>
				</div>
				<div class="layout_right" v-show="isMobile">
					<div class="layout_right_text">
						{{ $t('DesignPrintOperation.Scale') }}
					</div>
					<a-slider
						v-model:value="moodItemScale"
						@change="setMoodItemScale"
					>
					</a-slider>
				</div>
				<!-- <div class="layout_right">
					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
						</div>
					</div>
				</div> -->
                <div
                    class="button_second submit_button"
                    @click="submitTemplate()"
                >
					{{ $t('layout.Submit') }}
                </div>
            </div>
			<div class="mark_loading" v-show="loadingShow">
				<a-spin size="large" />
			</div>
			<a-upload
				:capture="null"
				:action="uploadUrl + '/api/element/upload'"
				list-type="picture-card"
				:data="{
					...upload,
				}"
				:headers="{ Authorization: token }"
				:before-upload="beforeUpload"
				multiple
				accept=".jpg,.png,.jpeg,.bmp"
			>
			</a-upload>
        </a-modal>

  </div>
</template>

<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
import draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl } from "@/tool/util";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
	props:["moodb_className",'flex_direction'],
	components: {
		draggable
    },
    setup(prop) {
		let store = useStore()
        let layout: any = ref(false);
        let templateFileList: any = ref([]);
        let openClick: any = ref(1);
		let drag = false;
		let layoutList:any = ref([])
		const content:any = ref<HTMLElement | null>(null);
		let loadingShow = ref(false)
		let styleObj:any = {}
		let moodItemScale = ref(0)
		let domObj = {
			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
		}
		let isMobile = ref(false)
        return {
            layout,
            templateFileList,
            openClick,
			drag,
			layoutList,
			content,
			loadingShow,
			moodItemScale,
			styleObj,
			domObj,
			isMobile,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
            store: useStore(),

			moodb : moodb.moodb_,
			moodbList:{},
			moodbClassName:[],
			setabsolute:false,
			token: "",
            uploadUrl: "",
			moodIndex:0,
			upload: {
                isPin: 0,
				gender:'',
                level1Type: "Moodboard",
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
        };
    },

    mounted() {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
    },
	directives:{
		//操作移动
		layout:{
			mounted (el,layout:any,binding) {
				
				let mousedown = function(event: MouseEvent){
					let e:any = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event: any){
					let e:any = getMousePosition(event,true)
					mouseDownOperation(e)
				}

				let mouseDownOperation = function(e: MouseEvent){
					el.parentElement.children.forEach((v:any) => {
						v.style.left = v.offsetLeft+'px'
						v.style.top = v.offsetTop+'px'

					});
					el.parentElement.children.forEach((v:any) => {
						v.classList.add('active')
					});
					el.style.zIndex = GO.zIndex++
					let left = el.style.left? el.style.left.replace(/px/g,'') : 0
					let top = el.style.top? el.style.top.replace(/px/g,'') : 0
					let mouseX = e.offsetX //鼠标点击位置到domleft距离
					let mouseY = e.offsetY
					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
					let domY = e.clientY - e.offsetY - Number(top)
					let mouse = true
					let mouseMove = function(event:MouseEvent){
						let e:any = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e:any = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = (e:any)=>{
						if(mouse){
							el.style.left = e.clientX-mouseX - domX+'px'
							el.style.top = e.clientY-mouseY - domY+'px'
							if(el.offsetLeft <=0){
								el.style.left = 0+'px'
							}
							if(el.offsetTop <=0){
								el.style.top = 0+'px'
							}
							if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
								el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'px'
							}
							if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
								el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'px'
							}
						}
					}
					let mouseup = function(){
						mouse = false
						document.removeEventListener('mousemove',mouseMove)
						document.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',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)

			},
			updated (el,layout) {
				
			}
		},
		//操作大小
		compile:{
			mounted (el,compile) {
				let mousedown = (event:any)=>{
					let e:any = getMousePosition(event,false)
					mouseDownOperation(e)
				}
				let touchstart = (event:any)=>{
					let e:any = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation = (e: MouseEvent)=>{
					let elParent = el.parentNode.parentNode
					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
						v.style.left = v.offsetLeft+'px'
						v.style.top = v.offsetTop+'px'
					});
					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
						v.classList.add('active')
					});
					if(compile.value == 'right'){
						
					}else if(compile.value == 'left'){
						elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
						elParent.style.left = 'auto'
					}else if(compile.value == 'top'){
						elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
						elParent.style.top = 'auto'
					}else if(compile.value == 'bottom'){
						
					}
					
					let gpsXY:any
					let parent:any
					if(compile.value == 'left' || compile.value == 'right'){
						gpsXY = e.clientX
						parent = elParent.offsetWidth
					}else{
						parent = elParent.offsetHeight
						gpsXY = e.clientY
					}
					let mouse = true
					let mouseMove = function(event:MouseEvent){
						let e:any = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e:any = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = function(e:MouseEvent){
						if(mouse){
							if(compile.value == 'left'){
								elParent.style.width = parent + gpsXY - e.clientX + 'px' 
							}else if(compile.value == 'right'){
								elParent.style.width = parent + e.clientX - gpsXY + 'px' 
							}else if(compile.value == 'top'){
								elParent.style.height = parent + gpsXY - e.clientY + 'px' 
							}else if(compile.value == 'bottom'){
								elParent.style.height = parent + e.clientY - gpsXY + 'px' 

							}
						
							if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
								elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
							}
							if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
								elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
							}
							
							if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
								elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
							}
							if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
								elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
							}
						}
					}
				
					let mouseup = function(){
						mouse = false
						document.removeEventListener('mousemove',mouseMove)
						document.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',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)
			}
		},
		//操作旋转
		rotote:{
			mounted(el,item){
				let mouse = true;
				let angle :any = 0
				let num:any = 1
				let x = 0
				let y = 0
				let elParent = el.parentNode.parentNode
				
				let mousedown = function(event: MouseEvent){
					let e:any = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event: any){
					let e:any = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation = (e:any) => {
					mouse = true;
					var info = el.getBoundingClientRect();
					let eX = info.x + info.width / 2;
					let eY = info.y + info.height / 2;
					num = item.value.zoom?item.value.zoom :1
					angle = item.value.angle?item.value.angle:0
					let mouseMove = function(event:MouseEvent){
						let e:any = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e:any = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = (e:MouseEvent) => {
						if (mouse) {
							let X = eX 
							let Y = eY
							let x:any = e.clientX - X
							let y:any = Y - e.clientY
							angle = Math.atan2(x,y)*(180 / Math.PI)
							item.value.angle = angle
						}
					};

					// 添加鼠标松开事件监听器
					let mouseup = function(){
						mouse = false
						document.removeEventListener('mousemove',mouseMove)
						document.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',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)
				
				//缩放
				let timeSwitch = true
				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
						num = item.value.zoom?item.value.zoom :1
						angle = item.value.angle?item.value.angle:0
						if(timeSwitch){
							timeSwitch = false
							if((e as WheelEvent).deltaY > 0){
								if(num <= 1){
									num -= 0.05
								}else{
									num -= 0.1
								}
							}else{
								//放大
								if(num <= 1){
									num += 0.05
								}else{
									num += 0.1
								}
							}
							if(num >= 3){
								num = 3
							}else if (num < .2){
								num = .2
							}
							setTimeout(() => {
								timeSwitch = true
							}, 100);
							let instance:any = item.instance
							instance.moodItemScale = num * 100
							item.value.zoom = num
						}
					});
				});
			}
			
		},
		angle:{
			mounted(el,angle){
				let mouse = false;
				let mousedown = function(event: MouseEvent){
					let e:any = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event: any){
					let e:any = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation = (e:MouseEvent) => {
					el.parentNode.children.forEach((v:any) =>{
						v.classList.add('eventNode')
					})
					mouse = true;
					let elParent = el.parentNode.parentNode
					let eX:any
					let eY:any
					let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
					let mouseMove = function(event:MouseEvent){
						let e:any = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e:any = getMousePosition(event,true,el.parentNode)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = (e:MouseEvent)=>{
						if (mouse) {
							if(angle.value == 'right'){
								eX = elParent.offsetWidth - e.offsetX
								eY = elParent.offsetHeight - e.offsetY
							}else if(angle.value == 'top'){
								eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
								eY = elParent.offsetHeight - e.offsetY
							}else if(angle.value == 'left'){
								eX = elParent.offsetWidth - e.offsetX
								eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
							}else if(angle.value == 'bottom'){
								eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
								eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
							}
							let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
							// el.style.left = e.offsetX /2 +'px'
							// el.style.top = e.offsetY /2+'px'
							if(100 - 100 * mouseSide/elParentSide <= 50){
								let Xy = (100 - 100 * mouseSide/elParentSide) / 3.33-1
								if(Xy<=0){
									Xy = 0
								}
								if(angle.value == 'right'){
									el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
									elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
									el.style.left = Xy +'%'
									el.style.top = Xy +'%'
								}else if(angle.value == 'top'){
									el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
									elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
									el.style.right = Xy +'%'
									el.style.left = 'auto'
									el.style.top = Xy +'%'
								}else if(angle.value == 'bottom'){
									el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
									elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
									el.style.right = Xy +'%'
									el.style.top = 'auto'
									el.style.left = 'auto'
									el.style.bottom = Xy +'%'
								}else if(angle.value == 'left'){
									el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
									elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
									el.style.left = Xy +'%'
									el.style.top = 'auto'
									el.style.bottom = Xy +'%'
								}
							}else{
								if(angle.value == 'right'){
									el.parentNode.style.borderTopLeftRadius = 50+'%'
									elParent.style.borderTopLeftRadius = 50+'%'
								}else if(angle.value == 'top'){
									el.parentNode.style.borderTopRightRadius = 50+'%'
									elParent.style.borderTopRightRadius = 50+'%'
								}else if(angle.value == 'bottom'){
									el.parentNode.style.borderBottomRightRadius = 50+'%'
									elParent.style.borderBottomRightRadius = 50+'%'
								}else if(angle.value == 'left'){
									el.parentNode.style.borderBottomLeftRadius = 50+'%'
									elParent.style.borderBottomLeftRadius = 50+'%'
								}
							}
						}
					}
					let mouseup = function(){
						mouse = false
						el.parentNode.children.forEach((v:any) =>{
							v.classList.remove('eventNode')
						})
						el.parentNode.removeEventListener('mousemove',mouseMove)
						el.parentNode.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',mouseup) 
						//移动端
					}
					el.parentNode.addEventListener('mousemove', mouseMove);
					el.parentNode.addEventListener('touchmove', touchmove);
					document.addEventListener('mouseup', mouseup);
					document.addEventListener('touchend', mouseup);
				}
				el.addEventListener('mousedown',mousedown)
				el.addEventListener('touchstart',touchstart)
			}
		},
		//移动图片
		translate:{
			mounted (el,layout:any,binding) {
				let mousedown = function(event: MouseEvent){
					let e:any = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event: any){
					let e:any = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation = (e: MouseEvent)=>{
					let elParent = el.parentNode.parentNode
					el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
					el.style.top =  (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
					let left = el.style.left? el.style.left.replace(/%/g,'') : 0
					let top = el.style.top? el.style.top.replace(/%/g,'') : 0
					let mouseX = e.offsetX //鼠标点击位置到domleft距离
					let mouseY = e.offsetY
					let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
					let domY = e.clientY - e.offsetY - el.offsetTop
					let mouse = true
					let mouseMove = function(event:MouseEvent){
						let e:any = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event:any){
						let e:any = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = function(e:MouseEvent){
						if(mouse){
							let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
							let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
							el.style.left = left
							el.style.top = top;
							el.previousSibling.style.top = top
							el.previousSibling.style.left = left
							elParent.firstChild.style.top = top
							elParent.firstChild.style.left = left
							if(el.offsetLeft <=0){
								el.style.left = 0+'%'
								el.previousSibling.style.left = 0+'%'
								elParent.firstChild.style.left = 0+'%'
							}
							if(el.offsetTop <=0){
								el.style.top = 0+'%'
								el.previousSibling.style.top = 0+'%'
								elParent.firstChild.style.top = 0+'%'
							}
							// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
							// 	// el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'%'
							// 	console.log(2);
							// }
							if(el.style.left.replace(/%/g,'')>=100){
								el.style.left = 100+'%'
								el.previousSibling.style.left = 100+'%'
								elParent.firstChild.style.left = 100+'%'
							}
							// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
							// 	el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'%'
							// }
							if(el.style.top.replace(/%/g,'')>=100){
								el.style.top = 100+'%'
								el.previousSibling.style.top = 100+'%'
								elParent.firstChild.style.top = 100+'%'
							}
						}
					}
					let mouseup = function(){
						mouse = false
						document.removeEventListener('mousemove',mouseMove)
						document.removeEventListener('touchmove',touchmove)
						document.removeEventListener('mouseup',mouseup) 
						document.removeEventListener('touchend',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)
			},
		},
		modelImg:{
			mounted(el) {
				let parentNode = el.parentNode
				if(parentNode.offsetHeight >= parentNode.offsetWidth){
					el.style.height = 100+'%'
					el.style.width = 'auto'
				}else{
					el.style.width = 100+'%'
					el.style.height = 'auto'
				}
			},
			updated (el) {
				let parentNode = el.parentNode
				if(parentNode.offsetHeight >= parentNode.offsetWidth){
					el.style.height = 100+'%'
					el.style.width = 'auto'
				}else{
					el.style.width = 100+'%'
					el.style.height = 'auto'
				}
			}
		}
	},
    methods: {
		init(){
			let parentList:any = this.$parent
			this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
			parentList = parentList.layoutList
			this.layout = true
			// let layoutList = this.store.state.UploadFilesModule.moodboard
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			this.layoutList = parentList
			this.moodbList = this.moodb[parentList.length-1]
			this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
			this.moodItemScale = (this.layoutList?.[0]?this.layoutList[0].zoom:1)*100

			this.initDomStyle()
			
		},
		cancelDsign(){
			this.layout = false
		},
		setpitch(item:any,index:any){
			if(!item.zoom){
				item.zoom = 1
			}
			this.moodIndex = index
			this.moodItemScale = (item.zoom?item.zoom:1)*100
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			item.setPitch = true
			if(this.content){
				(this.content as any)[index].style.zIndex = GO.zIndex++
				
			}
		},
		setMoodItemScale(value:any){
			if(value > 2){
				this.layoutList[this.moodIndex].zoom = value/100
			}
		},
		setmoodb(item:any){
			this.moodbClassName = item
			this.$emit('setmoodbClass',this.moodbClassName)
			this.styleObj.class = this.moodbClassName
			if(this.content){
				for (item of (this.content as any)) {
					item.classList.remove('active')
					item.style.top = ''
					item.style.left = ''
					item.style.right = ''
					item.style.bottom = ''
					item.style.width = ''
					item.style.height = ''
				}
			}
		},
		changeTemplateModal(){
			this.layout = !this.layout
		},
		setIndex(styleArr:any){
			let arr = JSON.parse(JSON.stringify(styleArr))
			const nums = arr.map((obj:any,index:any) => {
				obj.num = index
				return {
					num: obj.num,
					zIndex: obj['z-index']?obj['z-index']:1
				}
			});
			const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
			
			GO.zIndex = sortedNums.length + 1
			// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
			sortedNums.forEach((item:any,index:any) => {
				arr[item.num]['z-index'] = index + 1
			});
			return arr
		},
		initDomStyle(){
			nextTick(()=>{
				this.content.forEach((item:any,index:any) => {
					if(this.styleObj.domStyle[index]?.left){
						item.classList.add('active')
						this.initStyle(item,this.styleObj.domStyle[index])
					}
					this.domObj.dom.forEach((domName:any,domStyle:any) => {
						let dom,style
						if(this.styleObj[this.domObj.domStyle[index]]){
							style = this.styleObj[this.domObj.domStyle[domStyle]][index]
						 	dom = item.querySelector(domName)
							this.initStyle(dom,style)
						}
					})
				});
			})
		},
		clearStyleObj(){
			this.styleObj.domStyle = []
			this.domObj.domStyle.forEach((item:any)=>{
				if(this.styleObj[item])this.styleObj[item] = []
			})
		},
		initStyle(dom:any,style:any){
			if(!style || !dom)return
			for (const [property, value] of Object.entries(style)) {
				
				dom.style.setProperty(property, value);
			}
		},
		setDomStyle(){
			this.clearStyleObj()
			this.content.forEach((item:any) => {
				this.styleObj.domStyle.push(this.setStyle(item.style))
				this.domObj.dom.forEach((domName:any,index:any) => {
					let style = this.domObj.domStyle[index]
					let dom = item.querySelector(domName) || item
					this.styleObj[style].push(this.setStyle(dom.style))
				})
			});
		},
		setStyle(domStyle:any){
			let style:any = {}
			for (let property of domStyle) {
				style[property] = domStyle.getPropertyValue(property);
			}
			return style
		},
        //提交模板
        submitTemplate() {
			this.loadingShow = true
			this.setDomStyle()
			this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
			this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			nextTick().then(async ()=>{
				let layoutCentent = document.getElementById('layoutCentent')
				domTurnImg(layoutCentent).then((rv)=>{
					let file =rv
					let param = new FormData(); 
					param.append('inPin','0')
					param.append('gender','')
					param.append('level1Type','Moodboard')
					param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
					param.append('file',file);
					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
					Https.axiosPost(Https.httpUrls.elementUpload,param,config)
					.then((rv: any) => {
							rv.imgUrl = rv.url
							this.layout = false
							this.loadingShow = false
							this.store.commit("setDisposeMoodboard", rv);


						}
					).catch(rv=>{
						this.loadingShow = false
					})
				})
				
			})
			
        },
		beforeUpload(){
			
		}
    },
});
</script>

<style lang="less" scoped>
.layout_modal {
	user-select: none; /* 对现代浏览器有效 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    .ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: calc(65rem*1.2);
    }
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
	}

    .layout_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem;
		height: 100%;
		.collection_title{
			position: absolute;
			top: calc(4rem*1.2);
			display: flex;
			font-size: calc(1.8rem*1.2);
			font-weight: 900;
			color: rgba(0,0,0,.65);
			align-items: center;
			.collection_title_text{
				margin-right: calc(4rem*1.2);
			}
			.collection_title_text_intro{
				font-size: calc(1.2rem*1.2);
				font-weight: 400;
				color: rgba(0,0,0,.45);
			}
		}
		
		.layout_nav{
			display: flex;
			margin-top: calc(2rem*1.2);
			justify-content: center;
			max-height: 13%;
			overflow: hidden;
			.active{
				img{
					border: 2px solid;
					border-radius: 2px;
					box-sizing: border-box;
				}
			}
			>div{
				max-height: 13%;
				overflow: hidden;
				img{
					object-fit: cover;
					width:calc(5rem*1.2);
					cursor: pointer;
					margin: 0 calc(2rem*1.2);
					max-height: 100%;
				}
			}
			
		}
		.layout_centent{
			display: flex;
			// height: 55%;
			height: calc(35rem*1.2);
			width: calc(57rem*1.2);
			// height: 60%;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: space-around;
			margin: calc(3rem*1.2) auto;
			overflow: hidden;
			// padding: 3rem 0;
			justify-content: space-between;
			position: relative;
			user-select:none
			&.active{
				flex-direction: row;
			}
			.layout_btn{
				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;
				li{
					cursor: pointer;
					// border-radius: 50%;
					width: calc(2rem*1.2);
					height: calc(2rem*1.2);
					background-color: rgb(20, 188, 255);
					position: absolute;
					z-index: 1049;
				}
				.layout_btn_top,.layout_btn_bottom{
					left: 50%;
					transform: translate(-50%,-50%) ;
					cursor: n-resize;
				}
				.layout_btn_top{
					top: 0;
				}
				.layout_btn_bottom{
					top: 100%;
				}
				.layout_btn_left,.layout_btn_right{
					top: 50%;
					transform: translate(-50%,-50%) ;
					cursor: e-resize;
				}
				.layout_btn_left{
					left: 0;
				}
				.layout_btn_right{
					left: 100%;
				}
				.layout_rotote{
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 0;
					height: 0;
				}
				.layout_rotote::after{
					position: absolute;
					content: "";
					background-color: #14bcff;
					width: 2px;
					height: 30px;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
				}
				.layout_rotote::before{
					position: absolute;
					content: "";
					background-color: #14bcff;
					top: calc(50% - 30px);
					left: 50%;
					transform: translate(-50%,-50%) ;
					width: calc(1.5rem*1.2);
					height: calc(1.5rem*1.2);
					border-radius: 50%;
				}
				.layout_translate{
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) ;
					cursor: crosshair;
					cursor: move;
				}
				.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
					// opacity: 0;
					width: calc(2rem*1.2);
					height: calc(2rem*1.2);
				}
				.layout_angle_tr{
					right: 0%;
					top: 0;
					transform: translate(50%,-50%);
				}
				.layout_angle_tl{
					left: 0%;
					top: 0;
					transform: translate(-50%,-50%);
				}
				.layout_angle_br{
					right: 0%;
					bottom: 0%;
					transform: translate(50%,50%);
				}
				.layout_angle_bl{
					left: 0%;
					bottom: 0%;
					transform: translate(-50%,50%);
				}
				.eventNode{
					pointer-events: none;
				}
			}
			.layout_centent_bor{
				
			}
			.modal_imgItem{
				position: relative;
				// >div{
				// 	position: absolute;
				// 	width: 100%;
				// 	height: 100%;
				// }
				overflow: hidden;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				&.active{
					position: absolute;
				}
			}
		}
		.wh1{
				width: 23%;
				height: 48%;
				
			}
			.wh4{
				width: 48.5%;
				height: 100%;
				
			}
			.wh8{
				width: 100%;
				height: 48.5%;
			}
			.w1h2{
				width: 23%;
				height: 100%;
				
			}
			.w2h1{
				width: 48.5%;
				height: 48%;
			}
		.layout_left{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: calc(5rem*1.2);
			overflow-x: hidden;
			// background-color: #000;
			width: 10%;
			height: 50%;
			&.layout_left::-webkit-scrollbar {
                display: none;
            }
			.layout_left_text{
				font-size: calc(1.6rem*1.2);
				margin-bottom: calc(1rem*1.2);
				color: #000;
			}
			.layout_left_items{
				width: 100%;
				height: calc(6rem*1.2);
				display: flex;
				align-content: space-between;
				justify-content: space-between;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: calc(2rem*1.2);
                cursor: pointer;
				.layout_left_item{
					box-sizing: border-box;
					border: 1px solid #000;
				}
			}
		}
		.layout_right{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: calc(5rem*1.2);
			// background-color: #000;
			width: 8%;
			height: 50%;
			&.layout_left::-webkit-scrollbar {
                display: none;
            }
			.layout_left_text{
				font-size: var(--aida-fsize1-6);
				margin-bottom: calc(1rem*1.2);
				color: #000;
			}
			.layout_left_items{
				width: 100%;
				height: calc(6rem*1.2);
				display: flex;
				align-content: space-between;
				justify-content: space-between;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: calc(2rem*1.2);
                cursor: pointer;
				.layout_left_item{
					box-sizing: border-box;
					border: 1px solid #000;
				}
			}
			.ant-slider{
				margin: 0;
				margin-top: calc(2rem*1.2);
				padding: 0 calc(1rem*1.2);
				.ant-slider-track,
				.ant-slider-rail {
					height: calc(.6rem*1.2);
					background-color: #e1e1e1;
					border-radius: calc(0.5rem*1.2);
				}
				.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_max {
					display: flex;
					justify-content: space-between;
					.habit_System_Designer_text {
					}
				}
			}
			
		}
        .submit_button {
            margin: calc(2rem*1.2) auto 0;
			position: relative;
			z-index: 2;
        }
    }
	.mark_loading{
		position: absolute;
	}
}
</style>