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