From 37cb46b0ff9271ddfb96decb61b494f461fc78df Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 14:59:32 +0300
Subject: [PATCH] plurals

---
 components/calcValues.vue | 33 ++++++++++++++++++++-------------
 components/plural.vue     |  7 +++++++
 2 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 components/plural.vue

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 3c971ec..ce0d34e 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -116,6 +116,11 @@ const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     isModalOpen.value = !isModalOpen.value
 }
+const plurals = {
+    lamelle: { one: 'ламель', few: 'ламели', many: 'ламелей' },
+    fence: { one: 'cстолб', few: 'столба', many: 'столбов' },
+    section: { one: 'секция', few: 'секции', many: 'секций' },
+}
 </script>
 <template>
     <div class="container py-4">
@@ -168,22 +173,24 @@ const toggleModal = () => {
                     </div>
                 </div>
                 <div class="form-row">
-
-                    <div class="col-span-6 prose">
+                    <div class="col-span-8 prose">
                         <p>
-                            Забор общей длиной {{ form_state.total_length }} м,
-                            {{ section_count }} секции по {{ form_state.length }} мм
-                            <span class="contents" v-if="form_state.extra_section">
-                                1 дополнительной секцией длинной {{ form_state.extra_section }} мм
-                            </span>.
+                            Забор общей длиной {{ form_state.total_length }}{{'\xa0'}}м,
+                            {{ section_count }}
+                            <Plural :n="section_count" :forms="plurals.section" /> по
+                            {{ form_state.length }}{{'\xa0'}}мм<span class="contents" v-if="form_state.extra_section">
+                                и 1 дополнительная секция длиной {{ form_state.extra_section }}{{'\xa0'}}мм</span>.
                         </p>
                         <p>
-                            Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }} столба,
-                            {{ section_count * lamelles_count }} ламелей длинной {{ form_state.length }} мм
+                            Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }}
+                            <Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
+                            {{ section_count * lamelles_count }}
+                            <Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
+                            длиной {{ form_state.length }}{{'\xa0'}}мм
                             <span class="contents" v-if="form_state.extra_section">
-                                и {{ ~~(!!form_state.extra_section) * lamelles_count }} ламелей длинной {{
-                                    form_state.extra_section }} мм
-                            </span>
+                                и {{ ~~(!!form_state.extra_section) * lamelles_count }} 
+                                <Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" /> длиной {{
+                                    form_state.extra_section }}{{'\xa0'}}мм</span>.
                         </p>
                         <p>
                             Все элементы окрашиваются порошковым методом: <br />
@@ -191,7 +198,7 @@ const toggleModal = () => {
                             столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
                         </p>
                     </div>
-                    <div class="prose col-span-6">
+                    <div class="prose col-span-4">
                         <p v-if="form_state.extra_section" class="text-ioprim">
                             Внимание! Дополнительная секция приводит к увеличению стоимости.
                             Рекомендуем вам изменить длину забора или длину секции!
diff --git a/components/plural.vue b/components/plural.vue
new file mode 100644
index 0000000..aa5a8c1
--- /dev/null
+++ b/components/plural.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const props = defineProps(['forms', 'n'])
+const ruOrdinalRules = new Intl.PluralRules("ru-RU");
+</script>
+<template>
+    {{ props.forms[ruOrdinalRules.select(props.n)] }}
+</template>
\ No newline at end of file