From e8981bbd45a4ae8e80d7cd55fd10f587caafb21c Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Fri, 7 Nov 2025 09:07:45 +0500
Subject: [PATCH] 	modified:  
 main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue 
 modified:  
 main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue set path
 for NuxtLink links to contact and support pages

---
 .../app/components/layout/HamburgerMenu.vue   |    4 +-
 .../easySite/app/pages/objects/[id]/index.vue | 1479 ++++++++++++++---
 2 files changed, 1245 insertions(+), 238 deletions(-)

diff --git a/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue b/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue
index 5f9cd9f..6021ef7 100644
--- a/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue
+++ b/main_dc/yalarba/easySite/easySite/app/components/layout/HamburgerMenu.vue
@@ -102,12 +102,12 @@
             <span class="menu-text">О компании</span>
           </NuxtLink>
 
-          <a href="#" class="menu-item" @click="closeMenu">
+          <a href="/support" class="menu-item" @click="closeMenu">
             <span class="menu-icon">❓</span>
             <span class="menu-text">Помощь</span>
           </a>
 
-          <a href="#" class="menu-item" @click="closeMenu">
+          <a href="/contact" class="menu-item" @click="closeMenu">
             <span class="menu-icon">📞</span>
             <span class="menu-text">Контакты</span>
           </a>
diff --git a/main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue b/main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue
index e68f33f..74584cc 100644
--- a/main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue
+++ b/main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/index.vue
@@ -1,290 +1,1297 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div class="object-page">
     <!-- Хлебные крошки -->
-    <div class="bg-white border-b">
-      <div class="container py-4">
-        <nav class="flex items-center gap-2 text-sm">
-          <NuxtLink to="/objects" class="text-primary-600 hover:text-primary-700">
-            Объекты
-          </NuxtLink>
-          <span class="text-gray-400">/</span>
-          <span class="text-gray-600">{{ object?.title }}</span>
-        </nav>
+    <div class="container">
+      <nav class="breadcrumbs">
+        <NuxtLink to="/">Главная</NuxtLink>
+        <span class="separator">/</span>
+        <NuxtLink to="/objects">Объекты</NuxtLink>
+        <span class="separator">/</span>
+        <NuxtLink :to="`/objects?category=${object.category}`">{{ categoryName }}</NuxtLink>
+        <span class="separator">/</span>
+        <span class="current">{{ object.title }}</span>
+      </nav>
+    </div>
+
+    <!-- Галерея изображений -->
+    <div class="gallery-section">
+      <div class="container">
+        <div class="gallery-main">
+          <div class="main-image">
+            <img :src="object.images[0]" :alt="object.title" @click="openGallery(0)">
+            <button v-if="object.images.length > 1" class="gallery-toggle" @click="openGallery(0)">
+              📷 {{ object.images.length }} фото
+            </button>
+          </div>
+          <div v-if="object.images.length > 1" class="thumbnail-grid">
+            <div 
+              v-for="(image, index) in object.images.slice(1, 5)" 
+              :key="index"
+              class="thumbnail"
+              @click="openGallery(index + 1)"
+            >
+              <img :src="image" :alt="`${object.title} ${index + 2}`">
+              <div v-if="index === 3 && object.images.length > 5" class="more-images">
+                +{{ object.images.length - 5 }}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
-    <div class="container py-8">
-      <!-- Заголовок и действия -->
-      <div class="flex justify-between items-start mb-8">
-        <div>
-          <h1 class="text-3xl font-bold mb-2">{{ object?.title }}</h1>
-          <div class="flex items-center gap-4 text-gray-600">
-            <span class="flex items-center gap-1">
-              📍 {{ object?.city }}, {{ object?.country }}
-            </span>
-            <span class="badge badge-primary">
-              {{ getTypeLabel(object?.type || '') }}
-            </span>
-            <span v-if="object?.rating" class="flex items-center gap-1">
-              ⭐ {{ object.rating }} ({{ object.reviewCount }} отзывов)
-            </span>
-          </div>
-        </div>
-
-        <div class="flex gap-3" v-if="isOwner">
-          <NuxtLink 
-            :to="`/objects/${object?.id}/edit`"
-            class="btn btn-outline"
-          >
-            Редактировать
-          </NuxtLink>
-          <button 
-            @click="handleDelete"
-            class="btn btn-outline text-red-600 hover:bg-red-50"
-          >
-            Удалить
-          </button>
-        </div>
-      </div>
-
-      <!-- Основной контент -->
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Левая колонка - изображения и описание -->
-        <div class="lg:col-span-2 space-y-8">
-          <!-- Галерея изображений -->
-          <div class="card">
-            <div class="card-body p-0">
-              <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
-                <img 
-                  :src="object?.images[0] || '/images/placeholder.jpg'"
-                  :alt="object?.title"
-                  class="w-full h-96 object-cover"
-                >
-              </div>
-              <div class="grid grid-cols-4 gap-2 p-4" v-if="object?.images.length > 1">
-                <img 
-                  v-for="(image, index) in object.images.slice(1, 5)"
-                  :key="index"
-                  :src="image"
-                  :alt="`${object.title} - изображение ${index + 2}`"
-                  class="w-full h-20 object-cover rounded cursor-pointer"
-                  @click="currentImage = image"
-                >
-              </div>
+    <!-- Основная информация -->
+    <div class="container">
+      <div class="object-layout">
+        <!-- Основной контент -->
+        <div class="object-main">
+          <!-- Заголовок и мета-информация -->
+          <header class="object-header">
+            <div class="object-meta">
+              <span class="object-category">{{ categoryName }}</span>
+              <span class="object-rating">
+                ⭐ {{ object.rating }} ({{ object.reviewsCount }} отзывов)
+              </span>
             </div>
+            <h1 class="object-title">{{ object.title }}</h1>
+            <div class="object-location">
+              📍 {{ object.location.address }}
+              <span class="distance" v-if="object.location.distance">
+                • {{ object.location.distance }} от центра
+              </span>
+            </div>
+          </header>
+
+          <!-- Быстрые действия -->
+          <div class="quick-actions">
+            <button class="btn btn-outline" @click="addToFavorites">
+              ❤️ {{ isFavorite ? 'В избранном' : 'В избранное' }}
+            </button>
+            <button class="btn btn-outline" @click="shareObject">
+              📤 Поделиться
+            </button>
+            <button class="btn btn-outline" @click="showOnMap">
+              🗺️ На карте
+            </button>
+            <button class="btn btn-outline" @click="reportProblem">
+            ⚠️ Сообщить о проблеме
+            </button>
           </div>
 
           <!-- Описание -->
-          <div class="card">
-            <div class="card-header">
-              <h2 class="text-xl font-semibold">Описание</h2>
-            </div>
-            <div class="card-body">
-              <p class="text-gray-700 leading-relaxed">{{ object?.description }}</p>
-            </div>
-          </div>
-
-          <!-- Услуги -->
-          <div class="card">
-            <div class="card-header">
-              <h2 class="text-xl font-semibold">Услуги и удобства</h2>
-            </div>
-            <div class="card-body">
-              <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+          <section class="description-section">
+            <h2>Описание</h2>
+            <div class="description-content">
+              <p>{{ object.description }}</p>
+              
+              <!-- Особенности -->
+              <div v-if="object.features.length" class="features-grid">
                 <div 
-                  v-for="amenity in object?.amenities"
-                  :key="amenity"
-                  class="flex items-center gap-2"
+                  v-for="feature in object.features" 
+                  :key="feature"
+                  class="feature-item"
                 >
-                  <span class="w-2 h-2 bg-primary-500 rounded-full"></span>
-                  <span>{{ getAmenityLabel(amenity) }}</span>
+                  ✅ {{ feature }}
                 </div>
               </div>
             </div>
-          </div>
+          </section>
+
+          <!-- Детали объекта -->
+          <section class="details-section">
+            <h2>Детали</h2>
+            <div class="details-grid">
+              <div class="detail-item" v-if="object.seasonality">
+                <span class="detail-label">Сезонность:</span>
+                <span class="detail-value">{{ object.seasonality }}</span>
+              </div>
+              <div class="detail-item" v-if="object.duration">
+                <span class="detail-label">Продолжительность:</span>
+                <span class="detail-value">{{ object.duration }}</span>
+              </div>
+              <div class="detail-item" v-if="object.capacity">
+                <span class="detail-label">Вместимость:</span>
+                <span class="detail-value">{{ object.capacity }}</span>
+              </div>
+              <div class="detail-item" v-if="object.difficulty">
+                <span class="detail-label">Сложность:</span>
+                <span class="detail-value">{{ object.difficulty }}</span>
+              </div>
+              <div class="detail-item" v-if="object.ageRestriction">
+                <span class="detail-label">Возрастные ограничения:</span>
+                <span class="detail-value">{{ object.ageRestriction }}</span>
+              </div>
+            </div>
+          </section>
+
+          <!-- Услуги и удобства -->
+          <section v-if="object.amenities.length" class="amenities-section">
+            <h2>Услуги и удобства</h2>
+            <div class="amenities-grid">
+              <div 
+                v-for="amenity in object.amenities" 
+                :key="amenity"
+                class="amenity-item"
+              >
+                {{ amenity }}
+              </div>
+            </div>
+          </section>
+
+          <!-- Для туров: программа -->
+          <section v-if="object.type === 'tour' && object.itinerary" class="itinerary-section">
+            <h2>Программа тура</h2>
+            <div class="itinerary">
+              <div 
+                v-for="(day, index) in object.itinerary" 
+                :key="index"
+                class="itinerary-day"
+              >
+                <h3>День {{ index + 1 }}</h3>
+                <div class="day-activities">
+                  <div 
+                    v-for="activity in day.activities" 
+                    :key="activity.time"
+                    class="activity"
+                  >
+                    <span class="activity-time">{{ activity.time }}</span>
+                    <span class="activity-description">{{ activity.description }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Карта -->
+          <section class="map-section">
+            <h2>Расположение</h2>
+            <div class="map-container">
+              <div class="map-placeholder">
+                🗺️ Карта: {{ object.location.address }}
+                <br>
+                <small>Координаты: {{ object.location.coordinates.lat }}, {{ object.location.coordinates.lng }}</small>
+              </div>
+              <div class="location-details">
+                <h4>Как добраться</h4>
+                <p>{{ object.location.howToGet }}</p>
+              </div>
+            </div>
+          </section>
+
+          <!-- Отзывы -->
+          <section class="reviews-section">
+            <div class="reviews-header">
+              <h2>Отзывы</h2>
+              <button class="btn btn-primary" @click="openReviewModal">
+                Написать отзыв
+              </button>
+            </div>
+            
+            <div class="reviews-summary">
+              <div class="rating-overview">
+                <div class="average-rating">
+                  <span class="rating-number">{{ object.rating }}</span>
+                  <div class="rating-stars">
+                    <span v-for="n in 5" :key="n" class="star">⭐</span>
+                  </div>
+                  <span class="reviews-count">{{ object.reviewsCount }} отзывов</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="reviews-list">
+              <div 
+                v-for="review in object.reviews" 
+                :key="review.id"
+                class="review-card"
+              >
+                <div class="review-header">
+                  <div class="reviewer-info">
+                    <div class="reviewer-avatar">
+                      {{ review.author.name.charAt(0) }}
+                    </div>
+                    <div class="reviewer-details">
+                      <div class="reviewer-name">{{ review.author.name }}</div>
+                      <div class="review-date">{{ formatDate(review.date) }}</div>
+                    </div>
+                  </div>
+                  <div class="review-rating">
+                    ⭐ {{ review.rating }}
+                  </div>
+                </div>
+                <div class="review-content">
+                  <p>{{ review.text }}</p>
+                </div>
+              </div>
+            </div>
+          </section>
         </div>
 
-        <!-- Правая колонка - информация и контакты -->
-        <div class="space-y-6">
-          <!-- Карточка цены и бронирования -->
-          <div class="card sticky top-24">
-            <div class="card-body">
-              <div class="text-3xl font-bold text-primary-600 mb-2">
-                {{ formatPrice(object?.price || 0) }}
-                <span class="text-sm font-normal text-gray-500">
-                  {{ getPriceUnitLabel(object?.priceUnit || '') }}
+        <!-- Боковая панель -->
+        <div class="object-sidebar">
+          <!-- Бронирование/Цены -->
+          <div class="booking-card">
+            <div class="price-section">
+              <div class="price" v-if="object.price">
+                <span class="current-price">{{ formatPrice(object.price) }}</span>
+                <span v-if="object.oldPrice" class="old-price">
+                  {{ formatPrice(object.oldPrice) }}
                 </span>
               </div>
-              
-              <div class="space-y-4 mt-6">
-                <button class="btn btn-primary w-full">
-                  📞 Связаться
-                </button>
-                <button class="btn btn-outline w-full">
-                  📍 Показать на карте
-                </button>
+              <div v-else class="price-contact">
+                Цена по запросу
+              </div>
+            </div>
+
+            <div class="booking-actions">
+              <button class="btn btn-primary btn-large" @click="openBookingModal">
+                🗓️ Забронировать
+              </button>
+              <button class="btn btn-outline" @click="openContactModal">
+                📞 Связаться
+              </button>
+            </div>
+
+            <!-- Контактная информация -->
+            <div class="contact-info">
+              <div class="contact-item" v-if="object.contact.phone">
+                <span class="contact-icon">📞</span>
+                <a :href="`tel:${object.contact.phone}`">{{ object.contact.phone }}</a>
+              </div>
+              <div class="contact-item" v-if="object.contact.email">
+                <span class="contact-icon">📧</span>
+                <a :href="`mailto:${object.contact.email}`">{{ object.contact.email }}</a>
+              </div>
+              <div class="contact-item" v-if="object.contact.website">
+                <span class="contact-icon">🌐</span>
+                <a :href="object.contact.website" target="_blank">Сайт</a>
+              </div>
+              <div class="contact-item" v-if="object.contact.social">
+                <span class="contact-icon">💬</span>
+                <a :href="object.contact.social" target="_blank">Соцсети</a>
+              </div>
+            </div>
+
+            <!-- Владелец -->
+            <div class="owner-info">
+              <div class="owner-avatar">
+                {{ object.owner.name.charAt(0) }}
+              </div>
+              <div class="owner-details">
+                <div class="owner-name">{{ object.owner.name }}</div>
+                <div class="owner-rating">
+                  ⭐ {{ object.owner.rating }} ({{ object.owner.reviewsCount }} отзывов)
+                </div>
               </div>
             </div>
           </div>
 
-          <!-- Контактная информация -->
-          <div class="card">
-            <div class="card-header">
-              <h3 class="font-semibold">Контактная информация</h3>
-            </div>
-            <div class="card-body space-y-3">
-              <div class="flex items-center gap-3">
-                <span class="text-gray-400">📧</span>
-                <a 
-                  :href="`mailto:${object?.contactEmail}`"
-                  class="text-primary-600 hover:underline"
-                >
-                  {{ object?.contactEmail }}
-                </a>
-              </div>
-              <div class="flex items-center gap-3">
-                <span class="text-gray-400">📞</span>
-                <a 
-                  :href="`tel:${object?.contactPhone}`"
-                  class="text-primary-600 hover:underline"
-                >
-                  {{ object?.contactPhone }}
-                </a>
-              </div>
+          <!-- Похожие объекты -->
+          <div class="similar-objects">
+            <h3>Похожие объекты</h3>
+            <div class="similar-list">
               <div 
-                v-if="object?.website"
-                class="flex items-center gap-3"
+                v-for="similar in similarObjects" 
+                :key="similar.id"
+                class="similar-item"
               >
-                <span class="text-gray-400">🌐</span>
-                <a 
-                  :href="object.website"
-                  target="_blank"
-                  class="text-primary-600 hover:underline"
-                >
-                  {{ object.website }}
-                </a>
-              </div>
-              <div class="flex items-center gap-3">
-                <span class="text-gray-400">📍</span>
-                <span>{{ object?.address }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Информация о владельце -->
-          <div class="card">
-            <div class="card-header">
-              <h3 class="font-semibold">О владельце</h3>
-            </div>
-            <div class="card-body">
-              <div class="flex items-center gap-3">
-                <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
-                  <span class="text-primary-600 font-semibold">
-                    {{ getInitials(object?.userId === 1 ? 'Иван Иванов' : 'Владелец') }}
-                  </span>
-                </div>
-                <div>
-                  <div class="font-medium">
-                    {{ object?.userId === 1 ? 'Иван Иванов' : 'Владелец объекта' }}
+                <NuxtLink :to="`/objects/${similar.id}`" class="similar-link">
+                  <img :src="similar.image" :alt="similar.title" class="similar-image">
+                  <div class="similar-info">
+                    <div class="similar-title">{{ similar.title }}</div>
+                    <div class="similar-price">{{ formatPrice(similar.price) }}</div>
                   </div>
-                  <div class="text-sm text-gray-600">На сайте с 2024</div>
-                </div>
+                </NuxtLink>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Модальные окна -->
+    <GalleryModal 
+      v-if="showGallery"
+      :images="object.images"
+      :initial-index="currentImageIndex"
+      @close="closeGallery"
+    />
+
+    <BookingModal 
+      v-if="showBookingModal"
+      :object="object"
+      @close="closeBookingModal"
+      @submit="handleBooking"
+    />
+
+    <ContactModal 
+      v-if="showContactModal"
+      :object="object"
+      @close="closeContactModal"
+      @submit="handleContact"
+    />
+
+    <ReviewModal 
+      v-if="showReviewModal"
+      @close="closeReviewModal"
+      @submit="handleReview"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ObjectItem } from '~/composables/useObjects'
+// Типы данных
+interface Location {
+  address: string;
+  coordinates: {
+    lat: number;
+    lng: number;
+  };
+  distance?: string;
+  howToGet: string;
+}
 
-const route = useRoute()
-const { isAuthenticated } = useAuth()
-const { fetchObjectById, deleteObject } = useObjects()
+interface Contact {
+  phone?: string;
+  email?: string;
+  website?: string;
+  social?: string;
+}
 
-const object = ref<ObjectItem | null>(null)
-const loading = ref(true)
-const currentImage = ref('')
+interface Owner {
+  name: string;
+  rating: number;
+  reviewsCount: number;
+}
 
-// Проверяем, является ли текущий пользователь владельцем
-const isOwner = computed(() => {
-  return isAuthenticated && object.value?.userId === 1 // В реальном приложении сравниваем с ID текущего пользователя
-})
+interface Review {
+  id: string;
+  author: {
+    name: string;
+  };
+  rating: number;
+  text: string;
+  date: string;
+}
 
-onMounted(async () => {
-  const objectId = parseInt(route.params.id as string)
-  if (objectId) {
-    const result = await fetchObjectById(objectId)
-    object.value = result
-    if (result?.images?.[0]) {
-      currentImage.value = result.images[0]
+interface Activity {
+  time: string;
+  description: string;
+}
+
+interface TourItinerary {
+  activities: Activity[];
+}
+
+// Props
+const route = useRoute();
+const objectId = route.params.id as string;
+
+// Состояние
+const isFavorite = ref(false);
+const showGallery = ref(false);
+const showBookingModal = ref(false);
+const showContactModal = ref(false);
+const showReviewModal = ref(false);
+const currentImageIndex = ref(0);
+
+// Данные объекта (в реальном приложении будут загружаться из API)
+const object = ref({
+  id: objectId,
+  title: 'Тур по Южному Уралу: горные озера и пещеры',
+  type: 'tour',
+  category: 'active_tourism',
+  description: 'Уникальный 3-дневный тур по самым живописным местам Южного Урала. Посетим горные озера, древние пещеры и насладимся природой Башкортостана.',
+  
+  // Изображения
+  images: [
+    '/images/tours/ural-1.jpg',
+    '/images/tours/ural-2.jpg',
+    '/images/tours/ural-3.jpg',
+    '/images/tours/ural-4.jpg',
+    '/images/tours/ural-5.jpg'
+  ],
+  
+  // Рейтинг и отзывы
+  rating: 4.8,
+  reviewsCount: 24,
+  
+  // Локация
+  location: {
+    address: 'Белорецкий район, Республика Башкортостан',
+    coordinates: {
+      lat: 53.893009,
+      lng: 58.258759
+    },
+    distance: '250 км',
+    howToGet: 'На автомобиле по трассе М5 до Белорецка, далее по указателям. Или трансфер из Уфы.'
+  },
+  
+  // Цены
+  price: 12500,
+  oldPrice: 15000,
+  
+  // Контактная информация
+  contact: {
+    phone: '+7 (917) 123-45-67',
+    email: 'tour@bashkiria-tours.ru',
+    website: 'https://bashkiria-tours.ru',
+    social: 'https://vk.com/bashkiria_tours'
+  },
+  
+  // Владелец
+  owner: {
+    name: 'Александр Петров',
+    rating: 4.9,
+    reviewsCount: 47
+  },
+  
+  // Особенности
+  features: [
+    'Профессиональный гид',
+    'Трансфер из Уфы',
+    'Питание включено',
+    'Снаряжение предоставляется',
+    'Фотосъемка'
+  ],
+  
+  // Детали
+  seasonality: 'Круглый год',
+  duration: '3 дня / 2 ночи',
+  capacity: 'До 12 человек',
+  difficulty: 'Средняя',
+  ageRestriction: '12+',
+  
+  // Удобства
+  amenities: [
+    'Трансфер',
+    'Проживание',
+    'Питание',
+    'Гид',
+    'Страховка',
+    'Снаряжение'
+  ],
+  
+  // Программа тура (только для туров)
+  itinerary: [
+    {
+      activities: [
+        { time: '08:00', description: 'Сбор группы в Уфе' },
+        { time: '08:30', description: 'Выезд в Белорецкий район' },
+        { time: '12:00', description: 'Прибытие, размещение в гостевом доме' },
+        { time: '13:00', description: 'Обед' },
+        { time: '14:00', description: 'Экскурсия к озеру Банное' },
+        { time: '19:00', description: 'Ужин, отдых' }
+      ]
+    },
+    {
+      activities: [
+        { time: '08:00', description: 'Завтрак' },
+        { time: '09:00', description: 'Поход к пещере Сказка' },
+        { time: '13:00', description: 'Обед на природе' },
+        { time: '14:00', description: 'Восхождение на гору Ямантау' },
+        { time: '19:00', description: 'Возвращение, ужин' }
+      ]
     }
-  }
-  loading.value = false
-})
+  ],
+  
+  // Отзывы
+  reviews: [
+    {
+      id: '1',
+      author: { name: 'Мария Иванова' },
+      rating: 5,
+      text: 'Прекрасный тур! Организация на высшем уровне. Гид Александр - профессионал своего дела. Природа Башкортостана восхищает!',
+      date: '2024-01-15'
+    },
+    {
+      id: '2',
+      author: { name: 'Сергей Козлов' },
+      rating: 4,
+      text: 'Хороший маршрут, красивые места. Немного утомительно для неподготовленных, но вполне преодолимо. Рекомендую!',
+      date: '2024-01-10'
+    }
+  ]
+});
 
-const getTypeLabel = (type: string) => {
-  const types: Record<string, string> = {
-    hotel: 'Отель',
-    apartment: 'Апартаменты',
-    villa: 'Вилла',
-    camping: 'Кемпинг',
-    restaurant: 'Ресторан',
-    attraction: 'Достопримечательность'
+// Похожие объекты
+const similarObjects = ref([
+  {
+    id: '2',
+    title: 'Сплавы по реке Белая',
+    image: '/images/tours/river-1.jpg',
+    price: 8500,
+    category: 'active_tourism'
+  },
+  {
+    id: '3',
+    title: 'Конный тур по предгорьям Урала',
+    image: '/images/tours/horse-1.jpg',
+    price: 9200,
+    category: 'active_tourism'
+  },
+  {
+    id: '4',
+    title: 'Зимний поход на хребет Иремель',
+    image: '/images/tours/winter-1.jpg',
+    price: 11000,
+    category: 'active_tourism'
   }
-  return types[type] || type
-}
+]);
 
-const getAmenityLabel = (amenity: string) => {
-  const amenities: Record<string, string> = {
-    wifi: 'Wi-Fi',
-    parking: 'Парковка',
-    breakfast: 'Завтрак',
-    pool: 'Бассейн',
-    spa: 'СПА',
-    kitchen: 'Кухня',
-    washing_machine: 'Стиральная машина',
-    air_conditioning: 'Кондиционер',
-    heating: 'Отопление',
-    gym: 'Тренажерный зал',
-    tv: 'Телевизор',
-    elevator: 'Лифт'
-  }
-  return amenities[amenity] || amenity
-}
+// Вычисляемые свойства
+const categoryName = computed(() => {
+  const categories: Record<string, string> = {
+    'hotel': 'Гостиница',
+    'sanatorium': 'Санаторий',
+    'guest_house': 'Гостевой дом',
+    'camping': 'Кемпинг',
+    'active_tourism': 'Активный туризм',
+    'excursion': 'Экскурсия',
+    'restaurant': 'Ресторан',
+    'museum': 'Музей',
+    'natural_sight': 'Природная достопримечательность',
+    'tour': 'Тур'
+  };
+  return categories[object.value.category] || 'Объект';
+});
 
-const getPriceUnitLabel = (unit: string) => {
-  const units: Record<string, string> = {
-    per_night: '/ночь',
-    per_person: '/человека',
-    fixed: ''
+// Методы
+const openGallery = (index: number) => {
+  currentImageIndex.value = index;
+  showGallery.value = true;
+};
+
+const closeGallery = () => {
+  showGallery.value = false;
+};
+
+const openBookingModal = () => {
+  showBookingModal.value = true;
+};
+
+const closeBookingModal = () => {
+  showBookingModal.value = false;
+};
+
+const openContactModal = () => {
+  showContactModal.value = true;
+};
+
+const closeContactModal = () => {
+  showContactModal.value = false;
+};
+
+const openReviewModal = () => {
+  showReviewModal.value = true;
+};
+
+const closeReviewModal = () => {
+  showReviewModal.value = false;
+};
+
+const addToFavorites = () => {
+  isFavorite.value = !isFavorite.value;
+  // В реальном приложении здесь будет запрос к API
+};
+
+const shareObject = () => {
+  if (navigator.share) {
+    navigator.share({
+      title: object.value.title,
+      text: object.value.description,
+      url: window.location.href
+    });
+  } else {
+    // Fallback для браузеров без поддержки Web Share API
+    navigator.clipboard.writeText(window.location.href);
+    alert('Ссылка скопирована в буфер обмена');
   }
-  return units[unit] || unit
-}
+};
+
+const showOnMap = () => {
+  const { lat, lng } = object.value.location.coordinates;
+  window.open(`https://yandex.ru/maps/?pt=${lng},${lat}&z=15&l=map`, '_blank');
+};
+
+const reportProblem = () => {
+  // Логика сообщения о проблеме
+  alert('Форма сообщения о проблеме будет открыта');
+};
 
 const formatPrice = (price: number) => {
-  return new Intl.NumberFormat('ru-RU').format(price) + ' ₽'
+  return new Intl.NumberFormat('ru-RU', {
+    style: 'currency',
+    currency: 'RUB',
+    minimumFractionDigits: 0
+  }).format(price);
+};
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('ru-RU');
+};
+
+const handleBooking = (bookingData: any) => {
+  console.log('Бронирование:', bookingData);
+  // Логика обработки бронирования
+  closeBookingModal();
+};
+
+const handleContact = (contactData: any) => {
+  console.log('Контакт:', contactData);
+  // Логика обработки контакта
+  closeContactModal();
+};
+
+const handleReview = (reviewData: any) => {
+  console.log('Отзыв:', reviewData);
+  // Логика обработки отзыва
+  closeReviewModal();
+};
+</script>
+
+<style scoped>
+.object-page {
+  min-height: 100vh;
+  background: var(--bg-primary);
 }
 
-const getInitials = (name: string) => {
-  return name.split(' ').map(n => n[0]).join('').toUpperCase()
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 
-const handleDelete = async () => {
-  if (!object.value) return
+/* Хлебные крошки */
+.breadcrumbs {
+  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.breadcrumbs a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  color: var(--primary-600);
+}
+
+.breadcrumbs .separator {
+  opacity: 0.5;
+}
+
+.breadcrumbs .current {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* Галерея */
+.gallery-section {
+  background: var(--bg-secondary);
+  padding: 2rem 0;
+}
+
+.gallery-main {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1rem;
+  height: 400px;
+}
+
+.main-image {
+  position: relative;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.main-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.gallery-toggle {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.thumbnail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.thumbnail {
+  position: relative;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  cursor: pointer;
+  height: calc(50% - 0.5rem);
+}
+
+.thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.more-images {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+/* Основной лейаут */
+.object-layout {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2rem;
+  padding: 2rem 0;
+}
+
+/* Заголовок объекта */
+.object-header {
+  margin-bottom: 2rem;
+}
+
+.object-meta {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.object-category {
+  background: var(--primary-100);
+  color: var(--primary-700);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+}
+
+.object-rating {
+  color: var(--text-secondary);
+}
+
+.object-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+}
+
+.object-location {
+  color: var(--text-secondary);
+  font-size: 1.125rem;
+}
+
+.distance {
+  opacity: 0.8;
+}
+
+/* Быстрые действия */
+.quick-actions {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+/* Секции */
+section {
+  margin-bottom: 3rem;
+}
+
+section h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+/* Особенности */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.feature-item {
+  padding: 0.5rem;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+}
+
+/* Детали */
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+}
+
+.detail-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.detail-value {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+/* Удобства */
+.amenities-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 0.75rem;
+}
+
+.amenity-item {
+  padding: 0.75rem;
+  background: var(--primary-50);
+  border: 1px solid var(--primary-100);
+  border-radius: var(--radius-md);
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Программа тура */
+.itinerary {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.itinerary-day {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+}
+
+.itinerary-day h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  color: var(--primary-600);
+}
+
+.day-activities {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.activity {
+  display: flex;
+  gap: 1rem;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+}
+
+.activity-time {
+  font-weight: 600;
+  color: var(--primary-600);
+  min-width: 60px;
+}
+
+.activity-description {
+  color: var(--text-primary);
+}
+
+/* Карта */
+.map-container {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.map-placeholder {
+  height: 300px;
+  background: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.location-details {
+  padding: 1.5rem;
+  background: var(--bg-primary);
+}
+
+.location-details h4 {
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+/* Отзывы */
+.reviews-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.reviews-summary {
+  background: var(--bg-secondary);
+  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  margin-bottom: 2rem;
+}
+
+.average-rating {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rating-number {
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: var(--primary-600);
+}
+
+.rating-stars {
+  display: flex;
+}
+
+.reviews-count {
+  color: var(--text-secondary);
+}
+
+.reviews-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.review-card {
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+}
+
+.review-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.reviewer-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.reviewer-avatar {
+  width: 3rem;
+  height: 3rem;
+  background: var(--primary-100);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: var(--primary-600);
+}
+
+.reviewer-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.reviewer-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.review-date {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.review-rating {
+  background: var(--primary-100);
+  color: var(--primary-700);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+}
+
+.review-content p {
+  color: var(--text-primary);
+  line-height: 1.6;
+}
+
+/* Боковая панель */
+.object-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.booking-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  position: sticky;
+  top: 2rem;
+}
+
+.price-section {
+  margin-bottom: 1.5rem;
+}
+
+.current-price {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--primary-600);
+}
+
+.old-price {
+  font-size: 1.25rem;
+  color: var(--text-tertiary);
+  text-decoration: line-through;
+  margin-left: 0.5rem;
+}
+
+.price-contact {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.booking-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.btn-large {
+  padding: 1rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.contact-item a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.contact-item a:hover {
+  color: var(--primary-600);
+}
+
+.owner-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.owner-avatar {
+  width: 3rem;
+  height: 3rem;
+  background: var(--primary-100);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: var(--primary-600);
+}
+
+.owner-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.owner-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.owner-rating {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Похожие объекты */
+.similar-objects {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+}
+
+.similar-objects h3 {
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.similar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.similar-item {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.similar-item:hover {
+  border-color: var(--primary-300);
+  transform: translateY(-2px);
+}
+
+.similar-link {
+  display: flex;
+  text-decoration: none;
+  color: inherit;
+}
+
+.similar-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+}
+
+.similar-info {
+  padding: 0.75rem;
+  flex: 1;
+}
+
+.similar-title {
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary);
+}
+
+.similar-price {
+  color: var(--primary-600);
+  font-weight: 600;
+}
+
+/* Адаптивность */
+@media (max-width: 968px) {
+  .object-layout {
+    grid-template-columns: 1fr;
+  }
   
-  if (confirm('Вы уверены, что хотите удалить этот объект? Это действие нельзя отменить.')) {
-    try {
-      await deleteObject(object.value.id)
-      alert('Объект успешно удален')
-      await navigateTo('/objects/my-objects')
-    } catch (error) {
-      console.error('Error deleting object:', error)
-      alert('Ошибка при удалении объекта')
-    }
+  .gallery-main {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .thumbnail-grid {
+    grid-template-columns: repeat(4, 1fr);
+    height: 100px;
+  }
+  
+  .quick-actions {
+    justify-content: center;
   }
 }
-</script>
\ No newline at end of file
+
+@media (max-width: 768px) {
+  .object-title {
+    font-size: 1.5rem;
+  }
+  
+  .gallery-main {
+    grid-template-columns: 1fr;
+  }
+  
+  .thumbnail-grid {
+    grid-template-columns: repeat(2, 1fr);
+    height: 150px;
+  }
+  
+  .features-grid,
+  .details-grid,
+  .amenities-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .reviews-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 0.5rem;
+  }
+  
+  .gallery-section {
+    padding: 1rem 0;
+  }
+  
+  .object-layout {
+    padding: 1rem 0;
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+  }
+  
+  .booking-actions {
+    flex-direction: column;
+  }
+}
+</style>
\ No newline at end of file