From fb8bc8502cec72f5da6bf5fe997a4cfd3bb17603 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 20 Jun 2024 09:57:42 +0300
Subject: [PATCH] calc

---
 components/modal.vue | 72 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/components/modal.vue b/components/modal.vue
index 3f76423..ac06a46 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -93,29 +93,62 @@ const roubleSign = new Intl.NumberFormat('ru-RU', {
 });
 const total_txt = computed(() => {
     const { mortgage, pillar, lamella, rivets, bar, guide } = calculatorData.value
-    const pillar_count = (section_count.value + 1)
+    const sections = section_count.value as number
+    const extra_mm = extra_section.value as number
+
+    const pillar_count = mortgage + 1
     const pil = (parseFloat(mortgage) + parseFloat(pillar)) * pillar_count
 
     const length = fence_section.value
 
-    const lam_count = lamelles_count.value * section_count.value
+    const lam_count = lamelles_count.value * sections
     const lam = (lam_count * length * parseFloat(lamella)) + parseFloat(rivets)
 
-    const top_count = section_count.value
-    const top = top_count * lamella
+    const top_count = section_count.value as number
+    const top = top_count * bar
 
-    const guides_count = section_count.value * 2
+    const guides_count = sections * 2
     const guides = guides_count * parseFloat(guide) * lam_count * 0.115
 
-    const total = (!remove_pillar.value ? pil : 0) + lam + guides + top
-    return [
-        !remove_pillar.value && `Столб, ${pillar_count}: (${parseFloat(mortgage)} + ${parseFloat(pillar)}) x ${pillar_count} = ${roubleSign.format(pil)}`,
-        `Ламели, ${lam_count}: (${lam_count} x ${length} x ${lamella}) + ${rivets} = ${roubleSign.format(lam)}`,
-        `Направляющая, ${guides_count}: ${guides_count} x ${guide} x ${lam_count} x 0.115 = ${roubleSign.format(guides)}`,
-        `Верхняя планка, ${top_count}: ${top_count} x ${length} x ${bar} = ${roubleSign.format(top)}`,
-        `Итого ${roubleSign.format(total)}`
-    ].filter(Boolean)
 
+    const extra = {
+        pillar: !remove_pillar.value && {
+            txt: 'Дополнительная секция, столб, 1шт',
+            value: ((parseFloat(mortgage) + parseFloat(pillar)) * 1)
+        },
+        lamella: {
+            txt: `Дополнительная секция, ламели, ${lamelles_count.value}шт`,
+            value: ((parseFloat(mortgage) + parseFloat(pillar)) * 1)
+        },
+        guide: { txt: 'Направляющие', value: 2 * parseFloat(guide) * lam_count * 0.115 },
+        top: { txt: 'Верхняя планка', value: 1 * bar },
+
+    }
+    const regular = {
+        pillar: !remove_pillar.value && {
+            txt: `Столб`,
+            value: (parseFloat(mortgage) + parseFloat(pillar)) * pillar_count
+        },
+        lamella: { txt: 'Ламели', value: (lam_count * length * parseFloat(lamella)) + parseFloat(rivets) },
+        guide: { txt: 'Направляющие', value: guides_count * parseFloat(guide) * lam_count * 0.115 },
+        top: { txt: 'Верхняя планка', value: top_count * lamella },
+    }
+
+    const total = [extra, regular].map(item => Object.values(item).map(el => el ? el.value : 0)).flat().reduce((a, b) => a + b, 0)
+
+    const res_regular = Object.values(regular).map(item =>
+        Object.entries(item).map(el => el[0] == 'value' ? roubleSign.format(el[1] as number) : el[1]).join(': ')
+    ).filter(Boolean)
+    const res_extra = extra_section.value ? Object.values(extra).map(item =>
+        Object.entries(item).map(el => el[0] == 'value' ? roubleSign.format(el[1] as number) : el[1]).join(': ')
+    ).filter(Boolean) : []
+
+    const res_total = [`Итого ${roubleSign.format(total)}`]
+    return {
+        regular: res_regular,
+        extra: res_extra,
+        total: res_total
+    }
 })
 </script>
 <template>
@@ -127,7 +160,7 @@ const total_txt = computed(() => {
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
                     <input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone"
                         @keypress="validateInput" @keyup="validate" />
-                    {{ total_txt[total_txt.length - 1] }}
+                    {{ total_txt.extra[0] }}
                     <div class="flex gap-4">
                         <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
                         <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
@@ -138,14 +171,17 @@ const total_txt = computed(() => {
                 <h2>данные расчета</h2>
                 <div class="flex gap-4 flex-col mb-4">
                     <p>Ламелей: {{ lamelles_count }}<br />
-                        Длина секции: {{ fence_section * 1000 }}<br />
+                        Длина секции: {{ (fence_section * 1000).toFixed(0) }}<br />
                         Общая длина: {{ total_length }}<br />
                         Секций: {{ section_count }}<br />
                         Цвет столба: {{ getColorNameFromRal(pillar_color) }}<br />
-                        Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}</p>
-                    <p>
-                        <template v-for="i in total_txt">{{ i }}<br /></template>
+                        Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
                     </p>
+                    <template v-for="item in total_txt">
+                        <p v-if="item.length">
+                            <template v-for="i in item">{{ i }}<br /></template>
+                        </p>
+                    </template>
                 </div>
                 <div class="flex gap-4">
                     <button class="not-prose" @click="openForm">Данные верны</button>