https://kulikov.com/build/assets/Map-BjK5Kl9R.js

1import{c as l,o as n,e as s,b as X,d as Y,r as p,w as O,a as x,n as g,t as a,F as m,j as _,u as z,m as S,v as E,g as ee,x as U,p as G,f as Q}from"./app-CG4ZI0zj.js";import{F as se}from"./filters-icon-Ca0yDuoa.js";import{C as te}from"./CustomSelectGeography-PhPhsYAq.js";import{M as oe}from"./Modal-Bh7KCqY7.js";import{_ as ae}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./select-arrow-open-white-BwCAOnIE.js";import"./close-icon-DdtPpr2m.js";const le={xmlns:"http://www.w3.org/2000/svg",width:"17",height:"24",fill:"none"};function ne(f,b){return n(),l("svg",le,[...b[0]||(b[0]=[s("path",{stroke:"#93CD0C","stroke-width":"1.5",d:"M8.475 1q3.11 0 5.318 2.144T16 8.345q0 1.528-.778 3.525a20.3 20.3 0 0 1-1.88 3.697 68 68 0 0 1-2.208 3.204 45 45 0 0 1-1.856 2.391L8.475 22q-.3-.296-.803-.887-.502-.592-1.78-2.293a47 47 0 0 1-2.283-3.302 22.4 22.4 0 0 1-1.806-3.624Q1 9.874 1 8.345q0-3.056 2.182-5.2T8.475 1Zm0 9.958a2.67 2.67 0 0 0 1.906-.764q.803-.765.803-1.849t-.803-1.849a2.67 2.67 0 0 0-1.906-.764q-1.104 0-1.881.764a2.5 2.5 0 0 0-.778 1.85q0 1.083.778 1.848.777.764 1.88.764Z"},null,-1)])])}const Z={render:ne},ie={class:"container mx-auto"},ce={class:"content"},re={class:"links flex gap-3 mb-14 text-sm"},de=["onClick"],ue={class:"flex gap-6"},pe=["id","value"],me=["for"],ve={class:"mobile-filters hidden my-14"},he={class:"filter-label"},_e={class:"map-switcher hidden"},fe={class:"shops-wrapper"},ye={class:"shop-list"},ge={class:"search mr-[10px] mt-[10px] flex"},be=["placeholder"],ke=["onClick"],we={class:"flex mb-3"},xe={class:"purple-002 text-xs font-semibold"},Ce={key:0,class:"type-separator"},Ie={class:"shop-title purple-001"},$e={class:"shop-address flex gap-2"},Me={class:"shop-working-hours mb-1"},Te=["href"],Se={key:1,class:"my-6 text-center font-bold text-xl"},Ve={class:"shop-list"},qe={class:"search mr-[10px] mt-[10px] flex"},Be=["onClick"],ze={class:"flex mb-3 shop-types"},Fe={class:"purple-002 text-xs font-semibold"},je={key:0,class:"type-separator"},Le={class:"shop-title purple-001"},Ne={class:"shop-address flex gap-2"},De={class:"shop-working-hours mb-1"},He=["href"],Oe={key:1,class:"my-6 text-center font-bold text-xl"},Ee={class:"flex w-full p-12 modal-form"},Ue={class:"flex flex-col gap-1 w-full"},Ge={class:"text-3xl mb-7"},Qe=["id","value"],Ze=["for"],Ae={class:"flex mt-16 gap-4 buttons"},Pe={__name:"Map",props:{countries:{type:Array,default:()=>[]},filterTypes:{type:Object,default:()=>({})},shops:{type:Object,default:()=>({})}},setup(f){const b=f,i=X(()=>Y.translations),r=p([]),C=p("all"),v=p(null);let F=null,k=null,I=null,$=[];const M=p(!1),c=p(b.shops),T=p(!1),y=p(!0),d=p(""),V={1:[42.87533781339504,74.61468841230314],2:[43.238949,76.889709],3:[55.008352,82.935733],0:[42.87533781339504,74.61468841230314]},j=(t,o)=>{C.value=t,v.value=o,N(o)},A=t=>{C.value=t.name,v.value=t.id,N(v.value)},L=async()=>{const t=await axios.get("/search-shop",{params:{query:d.value,countryId:v.value,typeIds:r.value}});c.value=t.data.shops,w()},N=async t=>{const o=await axios.post("/geography/filter-shops",{query:d.value,countryId:t,typeIds:r.value});c.value=o.data.shops,w()},P=async()=>{if(T.value)return;const t=await axios.post("/geography/filter-shops",{query:d.value,countryId:v.value,typeIds:r.value});c.value=t.data.shops,w()},D=async()=>{q();const t=await axios.post("/geography/filter-shops",{query:d.value,countryId:v.value,typeIds:r.value});c.value=t.data.shops,w()},J=()=>{q(),r.value=[],D()},q=()=>{T.value=!1};O(()=>b.shops,t=>{c.value=t},{immediate:!0});const K=()=>{k=new ymaps.Map("map",{center:V[0],zoom:15,controls:[]}),O(v,t=>{V[t]&&k.setCenter(V[t],13)}),w()},w=()=>{I=ymaps.templateLayoutFactory.createClass(`
2    <div class="custom-balloon">
3       <div class="balloon-img">
4            <img src="$[properties.image]" alt="shop image" style="width: 100%; height: auto;">
5        </div>
6        <div class="balloon-info">
7            <div class="balloon-header purple-001">$[properties.name]</div>
8            <div class="balloon-address">
9                <div class="location-icon">
10                    <img src="$[properties.icon]" alt="icon" style="width: 100%; height: auto;">
11                </div>
12                $[properties.address]
13            </div>
14            <div class="balloon-working-hours">
15              $[properties.workTime] $[properties.working_days] $[properties.work_time_from] - $[properties.work_time_to]
16            </div>
17            {{#properties.contact_phone}}
18            <a class="balloon-phone" href="tel:+$[properties.contact_phone]">+$[properties.contact_phone]</a>
19            {{/properties.contact_phone}}
20        </div>
21    </div>
22`,{build:function(){I.superclass.build.call(this)},clear:function(){I.superclass.clear.call(this)}}),$.forEach(t=>k.geoObjects.remove(t)),$=[],c.value.forEach(t=>{let o=new ymaps.Placemark([Number(t.latitude),Number(t.longitude)],{image:"/assets/geography/shop.webp",icon:"/assets/icons/location-icon-green.svg",name:t.name,address:t.address,working_days:t.working_days,work_time_from:t.work_time_from,work_time_to:t.work_time_to,contact_phone:t.contact_phone,workTime:i.value.map.workTime},{iconLayout:"default#image",iconImageHref:"/assets/icons/map-point.svg",balloonContentLayout:I,hideIconOnBalloonOpen:!1,hasBalloon:!0,iconImageSize:[48,62],iconImageOffset:[-15,-20]});o.events.add("mouseenter",function(){M.value||o.options.set("iconImageHref","/assets/icons/map-point-hover.svg")}),o.events.add("mouseleave",function(){M.value||o.options.set({iconImageHref:"/assets/icons/map-point.svg",iconImageSize:[48,62]})}),o.events.add("balloonopen",function(){M.value=!0,o.options.set({iconImageHref:"/assets/icons/map-point-active.svg",iconImageSize:[62,80]})}),o.events.add("balloonclose",function(){M.value=!1,o.options.set({iconImageHref:"/assets/icons/map-point.svg",iconImageSize:[48,62]})}),k.geoObjects.add(o),F=k,$.push(o)})},H=t=>{const o=$[t];F.setCenter(o.geometry.getCoordinates(),15),o.balloon.open()},R=()=>{y.value=!0},W=()=>{y.value=!1};return ymaps.ready(K),(t,o)=>(n(),l(m,null,[s("div",ie,[s("div",ce,[s("div",re,[s("div",{class:g(["link",{active:C.value==="all"}]),onClick:o[0]||(o[0]=e=>j("all",null))},a(i.value.map.buttons),3),(n(!0),l(m,null,_(f.countries,e=>(n(),l("div",{key:e.id,class:g(["link",{active:C.value===e.name}]),onClick:u=>j(e.name,e.id)},a(e.name),11,de))),128))]),s("form",ue,[(n(!0),l(m,null,_(f.filterTypes,e=>(n(),l("div",{key:e.id,class:"flex items-center mb-4"},[S(s("input",{id:e.name,type:"checkbox",class:"cursor-pointer",value:e.id,"onUpdate:modelValue":o[1]||(o[1]=u=>r.value=u),onChange:P},null,40,pe),[[U,r.value]]),s("label",{for:e.name,class:"ms-3 text-sm capitalize cursor-pointer"},a(e.name),9,me)]))),128))])]),s("div",ve,[x(te,{selectValue:i.value.map.selectValue,allCountries:i.value.map.allCountries,options:f.countries,onOtherCountry:A},null,8,["selectValue","allCountries","options"]),s("button",{class:"open-filter-btn",onClick:o[2]||(o[2]=e=>T.value=!0)},[x(z(se)),s("span",he,a(i.value.map.filter),1)])]),s("div",_e,[s("div",{class:g(["map-switcher_btn",{"map-switcher_btn_active":y.value}]),onClick:R},a(i.value.map.map),3),s("div",{class:g(["map-switcher_btn",{"map-switcher_btn_active":!y.value}]),onClick:W},a(i.value.map.list),3)])]),s("div",{id:"map",class:g([y.value?"activeTab":"hidden","relative"]),style:{height:"740px",width:"100%"}},[s("div",fe,[s("div",ye,[s("div",ge,[S(s("input",{type:"text",class:"w-full input-search",placeholder:i.value.header.EnterQuery,"onUpdate:modelValue":o[3]||(o[3]=e=>d.value=e),onInput:L},null,40,be),[[E,d.value]])]),c.value.length?(n(!0),l(m,{key:0},_(c.value,(e,u)=>(n(),l("div",{key:e.id,class:"shop-item",onClick:h=>H(u)},[s("div",we,[(n(!0),l(m,null,_(e.types,(h,B)=>(n(),l("div",{key:h.id,class:"type-item"},[s("span",xe,a(h.name),1),B!==e.types.length-1?(n(),l("span",Ce)):G("",!0)]))),128))]),s("h3",Ie,a(e.name),1),s("p",$e,[x(z(Z)),Q(" "+a(e.address),1)]),s("div",Me,a(i.value.map.workTime)+" "+a(e.working_days)+" "+a(e.work_time_from)+" - "+a(e.work_time_to),1),s("a",{class:"shop-number",href:"tel: +"+e.contact_phone},a(e.contact_phone?`+${e.contact_phone}`:""),9,Te)],8,ke))),128)):(n(),l("div",Se,"По вашему запросу ничего не найдено"))])])],2),s("div",{class:g(["shops-wrapper-mobile hidden",{activeTab:!y.value}])},[s("div",Ve,[s("div",qe,[S(s("input",{type:"text",class:"w-full input-search",placeholder:"Введите запрос","onUpdate:modelValue":o[4]||(o[4]=e=>d.value=e),onInput:L},null,544),[[E,d.value]])]),c.value.length?(n(!0),l(m,{key:0},_(c.value,(e,u)=>(n(),l("div",{key:e.id,class:"shop-item",onClick:h=>H(u)},[s("div",ze,[(n(!0),l(m,null,_(e.types,(h,B)=>(n(),l("div",{key:h.id,class:"type-item"},[s("span",Fe,a(h.name),1),B!==e.types.length-1?(n(),l("span",je)):G("",!0)]))),128))]),s("h3",Le,a(e.name),1),s("p",Ne,[x(z(Z)),Q(" "+a(e.address),1)]),s("div",De,a(i.value.map.workTime)+" "+a(e.working_days)+" "+a(e.work_time_from)+" - "+a(e.work_time_to),1),s("a",{class:"shop-number",href:"tel: +"+e.contact_phone},"+"+a(e.contact_phone),9,He)],8,Be))),128)):(n(),l("div",Oe,"По вашему запросу ничего не найдено"))])],2),x(oe,{show:T.value,onClose:q},{default:ee(()=>[s("div",Ee,[s("form",Ue,[s("h3",Ge,a(i.value.map.filter),1),(n(!0),l(m,null,_(f.filterTypes,e=>(n(),l("div",{key:e.id,class:"flex items-center"},[S(s("input",{id:e.name,type:"checkbox",class:"cursor-pointer",value:e.id,"onUpdate:modelValue":o[5]||(o[5]=u=>r.value=u)},null,8,Qe),[[U,r.value]]),s("label",{for:e.name,class:"ms-3 text-sm capitalize font-semibold cursor-pointer"},a(e.name),9,Ze)]))),128)),s("div",Ae,[s("button",{type:"button",class:"submit-btn",onClick:D},a(i.value.map.buttonFilter1),1),s("button",{type:"button",class:"reset-btn",onClick:J},a(i.value.map.buttonFilter2),1)])])])]),_:1},8,["show"])],64))}},ss=ae(Pe,[["__scopeId","data-v-683fafca"]]);export{ss as default};