<template>
  <div ref="designOpenrtionModal">
	<a-modal
            class="designOpenrtion_modal Guide_1_24 generalModel"
			:class="[driver__.driver?'hideEvents':'']"
            v-model:visible="designOpenrtion"
            :footer="null"
			:get-container="() => $refs.designOpenrtionModal"
            width="78%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
			:keyboard="false"
            :mask="true"
			:destroyOnClose="true"
        >
            <div class="designOpenrtion_content">
				<div class="design_title_text">
					<div>{{ $t('DesignPrintOperation.Placement') }}</div>
				</div>
				<div class="generalModel_btn">
					<div class="generalModel_closeIcon" @click.stop="closeModal()">
						<!-- <i class="fi fi-rr-cross-small"></i> -->
						<svg width="46" height="46" 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="designOpenrtion_open">
					<!--  -->
					<div class="print_right">
						<div class="habit_Overal_Single">
							<div
								class="habit_Overal_Single_text"
								:class="{ active: !overallSingle }"
							>
								{{ $t('DesignPrintOperation.Overall') }}
							</div>
							<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
							<div
								class="habit_Overal_Single_text"
								:class="{ active: overallSingle }"
							>
								{{ $t('DesignPrintOperation.Single') }}
							</div>
						</div>
						<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
							<div class="designOpenrtion_nav">
								<!-- :class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"  -->
								<div 
									class="designOpenrtion_single" 
									v-for="item,index in designOpenrtionList" :key="item" 
									:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
									>
									<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
								</div>
								<div 
									class="designOpenrtion_single" 
									v-for="item,index in designList" :key="item" 
									:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
									>
									<img :class="[(item.checked == true && overallSingle == false)?'active':'']" :src="item.path" @click="setpitch(item,index)">
								</div>
								<!-- <div class="designOpenrtion_overall" v-show="!overallSingle">
									<img :src="designOpenrtionList[0].path">
								</div> -->
							</div>
							<div v-show="!overallSingle" 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"
									@afterChange="systemDesigner"
									:tip-formatter="formatter"
								>
								</a-slider>
							</div>
							<div v-show="overallSingle" @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
							<!-- <div v-show="overallSingle" class="print_input">
								<input class="search_input" :placeholder="$t('DesignPrintOperation.inputContent')" type="Number" v-model="printAmount" @input="setprintAmount">
								<i class="fi fi-rr-trash" @click="deletePrint"></i>
							</div> -->
						
							<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
							<div class="subitOkPreviewBtn  Guide_1_25_1" :class="[driver__.driver?'hideEvents':'']"  @click.stop="setOK">OK</div>
						</div>
					</div>
				</div>
				<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 exhibitionOpenrtionList[stateOverallSingle]" 
								:key="item"
								v-if="overallSingle"
								:style="[printStyleList[stateOverallSingle]?.[index]?.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(${printStyleList[stateOverallSingle][index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
							</div>
						</div>
						<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
						<div class="designOpenrtion_btn">
							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.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]"></li>
								<li class="designOpenrtion_delete" @click.stop="deletePrint">
									<img src="../../assets/images/homePage/cuowu.svg" alt="">
								</li>
							</ul>
							<div v-show="!overallSingle"></div>
							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.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[stateOverallSingle][0]?.transform]"></li>


								
								<!-- <li class="designOpenrtion_delete" @click="deletePrint">
									<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAACxAAAAsQHGLUmNAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdBJREFUSImt1r1uU0EQBeDPFh1pgBQEEwFVAg9BROhCAh1FAg1gkMA8DA0oKOEB3IEIRQgF4SEQBIUC6ENSGgPFXaPx+udeSxxppPXOzJnZ8e7MrRmPWdzANZxPv+EbvmILL/G9hGcADayjgz8l0kUb56qSX8dhBeJcDrFSRv44ZRQdt3EPczieZB5NvB1ymta4zCP5J1yucOIFfM6CDJykob8s73GiAnkPJ7Eb/H9iJhpsZJlPQh6D7AWe9Z5iFr+CIpalhjWspnXZ/pXA01FURkv/HxpxK+g2UE+yGfZXM5+doHt4DEtB2R5dAXdD9nfG2LVxNa2XKGreiziXGefZ5rKZbCLmg/4jHIWNqSEZ1fC0IrnE0bM5qqdFGWoV92RBf/P/S3RRVqI3YaOZGd8eQpgHXMt8HgTd67qi5fZwMzOO5XuREmim9ShEji04q78tLwSDSR/aYuD599DgeVDsY3pMhqOQt4pnUXlGf7PbTQ5VcQofgv8BTudGK/rb9Z6it5RhEV+CX1cxYoeiZXDg7OC+4vpNJbmkuC3vMtsuHpVltKzo55OOzINxmeeYxhPVhn5H0ftnhhGNeu49NBSjdBkX9H+27Cvu+Sv8GEXwF9+O3b1zwZqdAAAAAElFTkSuQmCC" alt="">
								</li> -->
							</ul>
						</div>
					</div>
				</div>
				<div class="designOpenrtion_right">
					<div class="designOpenrtion_entirety_img">
						<img :src="currentFullBodyView" alt="">
					</div>
				</div>
            </div>
			<div class="mark_loading" v-show="loadingShow">
				<a-spin size="large" />
        </div>
        </a-modal>
  </div>
</template>

<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
// import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { remove } from "jszip";
import { getMousePosition } from "@/tool/mdEvent";

export default defineComponent({
	
    setup(prop) {
        let designOpenrtion = ref(false);
		let designOpenrtionList = ref([])//新增的元素
		let designList = ref([])//已经存在的元素
		let setOkData = ref([])
		let exhibitionOpenrtionList = ref({
			single:[],
			overall:[],
		})//展示的元素
		let current = inject('current')//父组件传过来的数据
		let driver__ = inject('driver__')
        let setRevocation = inject('setRevocation')//父组件传过来的数据
		let overallSingle = ref(true)
		let stateOverallSingle = ref('single')
		let systemDesignerPercentage = ref(0)
		let printZIndex = ref(2)//印花优先级
        let printStyleList = ref({
			single:[],
			overall:[],
		});
        let currentPrintStyleList = ref({
			centers:{
				left:0,
				top:0,
			},
			style:{
				left:0+"px",
				top:0+"px",
				right:"auto",
				bottom:"auto",
				width:'auto',
				height:'auto',
				zIndex:1,
			},
			transform:{
				scale:1,
				rotateZ:0,
			},
			designOpenrtionBtn:false
		});
		
		let direction = ref('')
		let imgDom = ref()
		let imgDomIndex = ref(0)
		let print = ref({
			width:'',
			height:''
		})
		let sketch = ref({
			width:'',
			height:''
		})
		let operationCurrent = ref({
			
		})
		let loadingShow = ref(false)
		let currentFullBodyView = ref('')
		let designItemDetailTS = ref({})
		let body = ref(false)
		let {t} = useI18n()
        return {
            designOpenrtion,
			designOpenrtionList,
			designList,
			setOkData,
			exhibitionOpenrtionList,
			overallSingle,
			stateOverallSingle,
			systemDesignerPercentage,
			current,
			driver__,
			printZIndex,
            printStyleList,
			currentPrintStyleList,
			direction,//判断点击的是li那个边
			imgDom,
			imgDomIndex,
			print,
			sketch,
			operationCurrent,
			loadingShow,
			setRevocation,
			t,
			currentFullBodyView,
			designItemDetailTS,
			body,
			getMousePosition,
        };
    },
    data() {
        return {
            store: useStore(),
        };
    },

	directives:{
		//操作旋转
		rotote:{
			mounted(el,value){
				let mousedown = function(event){
					let e = getMousePosition(event,false)
					mouseDownOperation(e)
				}

				let touchstart = function(event){
					let e = getMousePosition(event,true)
					mouseDownOperation(e)
				}
				let mouseDownOperation =  (e) => {
				let elParent = document.getElementsByClassName('designOpenrtion_modal')[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.instance.stateOverallSingle][value.instance.imgDomIndex].transform.scale
				angle = value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].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){
						let e = getMousePosition(event,false)
						mouseMoveOperation(e)
					}
					let touchmove = function(event){
						let e = getMousePosition(event,true)
						mouseMoveOperation(e)
					}
					let mouseMoveOperation = (e) => {
						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.instance.stateOverallSingle][value.instance.imgDomIndex].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)
			}

			},
	},
    methods: {
		async init(){
			this.designOpenrtion = true
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			this.currentFullBodyView = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
			if(designItemDetail.others.length == 0){
				this.body = true
			}
			//设置前片后片
			this.operationCurrent = Object.assign({},this.current)
			this.clearModal()
			let printList = JSON.parse(JSON.stringify(this.current.printObject.prints))
			this.setprintList(printList)

			this.overallSingle = this.exhibitionOpenrtionList.overall.length>0?false:this.exhibitionOpenrtionList.single.length>0?true:false
			this.ifListOver()
			if(this.$parent.exhibitionList.print)this.designOpenrtionList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.print))
			if(this.$parent.elementsList)this.designList = JSON.parse(JSON.stringify(this.$parent.printsList))
			let skecth = new Image
			skecth.src = this.current.undividedLayer || this.current.path
			await new Promise((resolve, reject) => {
				skecth.onload=()=>{
					this.sketch.width = skecth.width/10+'rem'
					this.sketch.height = skecth.height/10+'rem'
					skecth.remove()
					resolve()
				}
			})
			
			if(this.exhibitionOpenrtionList.overall.length > 0){
				let str = 'overall'
				this.exhibitionOpenrtionList[str].forEach((item,index)=>{
					this.setTemplate(item,index,str)
					this.designOpenrtionList.forEach((openrtItem)=>{
						if(item.minIOPath == openrtItem.minIOPath)openrtItem.checked=true
					})
				})
			}
			if(this.exhibitionOpenrtionList.single.length > 0){
				let str = 'single'
				this.exhibitionOpenrtionList[str].forEach((item,index)=>{
					this.setTemplate(item,index,str)
				})
			}
			if(this.exhibitionOpenrtionList.overall.length == 0 && this.exhibitionOpenrtionList.single.length == 0)this.setpitch(this.designList[0],0)
		},
		setprintList(arr){
			arr.forEach(item=>{
				if(item.ifSingle){
					this.exhibitionOpenrtionList.single.push(item)
				}else{
					this.exhibitionOpenrtionList.overall.push(item)
				}
			})
		},
		ifListOver(){
			if(!this.overallSingle){
				// this.designOpenrtionList = this.designOpenrtionList.filter((item)=>item.level2Type == "Pattern")
				// this.designList = this.designList.filter((item)=>item.level2Type == "Pattern")
				this.stateOverallSingle = 'overall'
			}else{
				this.stateOverallSingle = 'single'
			}
		},
		setPrintWH(url){
			let print = new Image
			return new Promise((resolve, reject) => {
				print.onload=()=>{
					this.print.width = print.width+'px'
					this.print.height = print.height+'px'
					resolve()
					print.remove()
				}
				print.src = url
			})
		},
		systemDesigner(num) {
        },
		formatter(value) {
			return `${value}%`;
		},
		
		setOveralSingle(){
			if(!this.overallSingle){
				// this.refetchTemplate(0)
				this.stateOverallSingle = 'overall'
			}else{
				this.stateOverallSingle = 'single'
			}
			// this.random()
		},
		async setpitch(item,index,str){
			await this.setPrintWH(item.path)
			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
				v.designOpenrtionBtn = false
			})
			if(!this.overallSingle){
				if(item.checked){
					this.imgDomIndex = 0
					this.deletePrint()
					item.checked = false
					return
				}else{
					this.designOpenrtionList.forEach((itemElem)=>{
						itemElem.checked = false
					})
					this.designList.forEach((itemElem)=>{
						itemElem.checked = false
					})
					item.checked = true
				}
				this.printStyleList[this.stateOverallSingle][0] = JSON.parse(JSON.stringify(this.currentPrintStyleList))
				this.refetchTemplate(0,true)
				this.exhibitionOpenrtionList[this.stateOverallSingle][0] = {
					angle:0,
					designType:item.designType,
					level2Type:item.level2Type,
					minIOPath:item.minIOPath,
					path:item.path,
					priority:1,
					scale:.3,
					location:[0,0],
					ifSingle:false,
				}
				this.systemDesignerPercentage = (item.scale?.[0] && !item.ifSingle)?item.scale[0]*100:30
			}else{
				this.printStyleList[this.stateOverallSingle].push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
				let currentIndex = this.printStyleList[this.stateOverallSingle].length-1
				this.exhibitionOpenrtionList[this.stateOverallSingle].push({
					angle:0,
					designType:item.designType,
					level2Type:item.level2Type,
					minIOPath:item.minIOPath,
					path:item.path,
					priority:1,
					scale:[1,1],
					location:[0,0],
					ifSingle:true,
				})
				this.refetchTemplate(currentIndex,true)
			}
		},
		//设置移动
		itemMoveMousedown(index,event){
			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
			this.imgDomIndex = index
			this.printStyleList[this.stateOverallSingle].forEach((v)=>{
				v.designOpenrtionBtn = false
			})
			if(!this.overallSingle){
				this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
			}else{
				this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
			}
			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
			this.printStyleList[this.stateOverallSingle][index].designOpenrtionBtn = true
			this.printStyleList[this.stateOverallSingle][index].style.zIndex = this.printZIndex++
			this.printStyleList[this.stateOverallSingle][index].transform = {
				scale:scale,
				rotateZ:rotateZ?rotateZ:0,
			}
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let left = Number(this.printStyleList[this.stateOverallSingle][index].style.left.replace(/px/g,''))
			let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
			this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
			this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
			// document.addEventListener("mouseup", this.mouseup);
			// document.addEventListener("mousemove", this.moveMousemove);
			document.addEventListener('mousemove', this.mouseMove);
			document.addEventListener('touchmove', this.touchmove);
			document.addEventListener('mouseup', this.mouseup);
			document.addEventListener('touchend', this.mouseup);
		},
		//设置尺寸
		itemSizeMousedown(direction,event){
			this.direction = direction
			this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
			let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
			let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].designOpenrtionBtn = true
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].transform = {
				scale:scale,
				rotateZ:rotateZ?rotateZ:0,
			}
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
			if(this.direction == 'right' || this.direction == 'bottom'){
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
			}else{
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
			}
			
			// document.addEventListener("mouseup", this.sizeMouseup);
			// document.addEventListener("mousemove", this.sizeMousemove);
			document.addEventListener('mousemove', this.sizeMouseMove);
			document.addEventListener('touchmove', this.sizeTouchmove);
			document.addEventListener('mouseup', this.sizeMouseup);
			document.addEventListener('touchend', this.sizeMouseup);
		},
		mouseMove(event){
			let e = getMousePosition(event,false)
			this.mouseMoveOperation(e)
		},
		touchmove(event){
			let e = getMousePosition(event,true)
			this.mouseMoveOperation(e)
		},
		//鼠标移动
		mouseMoveOperation(e) {
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
			parentNode = parentNode.getBoundingClientRect()
			let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
			let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
			if(!this.overallSingle){
				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
				}
				if(x.replace(/px/g,'') <= 0){
					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 0+'px'
				}
				if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
				}
				if(y.replace(/px/g,'') <= 0){
					this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 0+'px'
				}
			}
		
		},
		sizeMouseMove(event){
			let e = getMousePosition(event,false)
			this.sizeMouseMoveOperation(e)
		},
		sizeTouchmove(event){
			let e = getMousePosition(event,true)
			this.sizeMouseMoveOperation(e)
		},
		sizeMouseMoveOperation(e) {
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let parentNode =this.imgDom.parentNode
			let width = imgDomWH.width
			let height = imgDomWH.height
			let num = width/height
			let num1 = height/width
			let w,h
			//判断移动四个边
			if(this.direction == 'right'){
				w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
				h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
				width = w+'px'
				height = w*num1+'px'
			}else if(this.direction == 'top'){
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
				w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
				
				height = h+'px'
				width = h*num+'px'
			}else if(this.direction == 'bottom'){
				h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
				height = h+'px'
				width = h*num+'px'
			}else if(this.direction == 'left'){
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
				width = w+'px'
				height = w*num1+'px'
			}
			//判断尺寸是否到边
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.width = width
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.height = height

		},
		//鼠标抬起
		sizeMouseup(e){
			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style={
				right:'auto',
				left:this.imgDom.offsetLeft+'px',
				bottom:'auto',
				top:this.imgDom.offsetTop+'px',
				height:this.imgDom.offsetHeight+'px',
				width:this.imgDom.offsetWidth+'px',
				zIndex:this.printZIndex
			}
			// document.removeEventListener("mouseup", this.sizeMouseup);
			// document.removeEventListener("mousemove", this.sizeMousemove);
			document.removeEventListener('mousemove',this.sizeMouseMove)
			document.removeEventListener('touchmove',this.sizeTouchmove)
			document.removeEventListener('mouseup',this.sizeMouseup) 
			document.removeEventListener('touchend',this.sizeMouseup)
		},
		mouseup(e) {

			// document.removeEventListener("mouseup", this.mouseup);
			// document.removeEventListener("mousemove", this.moveMousemove);
			document.removeEventListener('mousemove',this.mouseMove)
			document.removeEventListener('touchmove',this.touchmove)
			document.removeEventListener('mouseup',this.mouseup) 
			document.removeEventListener('touchend',this.mouseup)
		},
		deletePrint(){
			this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)
			this.printStyleList[this.stateOverallSingle].splice(this.imgDomIndex,1)
		},
		random(){
			this.exhibitionOpenrtionList[this.stateOverallSingle].forEach((v,index)=>{
				this.refetchTemplate(index,false)
			})
		},
        //随机重置图片顺序
        refetchTemplate(index,boor) {
			let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
			let width
			let scale
			let img = new Image()
			img.onload = ()=>{
				if(sketch.width<sketch.height){
					width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
					if(boor){
						width = Math.trunc((sketch?.width-sketch?.width/2))+sketch?.width/4
					}
					scale = width / this.print.width.replace(/px/g,'')
				}else{
					width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
					if(boor){
						width = Math.trunc((sketch?.height-sketch?.height/2))+sketch?.height/4
					}
					scale = width / this.print.height.replace(/px/g,'')
				}
				let x = sketch?.width - this.print.width.replace(/px/g,'')*scale 
				if(!this.overallSingle){
					x = sketch?.width - this.print.width.replace(/px/g,'')*scale/2
				}
				let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
				let left = sketch.offsetWidth/2-this.print.width.replace(/px/g,'')*scale/2
				let top = sketch.offsetHeight/2-this.print.height.replace(/px/g,'')*scale/2
				if(this.stateOverallSingle == 'overall'){
					left = sketch.offsetWidth/2-5
					top = sketch.offsetHeight/2-5
				}
				this.printStyleList[this.stateOverallSingle][index]={
					centers:{
						left:0,
						top:0,
					},
					style:{
						left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
						top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
						right:"auto",
						bottom:"auto",
						width:this.print.width.replace(/px/g,'')*scale+'px',
						height:this.print.height.replace(/px/g,'')*scale+'px',
						zIndex:this.printZIndex++
					},
					transform:{
						// scale:scale<.2?.2:scale,//0.2-3
						// rotateZ:rotateZ1-rotateZ2,
						rotateZ:this.printStyleList[this.stateOverallSingle][index].transform.rotateZ?this.printStyleList[this.stateOverallSingle][index].transform.rotateZ:0
					},
					designOpenrtionBtn:false
				}
			}
			img.src = sketch.src
        },
		//设置图片
       	async setTemplate(item,index,str) {
			await this.setPrintWH(item.path)
			this.designOpenrtionList
			let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
			let sketchImg = new Image()
			sketchImg.onload = ()=>{
				nextTick(()=>{
				    let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
					let scale
					scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
					let zIndex = 1
					let left = item.location[0]/sketchNum+'px'
					let top = item.location[1]/sketchNum+'px'
					if(sketch.offsetWidth < item.location[0]/sketchNum){
						left = sketch.offsetWidth +'px'
					}
					if(sketch.offsetHeight < item.location[1]/sketchNum){
						top = sketch.offsetHeight +'px'
					}
					if(str == 'overall')this.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
					this.printStyleList[str][index]={
						centers:{
							left:0,
							top:0,
						},
						style:{
							left:left,
							top:top,
							right:"auto",
							bottom:"auto",
							// width:this.print.width.replace(/px/g,'')/sketchNum*item.scale[0]+'px',
							// height:this.print.height.replace(/px/g,'')/sketchNum*item.scale[1]+'px',
							width:sketch.offsetWidth*item.scale[0]+'px',
							height:sketch.offsetHeight*item.scale[1]+'px',
							zIndex:zIndex++
						},
						transform:{
							// scale:scale<.2?.2:scale,//0.2-3
							rotateZ:item.angle,
						},
						designOpenrtionBtn:false
					}
				})
				
				sketchImg.remove()
			}
			sketchImg.src = sketch.src
        },
		setOverallPosition(index,str){
			nextTick(()=>{
				let sketch = document.getElementsByClassName("designOpenrtion_modal")[0]?.getElementsByClassName('designOpenrtion_sketch')[0]
				this.printStyleList[str][index]={
					centers:{
						left:0,
						top:0,
					},
					style:{
						left:sketch.offsetWidth / 2 +'px',
						top:sketch.offsetHeight / 2 +'px',
						right:"auto",
						bottom:"auto",
						width:'auto',
						height:'auto',
						zIndex:1
					},
					transform:{
						// scale:scale<.2?.2:scale,//0.2-3
						rotateZ:0,
					},
					designOpenrtionBtn:false
				}
			})
			
		},
		computeZindex(resolve,prints){
			prints.sort((a, b) => {
				var a_num = a.priority;
				var b_num = b.priority;
				return a_num - b_num;
			});
			

			let num = 1
			
			prints.forEach((v)=>{
				v.priority = num++
			})
			resolve(prints)
		},
		computeSize(){
			return new Promise(async (resolve, reject) => {
				let arr = JSON.parse(JSON.stringify(this.printStyleList[this.stateOverallSingle]))
				// let num = this.sketch/
				let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
				let prints = []
				prints = this.operationCurrent.printObject.prints.filter(item=>!!!item.ifSingle)
				if(this.stateOverallSingle == 'overall'){
					prints = this.operationCurrent.printObject.prints.filter(item=>!!item.ifSingle)
				}else{
					prints = this.operationCurrent.printObject.prints.filter(item=>!!!item.ifSingle)
				}
				let scale
				let location
				for (let index = 0; index < arr.length; index++) {
					if(this.stateOverallSingle == 'overall'){
					// if(!this.overallSingle){
						scale =[ this.systemDesignerPercentage/100, this.systemDesignerPercentage/100]
						let overallScale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
						let x = Number(arr[index].style.left.replace(/px/g,''))
						let y = Number(arr[index].style.top.replace(/px/g,''))
						// let x = (Number(arr[index].style.left.replace(/px/g,'')) + Number(arr[index].style.width.replace(/px/g,''))/2)*sketchNum
						// let y = (Number(arr[index].style.top.replace(/px/g,'')) + Number(arr[index].style.height.replace(/px/g,''))/2)*sketchNum
						let width = Number(this.print.width.replace(/px/g,''))*scale[0]/5/2
						let height = Number(this.print.height.replace(/px/g,''))*scale[0]/5/2
						location = [(x*sketchNum) ,(y*sketchNum)]
						// location = [(x*sketchNum) - width/sketchNum/2 ,(y*sketchNum) - height/sketchNum/2]
						
					}else{
						await this.setPrintWH(this.exhibitionOpenrtionList[this.stateOverallSingle][index].path)
						scale = [arr[index].style.width.replace(/px/g,'')/sketch.offsetWidth,(arr[index].style.height.replace(/px/g,'')/sketch.offsetHeight)]
						location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
					}
					let obj = {
						angle : arr[index].transform.rotateZ,
						// angle : !this.overallSingle ? 0:arr[index].transform.rotateZ,
						location : location,
						priority:arr[index].style.zIndex,
						scale: scale,
						designType:this.exhibitionOpenrtionList[this.stateOverallSingle][index].designType,
						level2Type:this.exhibitionOpenrtionList[this.stateOverallSingle][index].level2Type,
						path:this.exhibitionOpenrtionList[this.stateOverallSingle][index].path,
						minIOPath:this.exhibitionOpenrtionList[this.stateOverallSingle][index].minIOPath,
						ifSingle:!!this.exhibitionOpenrtionList[this.stateOverallSingle][index].ifSingle,
					}
					prints.push(obj)
				}
				this.computeZindex(resolve,prints)
			})
		},
		async setPreview(){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let index 
			designItemDetail.clothes.forEach((v,ind)=>{
				if(v.id == this.current.id){
					index = ind
				}
			})
			let priority = designItemDetail.clothes.map((v)=>{
                return v.type
            })
			// let data = {
            //     ...designItemDetail,
            //     priority:priority,
            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            // }
			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
			await this.computeSize().then((rv)=>{
				this.setOkData = rv
			})
			data.designSingleItemDTOList[index].printObject={
				ifSingle:this.overallSingle,
				prints:this.setOkData,
			}
			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
			this.loadingShow = true
			Https.axiosPost(Https.httpUrls.designSingle, data).then(
				(rv) => {
					this.operationCurrent = Object.assign({},rv.clothes[index])

					// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
					this.currentFullBodyView = rv.currentFullBodyView
					this.designItemDetailTS.rv = rv
					this.designItemDetailTS.data = data
					this.loadingShow = false
					// this.designOpenrtion = false
					if(this.driver__.driver){
						nextTick().then(()=>{
							driverObj__.moveNext();
						})
					}
				}
			).catch(res=>{
				this.loadingShow = false
			});
		},
		setOK(){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let index 
			designItemDetail.clothes.forEach((v,ind)=>{
				if(v.id == this.current.id){
					index = ind
				}
			})
			if(this.designItemDetailTS.rv){
				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
				designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
				designItemDetail.clothes[index].printObject.prints = this.setOkData
				designItemDetail.ifSubmit = true
				designItemDetail.clothes.forEach((item,i)=>{
					let a
					if(item.layersObject[0].imageCategory.indexOf("back") == -1){
						a = item.layersObject[0]
						item.layersObject[0] = item.layersObject[1]
						item.layersObject[1] = a
					}
					item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
					item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
				})
				this.store.commit("setDesignItemDetail", designItemDetail);
				this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
				this.designItemDetailTS = {}
			}
			this.designOpenrtion = false
			if(this.driver__.driver){
				nextTick(()=>{
					driverObj__.moveNext();
				})
			}
		},
		clearModal(){
			this.designOpenrtion = true//modal页面关闭
			this.printZIndex = 2//点击图片z-index
			this.imgDomIndex = 0//点击图片下标
			this.designOpenrtionList = []
			this.designList = []
			this.exhibitionOpenrtionList = {
				single:[],
				overall:[],
			}
			this.printStyleList = {
				single:[],
				overall:[],
			}
		},
		closeModal(){
			if(this.designItemDetailTS.rv){
				let _this = this
				Modal.confirm({
					title: this.t('DesignPrintOperation.jsContent1'),
					icon: createVNode(ExclamationCircleOutlined),
					okText: 'Yes',
					cancelText: 'No',
					mask:false,
					centered:true,
					onOk() {
						_this.designOpenrtion=false
					}
				});
			}else{
				this.designOpenrtion=false
			}
		},
    },
});
</script>

<style lang="less" scoped>
.designOpenrtion_modal {
	// max-width: 1440px;
	user-select: none; /* 对现代浏览器有效 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
	.mark_loading{
		position: absolute;
		border-radius: 3rem;
	}
	.ant-modal-body{
		padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
		// height: calc(65vh - 6.4rem*1.2));
		height: calc(65rem*1.2);
		display: flex;
		overflow-y: hidden;
		flex-direction: column;
	}
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
		overflow: hidden;
	}

    .designOpenrtion_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem*1.2);
		display: flex;
		flex-direction: column;
		height: 100%;
        .designOpenrtion_header {
            position: relative;
            height: calc(6.6rem*1.2);
            width: 100%;
            background: #F7F7F7;

            .placement_modal_title{
                position: absolute;
                height: 100%;
                line-height: calc(6.6rem*1.2);
                left: calc(3.7rem*1.2);
                top: 0;
                font-size: calc(1.8rem*1.2);
                color: #030303;
            }
        }

		.designOpenrtion_right{
			height: calc(50rem*1.2);
			position: absolute;
			right: calc(2rem*1.2);
			left: auto;
			top: 50%;
			transform: translateY(-50%);
			max-height: calc(50rem*1.2);
			max-width: calc(30rem*1.2);
			.designOpenrtion_entirety_img{
				height: 100%;
				img{
					max-width: 100%;
					max-height: 100%;
					object-fit: contain;
					position: relative;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
		.designOpenrtion_open{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			.print_right{
				display: flex;
				flex-direction: column;
				align-items: center;
				border: 2px solid;
				padding: calc(2rem*1.2) 0;
				width: calc(16rem*1.2);
				border-radius: calc(1rem*1.2);
				height: calc(40rem*1.2);
				.habit_Overal_Single {
					display: flex;
					align-items: center;
					justify-content: center;
					// margin: 2rem*1.2) 0;
					transform: scale(.8);

					// margin: 3rem*1.2) 0;
					.habit_Overal_Single_text {
						font-weight: 600;
						color: rgba(0, 0, 0, 0.5);
						&.active {
							color: rgba(0, 0, 0, 0.7);
							// font-weight: 900;
							transform: scale(1.2);
						}
					}
					.ant-switch {
						margin: 0 calc(1rem*1.2);
						background-color: #efefef;
					}
					.ant-switch-checked {
								background-color: #000;
							}
				}
				.habit_System_Designer {
					transform: scale(.8);
					width: 100%;
					margin-top: calc(1.5rem*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{
						font-size: calc(1.6rem*1.2);
						color: rgba(0, 0, 0, 0.7);
						font-weight: 600;
					}
				}
				.button_second{
					margin: calc(1rem*1.2) 0;
					width: calc(10rem*1.2);
					text-align: center;
					position: initial;
					transform: none;
					height: calc(3rem*1.2);
					line-height: calc(3rem*1.2);
				}
				.designOpenrtion_nav{
					display: flex;
					margin-top: calc(2rem*1.2);
					flex-wrap: wrap;
					width: 100%;
					height: calc(12rem*1.2);
					overflow-x: hidden;
					justify-content: space-evenly;
					&.designOpenrtion_nav::-webkit-scrollbar {
						display: none;
					}
					.designOpenrtion_single{
						width: 40%;
						margin-bottom: calc(2rem*1.2);
						height: calc(5rem*1.2);
						&.isOverall{
							cursor: no-drop;
							img{
								pointer-events: none;
								opacity: .5;
							}
						}
					}
					img{
						height: 100%;
						width: 100%;
						cursor: pointer;
						object-fit: contain;
						&.active{
							opacity: .5;
							transform: scale(.8);
						}
					}
					.designOpenrtion_overall{
						width: 80%;
					}
				}
				&.show_print_right{
					border: none;
					padding: 0;
					flex: 1;
					height: auto;
				}
			}
		}
		.designOpenrtion_centent{
			margin: 0 auto;
			overflow: hidden;
			justify-content: space-between;
			position: relative;
			user-select:none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			&.active{
				flex-direction: row;
			}
			.designOpenrtion_imgMask{
				width: auto;
				height: auto;
				position: relative;
				>img{
					z-index: 2;
					position: relative;
					// max-width: 100%;
					// max-height: 100%;
					// width: 100%;
					// height: 50rem*1.2);
					max-height: calc(50rem*1.2);
					min-height: calc(30rem*1.2);
					width: auto;
					max-width: calc(60rem*1.2);
				}
				.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;
					overflow: hidden;
					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%;
					}
				}
			}
			
		}
		.subitOkPreviewBtn{
			z-index: 2;
			margin: calc(1rem*1.2) 0;
			width: calc(10rem*1.2);
			text-align: center;
			position: initial;
			transform: none;
		}
    }
}
</style>