From cd3286349490abf90f9affffc0ccf6ec7af60267 Mon Sep 17 00:00:00 2001
From: Veselov <nadar.veselov777@gmail.com>
Date: Mon, 28 Jul 2025 17:49:59 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D0=BE=20uid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/queries/useGetProductsDetail.ts | 10 +---
 layouts/default.vue                 |  2 +-
 pages/index.vue                     | 91 ++++++++++++++++++++++++++---
 3 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/api/queries/useGetProductsDetail.ts b/api/queries/useGetProductsDetail.ts
index 6095221..5e1cc62 100644
--- a/api/queries/useGetProductsDetail.ts
+++ b/api/queries/useGetProductsDetail.ts
@@ -1,14 +1,10 @@
 import { useQuery } from '@tanstack/vue-query'
-import { unref, watch } from 'vue'
+import { unref } from 'vue'
 import { getProductsDetail } from '~/api/endpoints'
 
 export const useGetProductsDetail = (productId: MaybeRef<number>) => {
-  const q = useQuery({
-    queryKey: ['get-products-detail', unref(productId)],
+  return useQuery({
+    queryKey: ['get-products-detail', productId],
     queryFn: () => getProductsDetail(unref(productId)),
   })
-
-  watch(() => productId, () => q.refetch())
-
-  return q
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index e2aaa60..293c54e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -29,7 +29,7 @@
 }
 
 .container {
-  max-width: 1000px;
+  max-width: 100%;
   margin: 48px auto 100px;
 
   @media (max-width: 1280px) {
diff --git a/pages/index.vue b/pages/index.vue
index e90202c..ce5aff0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,38 @@
 <template>
-  <div>
-    <pre>
-    {{ productsData?.images?.filter(img => img?.src?.includes(colorVariants.blackCottonPolyester)) }}
-    </pre>
+  <div class="card">
+    <div class="card__images">
+      <div
+        v-for="image in currentVariantImages"
+        :key="image?.id"
+      >
+        <img width="100%" :src="image?.src" :alt="image?.src">
+      </div>
+    </div>
+
+    <div class="card__description">
+      <h1>{{ productsData?.name }}</h1>
+
+      Цена
+      {{ currentVariant?.price }}
+
+      Коротокое описание
+      {{ productsData?.short_description }}
+
+      <div class="card__variation">
+        <div
+          v-for="variation in productsData?.variations"
+          :key="variation?.id"
+          @click="() => currentVariantId = variation?.id"
+        >
+          {{ variation?.id }}
+          <img width="200px" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
+        </div>
+      </div>
+
+      <pre>
+        {{ currentVariant }}
+      </pre>
+    </div>
   </div>
 </template>
 
@@ -11,10 +41,53 @@ import { useGetProductsDetail } from '~/api/queries'
 
 const { data: productsData } = useGetProductsDetail(79)
 
-const colorVariants = {
-  beigeCottonPolyester: 'beige_cotton-polyester_',
-  blackCotton: 'black_cotton_',
-  greyCottonPolyester: 'grey_cotton-polyester_',
-  blackCottonPolyester: 'black_cotton-polyester_',
+function getAttribute(attributes, name: string) {
+  return attributes?.find(attribute => attribute?.name === name)?.option
 }
+
+const defaultColor = computed(() => getAttribute(productsData?.value?.default_attributes, 'color'))
+const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material'))
+
+const defaultVariant = computed(() => {
+  return productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'color') === defaultColor?.value)
+    && productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'material') === defaultMaterial?.value)
+})
+
+const currentVariantId = ref(defaultVariant?.value?.id)
+
+const currentVariant = computed(() => productsData?.value?.variations?.find(variation => variation?.id === currentVariantId?.value))
+
+const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color'))
+const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material'))
+
+const currentVariantImages
+    = computed(() => productsData?.value?.images
+      ?.filter(img => img?.src?.includes(`${currentColor.value}_${currentMaterial.value}_`)))
+
+watch(() => defaultVariant.value, newValue => currentVariantId.value = newValue?.id)
 </script>
+
+<style lang="scss">
+.card {
+  display: flex;
+  flex-direction: row;
+
+  &__images {
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    width: 40%;
+  }
+
+  &__variation {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+}
+</style>