From 1bd900ec4c58c698684d39d9d3dd796ba9967662 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 30 Jan 2025 17:00:19 +0300
Subject: [PATCH] tres find

---
 components/model/line.vue       |  3 +++
 components/model/parametric.vue | 17 +++++++++++++-
 composables/globalFenceType.ts  |  6 +++++
 error.vue                       |  2 +-
 pages/index.vue                 | 39 ++++++++++++++++++++-------------
 5 files changed, 50 insertions(+), 17 deletions(-)
 create mode 100644 composables/globalFenceType.ts

diff --git a/components/model/line.vue b/components/model/line.vue
index 800da0d..ec37b34 100644
--- a/components/model/line.vue
+++ b/components/model/line.vue
@@ -74,6 +74,9 @@ watch(() => [props.count, fence_section.value, section_count.value, extra_sectio
     count_pos,
     { flush: 'post' }
 )
+watch(()=>props.models.lamelle, () => {
+    console.log(props.models.lamelle)
+}, { deep: true })
 </script>
 <template>
     <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-x="position.x" :position-y="position.y"
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 1c7ba1a..5b4fc32 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -20,6 +20,8 @@ const goto_target = use_goto_target()
 const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
 
+const globalFenceType = useGlobalFenceType()
+
 const topper_models = {} as { [key: toppersIds]: Object3D }
 for await (const element of toppers) {
     const { scene } = await useGLTF(getModel(element.id))
@@ -38,6 +40,9 @@ const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb');
 const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true })
 const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
+const { scene: lamelle_model_aristo } = await useGLTF('/models_one/top_100.glb', { draco: true });
+const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
+
 const top = ref(top_model)
 const pillar_top = ref(topper_models[pillar_topper.value])
 const pillar_center = ref(model_pillar_center)
@@ -113,10 +118,20 @@ watch(open_calc, () => {
 const min_for_square = 12;
 
 setTarget()
+
+watch(() => globalFenceType.value?.id, () => {
+    console.log('t')
+    if (globalFenceType.value?.id == 5) {
+        lamelle.value = lamelle_model_aristo
+    }
+    if (globalFenceType.value?.id == 6) {
+        lamelle.value = lamelle_model_standart
+    }
+})
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="line in (total >= min_for_square) ? 4 : 1" :key="`${line}_${count}`">
+        <template v-for="line in (total >= min_for_square) ? 4 : 1" :key="`${globalFenceType?.id ?? 5}_${line}_${count}`">
             <ModelLine :models="{
                 top,
                 pillar_center, pillar_top, pillar_bottom, pillar_inner,
diff --git a/composables/globalFenceType.ts b/composables/globalFenceType.ts
new file mode 100644
index 0000000..83e185a
--- /dev/null
+++ b/composables/globalFenceType.ts
@@ -0,0 +1,6 @@
+interface calc {
+    id: number
+    calc: ApiCalcType
+}
+export const useGlobalFenceType = () => useState<calc | null>('fence-global-type', () => null)
+
diff --git a/error.vue b/error.vue
index 2ba9369..fa12618 100644
--- a/error.vue
+++ b/error.vue
@@ -32,7 +32,7 @@ if(route.path !== '/404') {
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
-                    <p class="hidden">
+                    <p>
                         <code>
                             {{ error?.message }}
                         </code>
diff --git a/pages/index.vue b/pages/index.vue
index f79bed6..57c7b08 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,6 +7,8 @@ import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
+const globalFenceType = useGlobalFenceType()
+
 const { data: seoData } = await apiFetch<ApiKpType>(`kp/1/`)
 useSeoMeta({
     title: seoData.value?.title,
@@ -51,9 +53,21 @@ const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 const setCalcData = (id: number) => {
     openTab.value = id
 }
+watch(openTab, () => {
+    if (!openTab.value) return
+    if (!calculators.value) return
+
+    const v = {
+        id: openTab.value as number,
+        calc: calculators.value.find(el => el.id == openTab.value) as ApiCalcType,
+
+    }
+    globalFenceType.value = v
+})
 </script>
 <template>
     <div>
+        <Modal :calcData="calculators.find(el => el.id == openTab)" />
         <div class="siteblock bg-white" :id="about?.slug" v-if="about">
             <div class="container">
                 <h1 class="siteblock-title">{{ about?.title }}</h1>
@@ -98,22 +112,17 @@ const setCalcData = (id: number) => {
                 </template>
             </div>
         </div>
-        <div class="siteblock bg-white" id="calculator" v-if="calculators">
-            <div class="container">
-                <div class="flex col-span-full gap-2 justify-center">
-                    <template v-for="item in calculators">
-                        <div class="flex items-center gap-2">
-                            <label class="rounded p-2 cursor-pointe peer-checked:bg-ioprim-100">
-                                <input type="radio" :value="item.id" v-model="openTab">
-                                {{ item.title }}
-                            </label>
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-        <Modal :calcData="calculators.find(el => el.id == openTab)" />
         <div class="siteblock bg-white" :id="advantages?.slug">
+            <div class="flex col-span-full gap-2 justify-center">
+                <template v-for="item in calculators">
+                    <div class="flex items-center gap-2">
+                        <label class="rounded p-2 cursor-pointe peer-checked:bg-ioprim-100">
+                            <input type="radio" :value="item.id" v-model="openTab">
+                            {{ item.title }}
+                        </label>
+                    </div>
+                </template>
+            </div>
             <div class="container gap-4">
                 <div class="col-span-full xl:col-span-8">
                     <ExpDiagram />