import{d as $,b as y,p as X,r as l,e as p,f,F as C,j as L,n as w,C as h,w as S,v as _,u as i,A as z,_ as F}from"./index.0308b213.js";const R=["onMousemove","onMouseup"],P=["onMousedown"],U=$({props:{config:null,canDraw:{type:Boolean}},emits:["update:config"],setup(n,{emit:Y}){const m=n;let c=y(m.config);X(()=>m.initialValue,t=>{localValue.value=t}),X(c,t=>{Y("update:config",t)},{deep:!0});const u=l(""),e=y({isVisible:!1,startX:0,startY:0,currentX:0,currentY:0}),s=y({top:0,left:0,width:0,height:0}),H=()=>{if(u.value){const t=u.value.getBoundingClientRect(),a=Math.abs(e.currentX-e.startX),o=Math.abs(e.currentY-e.startY);s.width=`${a}`,s.height=`${o}`,s.left=`${e.startX+(e.currentX<e.startX?e.currentX-e.startX:0)-t.left}`,s.top=`${e.startY+(e.currentY<e.startY?e.currentY-e.startY:0)-t.top}`}},I=t=>{e.isVisible=!0,e.startX=t.clientX,e.startY=t.clientY},Z=t=>{e.isVisible&&(e.currentX=t.clientX,e.currentY=t.clientY,H())},M=()=>{e.isVisible&&c.pictureHotZoneList.push({w:s.width,h:s.height,x:s.top,y:s.left,lt:0,rt:0,lb:0,rb:0,link:""}),e.isVisible=!1},D=l(null),g=l(!1),x=l(0),b=l({x:0,y:0}),r=l({x:0,y:0}),V=(t,a)=>{b.value={x:t.clientX-r.value.x,y:t.clientY-r.value.y},x.value=a,t.target.style.zIndex=9999,g.value=!0},k=t=>{g.value&&(u.value.getBoundingClientRect(),r.value={x:t.clientX-b.value.x,y:t.clientY-b.value.y},t.target.style.transform=`translate(${r.value.x}px, ${r.value.y}px)`)},B=t=>{if(g.value){const o=t.target.style.transform.match(/translate\(([^,]+),\s*([^)]+)\)/),d=parseFloat(o[1]),v=parseFloat(o[2]);t.target.style.transform="translate(0, 0)",c.pictureHotZoneList[x.value].x+=v,c.pictureHotZoneList[x.value].y+=d}else M();r.value={x:0,y:0},t.target.style.zIndex=6666,g.value=!1};return(t,a)=>(p(),f("div",{style:w([{width:"360px"},[{height:360/(n.config.bgImgWidth/360)*(n.config.bgImgHeight/360)+"px",backgroundImage:"url("+n.config.bgImg+")",backgroundSize:"100%"+360/(n.config.bgImgWidth/360)*(n.config.bgImgHeight/360)+"px"},n.config.tile===1?{position:"relative",width:"384px",left:"-12px"}:{}]]),class:"pictureHotZoneBox",ref_key:"pictureHotZoneBox",ref:u,onMousedown:a[0]||(a[0]=h(o=>n.canDraw&&I(o),["stop"])),onMousemove:h(Z,["stop"]),onMouseup:h(M,["stop"])},[(p(!0),f(C,null,L(n.config.pictureHotZoneList,(o,d)=>(p(),f("div",{class:"pictureHotZoneItem",style:w({width:o.w+"px",height:o.h+"px",top:o.x+"px",left:o.y+"px",borderRadius:o.lt+"px "+o.rt+"px "+o.rb+"px "+o.lb+"px"}),key:`nav-list-${d}`,ref_for:!0,ref_key:"draggable",ref:D,onMousedown:h(v=>V(v,d),["stop"]),onMousemove:k,onMouseup:B},null,44,P))),128)),n.canDraw?S((p(),f("div",{key:0,class:"pictureHotZoneItem",style:w({width:i(s).width+"px",height:i(s).height+"px",top:i(s).top+"px",left:i(s).left+"px",borderRadius:"0px"})},null,4)),[[_,i(e).isVisible]]):z("",!0)],44,R))}});const j=F(U,[["__scopeId","data-v-4bf65cd0"]]);export{j as default};