# Интеграция Parts Index API

## Описание

В проект добавлена интеграция с Parts Index API для отображения детальной информации о деталях, включая:
- Главную фотографию детали
- Штрих-коды
- Технические характеристики
- Категории
- Дополнительные изображения
- Логотип "powered by Parts Index"

## Реализованные компоненты

### 1. Типы (`src/types/partsindex.ts`)
- `PartsIndexEntityInfo` - информация о детали
- `PartsIndexEntityInfoResponse` - ответ API
- `PartsIndexEntityInfoVariables` - параметры запроса

### 2. Сервис (`src/lib/partsindex-service.ts`)
- `getEntityInfo(code, brand?, lang?)` - получение информации о детали

### 3. Хук (`src/hooks/usePartsIndex.ts`)
- `usePartsIndexEntityInfo(code, brand)` - хук для получения данных

### 4. Компонент (`src/components/PartsIndexCard.tsx`)
- Отображение карточки с информацией о детали
- Поддержка состояния загрузки
- Адаптивный дизайн

## Интеграция в страницу поиска

В файле `src/pages/search-result.tsx` добавлено:

```tsx
import PartsIndexCard from "@/components/PartsIndexCard";
import { usePartsIndexEntityInfo } from "@/hooks/usePartsIndex";

// В компоненте:
const { entityInfo, loading: partsIndexLoading } = usePartsIndexEntityInfo(
  searchQuery || null,
  brandQuery || null
);

// В JSX:
{partsIndexLoading && (
  <PartsIndexCard 
    entityInfo={null as any} 
    loading={true}
  />
)}
{entityInfo && !partsIndexLoading && (
  <PartsIndexCard 
    entityInfo={entityInfo} 
    loading={false}
  />
)}
```

## API Parts Index

### Endpoint
```
GET https://api.parts-index.com/v1/entities
```

### Параметры
- `code` (обязательный) - артикул детали
- `brand` (опциональный) - бренд
- `lang` (опциональный) - язык (по умолчанию 'ru')

### Заголовки
```
Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE
Accept: application/json
```

### Пример запроса
```bash
curl -H "Authorization: PI-E1C0ADB7-E4A8-4960-94A0-4D9C0A074DAE" \
     "https://api.parts-index.com/v1/entities?code=059198405B&brand=VAG&lang=ru"
```

## Тестирование

### URL для тестирования
```
http://localhost:3002/search-result?article=059198405B&brand=VAG
```

### Тестовая HTML страница
Создана страница `test-parts-index.html` для демонстрации работы API без React.

## Функциональность

1. **Автоматическая загрузка** - при переходе на страницу результатов поиска
2. **Главная фотография** - отображается первое изображение из массива
3. **Логотип Parts Index** - в правом верхнем углу карточки
4. **Характеристики** - первые 6 параметров из API
5. **Штрих-коды** - все доступные штрих-коды
6. **Дополнительные изображения** - до 4 дополнительных фото
7. **Обработка ошибок** - скрытие изображений при ошибке загрузки

## Стили

Компонент использует Tailwind CSS классы для стилизации:
- Адаптивная сетка для характеристик
- Скроллинг для дополнительных изображений
- Состояние загрузки с анимацией
- Обработка ошибок изображений

## Производительность

- Загрузка данных только при наличии артикула
- Кэширование на уровне React Query (через Apollo Client)
- Ленивая загрузка изображений
- Обработка ошибок сети