import{d as ee,af as j,c as T,r as c,o as te,b as ne,e as s,f as r,g as a,ag as P,F as D,l as H,a8 as v,m as U,p as m,j as z,t as V}from"./DOfG14GD.js";import{u as le}from"./YsKoOGK6.js";const ae=["data-content-key","onClick"],oe=["src","alt"],ie={class:"pointer-events-none relative z-10 w-full -translate-y-[60px] px-4 pb-[200px] pt-[20px] md:-translate-y-[140px] md:px-8 md:pb-[420px] md:pt-[34px]"},se={class:"pointer-events-auto grid w-full grid-cols-2 gap-3 md:inline-flex md:w-auto md:items-start md:gap-4"},re=["onMouseenter"],ue=["onClick"],ce={class:"flex items-center"},ve=["data-content-key","onClick"],de=["data-content-key","onClick"],fe={class:"mt-auto flex w-full items-end justify-between"},me=["data-content-key","onClick"],be=["src","alt"],ye=["src","alt"],he={key:2,viewBox:"0 0 64 64",fill:"none",stroke:"currentColor","stroke-width":"2.5",class:"h-full w-full"},pe={key:0,class:"mb-1 inline-flex h-7 w-9 items-center text-white"},ge=ee({__name:"FourFeatureCardsBannerLayout",props:{content:{default:()=>[]},editable:{type:Boolean,default:!1},activeKey:{default:null},onContentClick:{},onButtonClick:{},textStyle:{},className:{}},setup(b){const o=b,{pick:y,resolveKey:w,isActive:C,resolveTextStyle:R,handleClick:F}=le({content:j(o,"content"),activeKey:j(o,"activeKey"),editable:j(o,"editable"),onContentClick:o.onContentClick,textStyle:o.textStyle});function L(t,n=""){return String(t?.attribute?.value??"").trim()||n}const W=[{titleKey:"title",enKey:"title01",iconKey:"image",activeIconKey:"image01",btnKey:"button",bannerKey:"image02",defTitle:"荣誉资质",defEn:`Honorary
certificate`},{titleKey:"title02",enKey:"title03",iconKey:"image03",activeIconKey:"image04",btnKey:"button01",bannerKey:"image05",defTitle:"企业实力",defEn:`Enterprise
strength`},{titleKey:"title04",enKey:"title05",iconKey:"image06",activeIconKey:"image07",btnKey:"button02",bannerKey:"image08",defTitle:"企业文化",defEn:`Enterprise
culture`},{titleKey:"title06",enKey:"title07",iconKey:"image09",activeIconKey:"image10",btnKey:"button03",bannerKey:"image11",defTitle:"合作伙伴",defEn:`Business
partners`}],K=T(()=>W.map(t=>{const n=y(t.titleKey),e=y(t.enKey),l=y(t.iconKey),d=y(t.activeIconKey),O=y(t.btnKey),X=y(t.bannerKey);return{key:t.titleKey,title:n,enTitle:e,icon:l,activeIcon:d,button:O,banner:X,titleText:L(n,t.defTitle),enText:L(e,t.defEn),iconSrc:l?.attribute?.src??"",activeIconSrc:d?.attribute?.src??"",bannerSrc:X?.attribute?.src??"",target:O?.attribute?.target??""}})),x=c(-1),u=c(typeof window<"u"?window.matchMedia("(max-width: 767px)").matches:!1),i=T(()=>u.value?-1:x.value);function A(t){u.value||(x.value=t,k.value||(f.value=t))}const f=c(0),S=c(null),B=c(0),h=c(null),p=c(0),k=c(!1),g=c(!1),G=T(()=>u.value?0:f.value),Q=T(()=>({transform:`translate3d(${-G.value*B.value+(u.value?0:p.value)}px, 0, 0)`,transition:k.value?"none":"transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1)"}));function I(){B.value=S.value?.clientWidth??0}let E=null,_=null;function $(t){u.value=t?.matches??_?.matches??!1,u.value&&(f.value=0,x.value=-1,h.value=null,p.value=0,k.value=!1,g.value=!1)}te(()=>{I(),typeof ResizeObserver<"u"&&S.value&&(E=new ResizeObserver(I),E.observe(S.value)),typeof window<"u"&&(_=window.matchMedia("(max-width: 767px)"),$(),_.addEventListener("change",$))}),ne(()=>{E?.disconnect(),_?.removeEventListener("change",$)});function q(t){u.value||(I(),h.value=t.clientX,p.value=0,k.value=!0,g.value=!1,t.currentTarget?.setPointerCapture?.(t.pointerId))}function J(t){if(u.value||h.value==null)return;let n=t.clientX-h.value;Math.abs(n)>4&&(g.value=!0);const e=f.value===0&&n>0,l=f.value===K.value.length-1&&n<0;(e||l)&&(n*=.35),p.value=n}function N(){if(u.value||h.value==null)return;const t=p.value,n=Math.max(40,B.value*.12);if(h.value=null,k.value=!1,p.value=0,Math.abs(t)>n){const e=f.value+(t<0?1:-1);f.value=Math.min(Math.max(e,0),K.value.length-1)}}function M(t){if(o.editable){F(t);return}t?.attribute?.target&&o.onButtonClick&&o.onButtonClick(t?.attribute?.target)}function Y(t){if(g.value){g.value=!1;return}if(o.editable){F(t.banner);return}t.target&&o.onButtonClick&&o.onButtonClick(t.target)}function Z(t,n){const e=R(t);return n?{...e??{},color:"#fff"}:e}return(t,n)=>(r(),s("section",{class:m(["relative bg-[#f3f4f5] mt-[80px] md:mt-[160px]",b.className])},[a("div",{ref_key:"trackRef",ref:S,class:"absolute inset-0 touch-pan-y select-none overflow-hidden md:cursor-grab md:active:cursor-grabbing",onPointerdown:q,onPointermove:J,onPointerup:N,onPointercancel:N},[a("div",{class:"flex h-full w-full",style:P(Q.value)},[(r(!0),s(D,null,H(K.value,e=>(r(),s("div",{key:`banner-${e.key}`,class:"h-full w-full shrink-0 basis-full","data-content-key":e.banner&&v(w)(e.banner)||void 0,onClick:l=>Y(e)},[e.bannerSrc?(r(),s("img",{key:0,src:e.bannerSrc,alt:e.titleText,draggable:"false",class:m(["h-full w-full object-cover",[{mark:b.editable&&e.banner&&v(C)(e.banner)}]])},null,10,oe)):U("",!0)],8,ae))),128))],4)],544),a("div",ie,[a("div",se,[(r(!0),s(D,null,H(K.value,(e,l)=>(r(),s("div",{key:e.key,class:"h-[150px] w-full md:h-[216px] md:w-[188px]",onMouseenter:d=>A(l),onMouseleave:n[0]||(n[0]=d=>x.value=-1)},[a("div",{class:m(["group flex h-full w-full cursor-pointer flex-col items-start overflow-hidden rounded-[6px] px-3 py-3.5 transition-all duration-300 md:px-5 md:py-6",l===i.value?"-translate-y-[16px] md:-translate-y-[34px] bg-[var(--theme-primary-color)] border border-[#ddd] rounded-xl":"bg-white border border-[#ddd] rounded-xl"]),onClick:d=>M(e.button)},[a("div",ce,[a("span",{class:m(["mr-2 h-[15px] w-[3px] shrink-0",l===i.value?"bg-white":"bg-[var(--theme-primary-color)]"])},null,2),a("span",{class:m(["text-[15px] font-bold leading-none transition md:text-[18px]",[l===i.value?"text-white":"text-[#222]",{mark:b.editable&&e.title&&v(C)(e.title)}]]),"data-content-key":e.title&&v(w)(e.title)||void 0,style:P(Z(e.title,l===x.value)),onClick:z(d=>M(e.button),["stop"])},V(e.titleText),15,ve)]),a("span",{class:m(["mt-1.5 whitespace-pre-line text-[10px] uppercase leading-[1.5] tracking-[1px] transition md:mt-2.5 md:text-[12px]",[l===i.value?"text-white/85":"text-[#bbb]",{mark:b.editable&&e.enTitle&&v(C)(e.enTitle)}]]),"data-content-key":e.enTitle&&v(w)(e.enTitle)||void 0,style:P(l===i.value?void 0:v(R)(e.enTitle)),onClick:z(d=>M(e.button),["stop"])},V(e.enText),15,de),a("div",fe,[a("span",{class:m(["flex h-9 w-9 items-center justify-center md:h-[58px] md:w-[58px]",[l===i.value?"text-white":"text-[var(--theme-primary-color)]",{mark:b.editable&&e.icon&&v(C)(e.icon)}]]),"data-content-key":(l===i.value?e.activeIcon:e.icon)&&v(w)(l===i.value?e.activeIcon:e.icon)||void 0,onClick:z(d=>M(e.button),["stop"])},[l===i.value&&e.activeIconSrc?(r(),s("img",{key:0,src:e.activeIconSrc,alt:e.titleText,class:"max-h-full max-w-full object-contain"},null,8,be)):e.iconSrc?(r(),s("img",{key:1,src:e.iconSrc,alt:e.titleText,class:"max-h-full max-w-full object-contain"},null,8,ye)):(r(),s("svg",he,[...n[1]||(n[1]=[a("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M20 24h24M20 34h24M20 44h16"},null,-1),a("rect",{x:"12",y:"12",width:"40",height:"44",rx:"3"},null,-1)])]))],10,me),l===i.value?(r(),s("span",pe,[...n[2]||(n[2]=[a("svg",{class:"h-4 w-9",fill:"none",stroke:"currentColor",viewBox:"0 0 40 16"},[a("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",d:"M2 8h34m0 0l-6-5m6 5l-6 5"})],-1)])])):U("",!0)])],10,ue)],40,re))),128))])])],2))}});export{ge as default};