import{defineComponent as se,computed as t,ref as g,watch as b,onMounted as ue,onUnmounted as ce,createVNode as u,Fragment as ve}from"vue";import pe from"lodash-es/isNumber";import O from"../../_util/classNames.mjs";import me from"../../_util/hooks/useMergedState.mjs";import de from"../../_util/vue-types/index.mjs";import{getOffset as fe}from"../../vc-util/Dom/css.mjs";import ge from"./Preview.mjs";import he,{context as we}from"./PreviewGroup.mjs";const Ce=()=>({src:String,wrapperClassName:String,wrapperStyle:{type:Object,default:void 0},rootClassName:String,prefixCls:String,previewPrefixCls:String,width:[Number,String],height:[Number,String],previewMask:{type:[Boolean,Function],default:void 0},placeholder:de.any,fallback:String,preview:{type:[Boolean,Object],default:!0},onClick:{type:Function},onError:{type:Function}}),Pe=(r,p)=>{const o={...r};return Object.keys(p).forEach(l=>{r[l]===void 0&&(o[l]=p[l])}),o};let Se=0;const be=se({compatConfig:{MODE:3},name:"VcImage",inheritAttrs:!1,props:Ce(),emits:["click","error"],setup(r,{attrs:p,slots:o,emit:l}){const j=t(()=>r.prefixCls),F=t(()=>`${j.value}-preview`),c=t(()=>{const e={visible:void 0,onVisibleChange:()=>{},getContainer:void 0};return typeof r.preview=="object"?Pe(r.preview,e):e}),h=t(()=>c.value.src??r.src),x=t(()=>r.placeholder&&r.placeholder!==!0||o.placeholder),w=t(()=>c.value.visible),z=t(()=>c.value.getContainer),y=t(()=>w.value!==void 0),B=(e,s)=>{c.value.onVisibleChange?.(e,s)},[k,N]=me(!!w.value,{value:w,onChange:B}),a=g(x.value?"loading":"normal");b(()=>r.src,()=>{a.value=x.value?"loading":"normal"});const C=g(null),m=t(()=>a.value==="error"),D=we.inject(),{isPreviewGroup:d,setCurrent:A,setShowPreview:H,setMousePosition:L,registerImage:R}=D,M=g(Se++),n=t(()=>r.preview&&!m.value),V=()=>{a.value="normal"},T=e=>{a.value="error",l("error",e)},U=e=>{if(!y.value){const{left:s,top:i}=fe(e.target);d.value?(A(M.value),L({x:s,y:i})):C.value={x:s,y:i}}d.value?H(!0):N(!0),l("click",e)},W=()=>{N(!1),y.value||(C.value=null)},v=g(null);b(()=>v,()=>{a.value==="loading"&&v.value.complete&&(v.value.naturalWidth||v.value.naturalHeight)&&V()});let f=()=>{};ue(()=>{b([h,n],()=>{if(f(),!d.value)return()=>{};f=R(M.value,h.value,n.value),n.value||f()},{flush:"post",immediate:!0})}),ce(()=>{f()});const P=e=>pe(e)?`${e}px`:e;return()=>{const{prefixCls:e,wrapperClassName:s,fallback:i,src:q,placeholder:$,wrapperStyle:J,rootClassName:E,width:G,height:S,crossorigin:K,decoding:Q,alt:I,sizes:X,srcset:Y,usemap:Z,class:_,style:ee}={...r,...p},{icons:re,maskClassName:te,...oe}=c.value,le=O(e,s,E,{[`${e}-error`]:m.value}),ie=m.value&&i?i:h.value,ae={crossorigin:K,decoding:Q,alt:I,sizes:X,srcset:Y,usemap:Z,width:G,height:S,class:O(`${e}-img`,{[`${e}-img-placeholder`]:$===!0},_),style:{height:P(S),...ee}};return u(ve,null,[u("div",{class:le,onClick:n.value?U:ne=>{l("click",ne)},style:{width:P(G),height:P(S),...J}},[u("img",{...ae,...m.value&&i?{src:i}:{onLoad:V,onError:T,src:q},ref:v},null),a.value==="loading"&&u("div",{"aria-hidden":"true",class:`${e}-placeholder`},[$||o.placeholder&&o.placeholder()]),o.previewMask&&n.value&&u("div",{class:[`${e}-mask`,te]},[o.previewMask()])]),!d.value&&n.value&&u(ge,{...oe,"aria-hidden":!k.value,visible:k.value,prefixCls:F.value,onClose:W,mousePosition:C.value,src:ie,alt:I,getContainer:z.value,icons:re,rootClassName:E},null)])}}});be.PreviewGroup=he;export{be as default,Ce as imageProps,Pe as mergeDefaultValue};
