<template>
  <div>
	<a-modal
            class="layoutMobile_modal generalModel"
            v-model:visible="layout"
            :footer="null"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="false"
			:keyboard="false"
			:destroyOnClose="true"
        >
            <div class="layoutMobile_content">
				<div class="collection_title">
					<div class="collection_title_text">
						<div class="layoutMobile_title">{{ $t('layout.MoodBoardDesign') }}</div>
					</div>
				</div>
				<div class="generalModel_btn">
					<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
						<i class="fi fi-rr-cross-small"></i>
					</div>
				</div>
				<div class="layoutMobile_nav">
					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
						<img :src="item.imgUrl">
					</div>
				</div>
				<div class="layoutMobile_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" @touchstart="setpitch(item,index)" ref="content" >
						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" v-modelImg> 
						<ul v-show="item.setPitch" class="layoutMobile_btn" >
							<li class="layoutMobile_btn_top" v-compile.stop="'top'"></li>
							<li class="layoutMobile_btn_bottom" v-compile.stop="'bottom'"></li>
							<li class="layoutMobile_btn_left" v-compile.stop="'left'"></li>
							<li class="layoutMobile_btn_right" v-compile.stop="'right'"></li>
							<li class="layoutMobile_rotote" v-rotote.stop></li>
							<li class="layoutMobile_translate" v-translate.stop></li>
							<!-- <li class="layoutMobile_translate" v-translate.stop></li> -->
							<li class="layoutMobile_angle_tr" v-angle.stop = "'top'"></li>
							<li class="layoutMobile_angle_tl" v-angle.stop = "'right'"></li>
							<li class="layoutMobile_angle_br" v-angle.stop = "'bottom'"></li>
							<li class="layoutMobile_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="layoutMobile_left">
					<div class="layoutMobile_left_text">
						{{ $t('layout.LayerOptions') }}
					</div>
					<div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_left_item">
						</div>
					</div>
				</div>
				<div class="layoutMobile_right">
					<div class="layoutMobile_right_text">
						{{ $t('DesignPrintOperation.Scale') }}
					</div>
					<a-slider
						v-model:value="moodItemScale"
						@change="setMoodItemScale"
					>
					</a-slider>
				</div>
				<!-- <div class="layoutMobile_right">
					<div v-for="item,index in moodbList" class="layoutMobile_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layoutMobile_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";

export default defineComponent({
	props:["moodb_className",'flex_direction'],
	components: {
		draggable
    },
    setup(prop) {
        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);
		let loadingShow = ref(false)
		let moodItemScale = ref(0)
        return {
            layout,
            templateFileList,
            openClick,
			drag,
			layoutList,
			content,
			loadingShow,
			moodItemScale
        };
    },
    data() {
        return {
            // 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,
			token: "",
            uploadUrl: "",
			moodIndex:0,
			upload: {
                isPin: 0,
				gender:'',
                level1Type: "Moodboard",
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
        };
    },

    mounted() {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
    },
	directives:{
		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'
				}
			}
		},
		//操作移动
		layout:{
			mounted (el,layout:any,binding) {
				el.addEventListener('touchstart',(e:any)=>{
					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.changedTouches[0].pageX - el.getBoundingClientRect().left; //鼠标点击位置到domleft距离
					let mouseY = e.changedTouches[0].pageY - el.getBoundingClientRect().top
					let domX = e.targetTouches[0].clientX - mouseX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
					let domY = e.targetTouches[0].clientY - mouseY - Number(top)
					let mouse = true
					// document.addEventListener('touchmove',(e: MouseEvent)=>{

					// })
					let touchmove = function(e:any){
						if(mouse){
							el.style.left = e.targetTouches[0].pageX-mouseX - domX+'px'
							el.style.top = e.targetTouches[0].pageY-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 removeEventListener = function(){
						mouse = false;
						document.removeEventListener('touchmove',touchmove );
						document.removeEventListener('touchmove',touchmove );
					}
					document.addEventListener('touchmove',touchmove );
					document.addEventListener('touchend', removeEventListener);
				})
			},
			updated (el,layout) {
				
			}
		},
		//操作大小
		compile:{
			mounted (el,compile) {
				el.addEventListener('touchstart',(e:any)=>{
					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.targetTouches[0].clientX
						parent = elParent.offsetWidth
					}else{
						parent = elParent.offsetHeight
						gpsXY = e.targetTouches[0].clientY
					}
					let mouse = true
					let touchmove = function(e:any){
						if(mouse){
							if(compile.value == 'left'){
								elParent.style.width = parent + gpsXY - e.targetTouches[0].clientX + 'px' 
							}else if(compile.value == 'right'){
								elParent.style.width = parent + e.targetTouches[0].clientX - gpsXY + 'px' 
							}else if(compile.value == 'top'){
								elParent.style.height = parent + gpsXY - e.targetTouches[0].clientY + 'px' 
							}else if(compile.value == 'bottom'){
								elParent.style.height = parent + e.targetTouches[0].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 removeEventListener = function(){
						mouse = false;
						el.parentNode.removeEventListener('touchmove',touchmove );
						document.removeEventListener('touchmove',touchmove );
						el.parentNode.children.forEach((v:any) =>{
							v.classList.remove('eventNode')
						})
					}
					el.parentNode.addEventListener('touchmove',touchmove );
					document.addEventListener('touchend', removeEventListener);
					// document.ontouchend = function(){
					// 	mouse = false
					// }
				})
			}
		},
		//操作旋转
		rotote:{
			mounted(el,compile){
				let mouse = true;
				let angle :any = 0
				let num:any
				let x = 0
				let y = 0
				let elParent = el.parentNode.parentNode
				
				// 添加鼠标按下事件监听器
				el.addEventListener('touchstart', (e:any) => {
					e.stopPropagation()
					mouse = true;
					if(document.defaultView){
						let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
						num = Number(transform[3])
					}
					// let eX = (e.pageX - el.offsetLeft)  + el.offsetLeft
					// let eY = elParent.offsetTop + el.offsetTop
					var info = el.getBoundingClientRect();
					let eX = info.x + info.width / 2;
					let eY = info.y + info.height / 2;
					
					document.addEventListener('touchmove', (e:any) => {
					if (mouse) {
						let X = eX 
						let Y = eY
						let x:any = e.targetTouches[0].clientX - X
						let y:any = Y - e.targetTouches[0].clientY
						angle = Math.atan2(x,y)*(180 / Math.PI)
						let instance:any = compile.instance
						instance.layoutList.forEach((item:any) => {
							if(item.setPitch){
								angle = angle.toFixed(2)
								item.angle = angle
							}
						});
						// elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
					}
					});

					// 添加鼠标松开事件监听器
					document.addEventListener('touchend', () => {
						mouse = false;
						// x = e.pageX
						// y = e.pageY
					});
				});
			}
			
		},
		angle:{
			mounted(el,angle){
				let mouse = false;
				el.addEventListener('touchstart', (e:any) => {
					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)
					let touchMove = (e:any)=>{
						// if(e.changedTouches[0].pageX <  el.getBoundingClientRect().left){
						// 	mouse = false
						// }else{
						// 	mouse = true
						// }
						if (mouse) {
							let offsetX = e.changedTouches[0].pageX - el.parentNode.getBoundingClientRect().left;
							let offsetY = e.changedTouches[0].pageY - el.parentNode.getBoundingClientRect().top;
							if(angle.value == 'right'){
								eX = elParent.offsetWidth - offsetX
								eY = elParent.offsetHeight - offsetY
							}else if(angle.value == 'top'){
								eX = elParent.offsetWidth - offsetX- elParent.offsetWidth
								eY = elParent.offsetHeight - offsetY
							}else if(angle.value == 'left'){
								eX = elParent.offsetWidth - offsetX
								eY = elParent.offsetHeight - elParent.offsetHeight - offsetY
							}else if(angle.value == 'bottom'){
								eX = elParent.offsetWidth - offsetX - elParent.offsetWidth
								eY = elParent.offsetHeight - 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){
								// console.log(angle.value);
								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+'%'
								}
							}
						}
						// 添加鼠标松开事件监听器
						document.addEventListener('touchend', () => {
							mouse = false;
							el.parentNode.removeEventListener('touchmove',touchMove );
							el.parentNode.children.forEach((v:any) =>{
								v.classList.remove('eventNode')

							})
						});
					}
					el.parentNode.addEventListener('touchmove',touchMove ,false);

					
					
				});
					
				
			}
		},
		//移动图片
		translate:{
			mounted (el,layout:any,binding) {
				el.addEventListener('touchstart',(e:any)=>{
					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.changedTouches[0].pageX - el.parentNode.getBoundingClientRect().left //鼠标点击位置到domleft距离
					let mouseY = e.changedTouches[0].pageY - el.parentNode.getBoundingClientRect().top
					let domX = e.changedTouches[0].pageX - mouseX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
					let domY = e.changedTouches[0].pageY  - mouseY - el.offsetTop
					let mouse = true
					let touchMove = function(e:any){

						if(mouse){
							let left = ( e.changedTouches[0].pageX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
							let top = (e.changedTouches[0].pageY-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+'%'
							}
						}
					}
					el.parentNode.addEventListener('touchmove',touchMove ,false);
					document.addEventListener('touchend', () => {
						mouse = false;
						el.parentNode.removeEventListener('touchmove',touchMove );
						el.parentNode.children.forEach((v:any) =>{
							v.classList.remove('eventNode')

						})
					});
				})
			},
		},
	},
    methods: {
		init(){
			let parentList:any = this.$parent
			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.layoutList[0].setPitch = true
			this.layoutList[0].zoom = this.layoutList[0].zoom?this.layoutList[0].zoom:1
			this.moodItemScale = this.layoutList[0].zoom*100
			this.moodIndex = 0

			this.moodbList = this.moodb[parentList.length-1]
			this.moodbClassName = this.moodb_className
		},
		cancelDsign(){
			this.layout = false
		},
		setpitch(item:any,index:any){
			// console.log(item);
			// let dom:any = document.getElementsByClassName('modal_imgItem')[index]
			// console.log(dom);
			// let img = new Image()
			// img.src = item.imgUrl
			// img.onload = ()=>{
			// 	console.log(dom.offsetWidth/img.width);
			// 	console.log(img.width/dom.offsetWidth);
			// }
			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++
			}
			// item.style = 
			
		},
		setMoodItemScale(value:any){
			if(value > 2){
				this.layoutList[this.moodIndex].zoom = value/100
			}
		},
		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 = ''
				}
			}
		},
		changeTemplateModal(){
			this.layout = !this.layout
		},
        //提交模板
        submitTemplate() {
			this.loadingShow = true
			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) => {
							// console.log(rv);
							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">
.layoutMobile_modal {
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
	}
    .layoutMobile_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem*1.2);
		height: 100%;
		.collection_title{
			position: absolute;
			top: calc(4rem*1.2);
			display: flex;
			font-size: var(--aida-fsize2);
			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);
			}
		}
	
		.layoutMobile_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%;
				}
			}
			
		}
		.layoutMobile_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*1.2) 0;
			justify-content: space-between;
			position: relative;
			user-select:none
			&.active{
				flex-direction: row;
			}
			.layoutMobile_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;
				}
				.layoutMobile_btn_top,.layoutMobile_btn_bottom{
					left: 50%;
					transform: translate(-50%,-50%) ;
					cursor: n-resize;
				}
				.layoutMobile_btn_top{
					top: 0;
				}
				.layoutMobile_btn_bottom{
					top: 100%;
				}
				.layoutMobile_btn_left,.layoutMobile_btn_right{
					top: 50%;
					transform: translate(-50%,-50%) ;
					cursor: e-resize;
				}
				.layoutMobile_btn_left{
					left: 0;
				}
				.layoutMobile_btn_right{
					left: 100%;
				}
				.layoutMobile_rotote{
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 0;
					height: 0;
				}
				.layoutMobile_rotote::after{
					position: absolute;
					content: "";
					background-color: #14bcff;
					width: 2px;
					height: 30px;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
				}
				.layoutMobile_rotote::before{
					position: absolute;
					content: "";
					background-color: #14bcff;
					top: calc(50% - 30px);
					left: 50%;
					transform: translate(-50%,-50%) ;
					width: calc(2rem*1.2);
					height: calc(2rem*1.2);
					border-radius: 50%;
				}
				.layoutMobile_translate{
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%) ;
					cursor: crosshair;
					cursor: move;
				}
				.layoutMobile_angle_tr,.layoutMobile_angle_tl,.layoutMobile_angle_br,.layoutMobile_angle_bl{
					// opacity: 0;
					width:  calc(2rem*1.2);
					height:  calc(2rem*1.2);
				}
				.layoutMobile_angle_tr{
					right: 0%;
					top: 0;
				}
				.layoutMobile_angle_tl{
					left: 0%;
					top: 0;
				}
				.layoutMobile_angle_br{
					right: 0%;
					bottom: 0%;
				}
				.layoutMobile_angle_bl{
					left: 0%;
					bottom: 0%;
				}
				.eventNode{
					pointer-events: none;
				}
			}
			.layoutMobile_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%;
					height: 100%;
					width: auto;
					pointer-events: none;
					float: left;
					user-select:none;
					-webkit-user-drag: none;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				::selection {
						// background: rgba(0,0,0,0);
						// background: yellow;
					}
			
			}
		}
		.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%;
			}
		.layoutMobile_left{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: calc(5rem*1.2);
			overflow-x: hidden;
			// background-color: #000;
			width: 10%;
			height: 50%;
			&.layoutMobile_left::-webkit-scrollbar {
                display: none;
            }
			.layoutMobile_left_text{
				font-size: var(--aida-fsize1-6);
				margin-bottom: calc(1rem*1.2);
				color: #000;
			}
			.layoutMobile_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;
				.layoutMobile_left_item{
					box-sizing: border-box;
					border: 1px solid #000;
				}
			}
		}
		.layoutMobile_right{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: calc(5rem*1.2);
			// background-color: #000;
			width: 8%;
			height: 50%;
			&.layoutMobile_left::-webkit-scrollbar {
                display: none;
            }
			.layoutMobile_left_text{
				font-size: var(--aida-fsize1-6);
				margin-bottom: calc(1rem*1.2);
				color: #000;
			}
			.layoutMobile_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;
				.layoutMobile_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>