<template>
  <div>
	<a-modal
            class="layout_modal"
            v-model:visible="layout"
            :footer="null"
            width="80%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="false"
			:destroyOnClose="true"
        >
            <div class="layout_content">
                <div class="layout_header">
                    <div class="layout_title">MoodBoard Design</div>
                    <div
                        class="icon iconfont icon-guanbi close_icon"
                        @click.stop="init()"
                    ></div>
                </div>
				<div class="layout_nav">
					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
						<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="index" @click="setpitch(item)" ref="content" >
						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> 
						<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></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 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">
					<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()"
                >
                    Submit
                </div>
            </div>
        </a-modal>

  </div>
</template>

<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, toRefs} 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 domTurnImg from '@/tool/domTurnImg'
export default defineComponent({
	props:["moodb_className",'flex_direction'],
	components: {
		draggable
    },
    setup(prop) {
        let fileList: any = ref([]);
        let layout: any = ref(false);
        let templateFileList: any = ref([]);
        let openClick: any = ref(1);
		let drag = false;
		let layoutList:any = ref([])
		const content = ref<HTMLElement | null>(null);
        return {
            fileList,
            layout,
            templateFileList,
            openClick,
			drag,
			layoutList,
			content
        };
    },
    data() {
        return {
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            // moodTemplateId: "", //模板id
            store: useStore(),

			// layoutList:computed(()=>{
			// 	return [...(useStore().state.UploadFilesModule.moodboardFiles),
			// 	...(useStore().state.UploadFilesModule.generateFiles),
			// 	...(useStore().state.UploadFilesModule.MaterialFiles)]
			// }),
			moodb : moodb.moodb_,
			moodbList:{},
			moodbClassName:[],
			setabsolute:false,
        };
    },

    mounted() {
		
    },
	directives:{
		//操作移动
		layout:{
			mounted (el,layout:any,binding) {
				el.addEventListener('mousedown',(e: MouseEvent)=>{
					e.stopPropagation()
					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
					document.onmousemove = function(e:MouseEvent){
						if(mouse){
							el.style.left = e.x-mouseX - domX+'px'
							el.style.top = e.y-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'
							}
						}
					}
					document.onmouseup = function(){
						mouse = false
						// document.onmousemove = false;
					}
				})
			},
			updated (el,layout) {
				
			}
		},
		//操作大小
		compile:{
			mounted (el,compile) {
				el.addEventListener('mousedown',(e: MouseEvent)=>{
					e.stopPropagation()
					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.x
						parent = elParent.offsetWidth
					}else{
						parent = elParent.offsetHeight
						gpsXY = e.y
					}
					let mouse = true
					document.onmousemove = function(e:MouseEvent){
						if(mouse){
							if(compile.value == 'left'){
								elParent.style.width = parent + gpsXY - e.x + 'px' 
							}else if(compile.value == 'right'){
								elParent.style.width = parent + e.x - gpsXY + 'px' 
							}else if(compile.value == 'top'){
								elParent.style.height = parent + gpsXY - e.y + 'px' 
							}else if(compile.value == 'bottom'){
								elParent.style.height = parent + e.y - 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'
							}
						}
					}
					document.onmouseup = function(){
						mouse = false
					}
				})
			}
		},
		//操作旋转
		rotote:{
			mounted(el){
				let mouse = true;
				let angle :any = 0
				let num:any
				let elParent = el.parentNode.parentNode

				if(document.defaultView){
					num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
				}
				// 添加鼠标按下事件监听器
				el.addEventListener('mousedown', (e:MouseEvent) => {
					e.stopPropagation()
					mouse = true;
					let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
					let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
					document.addEventListener('mousemove', (e:MouseEvent) => {
					if (mouse) {
						let X = eX 
						let Y = eY
						let x:any = e.pageX - X
						let y:any = Y - e.pageY
						angle = Math.atan2(x,y)*(180 / Math.PI)
						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
					}
					});

					// 添加鼠标松开事件监听器
					document.addEventListener('mouseup', () => {
						mouse = false;
					});
				});
				//缩放
				let timeSwitch = true
				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
						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);
							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
						}
						
						
					});
				});
			}
			
		},
		angle:{
			mounted(el,angle){
				let mouse = false;
				el.addEventListener('mousedown', (e:MouseEvent) => {
					e.stopPropagation()
					
					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)
					el.parentNode.addEventListener('mousemove', (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){
							if(angle.value == 'right'){
								
								el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
								elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
							}else if(angle.value == 'top'){
								el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
								elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
								el.style.left = 'auto'
								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
							}else if(angle.value == 'bottom'){
								el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
								elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
								el.style.top = 'auto'
								el.style.left = 'auto'
								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
							}else if(angle.value == 'left'){
								el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
								elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
								el.style.top = 'auto'
								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
							}
						}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+'%'
							}
						}
					}
					});
					// 添加鼠标松开事件监听器
					document.addEventListener('mouseup', () => {
						mouse = false;
						el.parentNode.children.forEach((v:any) =>{
							v.classList.remove('eventNode')
						})
					});
					
				});
					
				
			}
		},
		//移动图片
		translate:{
			mounted (el,layout:any,binding) {
				el.addEventListener('mousedown',(e: MouseEvent)=>{
					e.stopPropagation()
					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
					document.onmousemove = function(e:MouseEvent){
						if(mouse){
							let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
							let top = (e.y-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+'%'
							}
						}
					}
					document.onmouseup = function(){
						mouse = false
					}
				})
			},
		}
	},
    methods: {
		init(){
			this.layout = !this.layout
			let layoutList = this.store.state.UploadFilesModule.moodboard
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			this.layoutList = layoutList
			
			this.moodbList = this.moodb[layoutList.length-1]
			this.moodbClassName = this.moodb_className
		},
		setpitch(item:any){
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			item.setPitch = true
		},
		setmoodb(item:any){
			this.moodbClassName = item
			this.$emit('setmoodbClass',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 = ''
				}
			}
		},
		//开始拖拽事件
		layoutBtnTop(){

		},
		// setmoodbClassName(){
		// },
		//获取图片宽高
		// getimgWH(){
		// 	let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
		// 		...(useStore().state.UploadFilesModule.generateFiles),
		// 		...(useStore().state.UploadFilesModule.MaterialFiles)]


		// 	return new Promise(res => {
		// 		var img = document.createElement("img");
		// 		img.src = item.imgUrl
		// 		img.addEventListener("load", function () {
		// 			document.body.appendChild(img);
		// 			var w = img.offsetWidth;
		// 			var h = img.offsetHeight;
		// 			img.remove()
		// 			res({ w, h });
		// 		})
		// 	})
		// 	layoutList.forEach(item => {
		// 		let img = document.createElement('img')
		// 		img.addEventListener("load",function(){
		// 			document.body.appendChild(img);
		// 			var w = img.offsetWidth;
		// 			var h = img.offsetHeight;
		// 			img.remove()
		// 		})

		// 	});
		// },
        // layoutcli(num: Number) {
        //     this.openClick = num;
		// 	if(num ==2 ){
		// 		let material:any = this.$refs.Material
		// 		material.init('Moodboard')
		// 	}else if (num == 3){
		// 		let material:any = this.$refs.Material
		// 		material.init('generate')
		// 	}
        // },
      

        //随机重置图片顺序
        // refetchTemplate() {
        //     let arr = Array.from({ length: this.templateFileList.length });
        //     for (let item of this.templateFileList) {
        //         let index = this.randomRange(
        //             0,
        //             this.templateFileList.length,
        //             -1
        //         );
        //         while (arr[index]) {
        //             index = this.randomRange(
        //                 0,
        //                 this.templateFileList.length,
        //                 -1
        //             );
        //         }
        //         arr[index] = item;
        //     }
        //     this.templateFileList = arr;
        // },
		changeTemplateModal(){
			this.layout = !this.layout
		},
		
        //提交模板
        submitTemplate() {
            // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
            // this.store.commit("setMoodboardFile", this.fileList);
            // this.store.commit("setMoodTemplateId", this.moodTemplateId);
            // this.changeTemplateModal();
			this.layoutList.forEach((v:any)=>{
				v.setPitch = false
			})
			let layoutCentent = document.getElementById('layoutCentent')
			console.log(layoutCentent);
			setTimeout(() => {
			console.log(domTurnImg(layoutCentent));
			this.layout = false

			}, 0);
			
        },
    },
});
</script>

<style lang="less">
.layout_modal {
	max-width: 1150px;
    .ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: 60rem;
    }
	.ant-modal-content{
		border-radius: 1rem;
	}

    .layout_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem;
		height: 100%;
        .layout_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem 0 2.5rem;
            height: 6.6rem;

            .layout_title {
                font-size: 1.8rem;
                font-weight: 500;
                color: #030303;
            }

            .close_icon {
                font-size: 1.8rem;
                color: #aeb2b7;
                cursor: pointer;
            }
        }
		.layout_nav{
			display: flex;
			margin-top: 2rem;
			justify-content: center;
			.active{
				img{
					border: 2px solid;
					border-radius: 2px;
					box-sizing: border-box;
				}
			}
			img{
				width:5rem;
                cursor: pointer;
				margin: 0 2rem;
			}
		}
		.layout_centent{
			display: flex;
			height: 55%;
			// height: 60%;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: space-around;
			width: 50%;
			margin: 3rem 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: 1rem;
					height: 1rem;
					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: 1.5rem;
					height: 1.5rem;
					border-radius: 50%;
				}
				.layout_translate{
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) ;
					cursor: crosshair;
					cursor: move;
				}
				.layout_angle_tr{
					right: 0%;
					top: 0;
				}
				.layout_angle_tl{
					left: 0%;
					top: 0;
				}
				.layout_angle_br{
					right: 0%;
					bottom: 0%;
				}
				.layout_angle_bl{
					left: 0%;
					bottom: 0%;
				}
				.eventNode{
					pointer-events: none;
				}
			}
			.layout_centent_bor{
				
			}
			.modal_imgItem{
				position: relative;
				// >div{
				// 	position: absolute;
				// 	width: 100%;
				// 	height: 100%;
				// }
				overflow: hidden;
				&.active{
					position: absolute;
				}
				img{
					// object-fit: cover;
					// width: 100%;
					// height: 100%;
					float: left;
					user-select:none;
					-webkit-user-drag: none;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) scale(1);
				}
				::selection {
						// background: rgba(0,0,0,0);
						// background: yellow;
					}
			
			}
		}
		.wh1{
				width: 23%;
				height: 48%;
				
			}
			.wh4{
				width: 48.5%;
				height: 100%;
				
			}
			.w1h2{
				width: 23%;
				height: 100%;
				
			}
			.w2h1{
				width: 48.5%;
				height: 48%;
			}
		.layout_left{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 2rem;
			overflow-x: hidden;
			// background-color: #000;
			width: 8%;
			height: 50%;
			&.layout_left::-webkit-scrollbar {
                display: none;
            }
			.layout_left_items{
				width: 100%;
				height: 6rem;
				display: flex;
				align-content: space-between;
				justify-content: space-between;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: 2rem;
                cursor: pointer;
				.layout_left_item{
					box-sizing: border-box;
					border: 1px solid #000;
				}
			}
		}
        .submit_button {
            margin: 2rem auto 0;
        }
    }
}
</style>