import{d as U,r as f,c as j,z,o as D,A as J,J as K,e as d,f as g,h as p,j as k,C as x,k as m,g as L,aP as O,n as i}from"./index-a0da86f0.js";import{I as _}from"./iconify-56cbf3ff.js";import{_ as $}from"./_plugin-vue_export-helper-c27b6911.js";const q={class:"image-wrapper"},F=["src","alt"],H={key:0,class:"image-index"},Q=U({__name:"ImageGallery",props:{images:{},initialIndex:{}},emits:["close"],setup(E,{expose:T,emit:M}){const n=E,B=M,s=f(!1),t=f(0),r=f(!1),X=j(()=>n.images[t.value]||""),N=(e=0)=>{t.value=Math.max(0,Math.min(e,n.images.length-1)),s.value=!0,r.value=!1},o=()=>{s.value=!1,B("close")},c=()=>{n.images.length<=1||(t.value=t.value>0?t.value-1:n.images.length-1,r.value=!1)},l=()=>{n.images.length<=1||(t.value=t.value<n.images.length-1?t.value+1:0,r.value=!1)},S=e=>{e.target===e.currentTarget&&o()},A=e=>{const a=e.target;if(!(a.tagName==="BUTTON"||a.closest("button"))&&!(a.classList.contains("image-index")||a.closest(".image-index"))){if(a.classList.contains("gallery-image")){const u=a.getBoundingClientRect(),v=e.clientX-u.left,P=u.width;v<P/2?c():l();return}o()}},G=e=>{e.stopPropagation();const h=e.currentTarget.getBoundingClientRect(),u=e.clientX-h.left,v=h.width;u<v/2?c():l()},R=()=>{r.value=!0},y=e=>{if(s.value)switch(e.key){case"Escape":o();break;case"ArrowLeft":c();break;case"ArrowRight":l();break}};let b=0,C=0;const w=e=>{e.touches.length===1&&(b=e.touches[0].clientX)},I=e=>{e.changedTouches.length===1&&(C=e.changedTouches[0].clientX,V())},V=()=>{const e=C-b,a=50;Math.abs(e)>a&&(e<0?l():c())};return z(()=>n.initialIndex,e=>{e!==void 0&&s.value&&(t.value=Math.max(0,Math.min(e,n.images.length-1)))}),D(()=>{document.addEventListener("keydown",y),document.addEventListener("touchstart",w,{passive:!0}),document.addEventListener("touchend",I,{passive:!0})}),J(()=>{document.removeEventListener("keydown",y),document.removeEventListener("touchstart",w),document.removeEventListener("touchend",I)}),T({open:N,close:o}),(e,a)=>(i(),K(O,{to:"body"},[s.value?(i(),d("div",{key:0,class:"image-gallery-modal",onClick:S},[g("div",{class:"image-gallery-container",onClick:A},[g("button",{class:"close-btn",onClick:o},[p(k(_),{icon:"tabler:x"})]),g("div",q,[g("img",{src:X.value,alt:`图片 ${t.value+1}`,class:"gallery-image",onLoad:R,onClick:G},null,40,F),e.images.length>1?(i(),d("button",{key:0,class:"nav-btn nav-left",onClick:x(c,["stop"])},[p(k(_),{icon:"tabler:chevron-left"})])):m("",!0),e.images.length>1?(i(),d("button",{key:1,class:"nav-btn nav-right",onClick:x(l,["stop"])},[p(k(_),{icon:"tabler:chevron-right"})])):m("",!0)]),e.images.length>1?(i(),d("div",H,L(t.value+1)+" / "+L(e.images.length),1)):m("",!0)])])):m("",!0)]))}});const ee=$(Q,[["__scopeId","data-v-5cebea08"]]);export{ee as default};
