96 lines
3.7 KiB
TypeScript
96 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import { useQuery } from "@apollo/client";
|
||
import { PARTS_INDEX_SEARCH_BY_ARTICLE } from "@/lib/graphql";
|
||
|
||
interface ProductCharacteristicsProps {
|
||
result?: any;
|
||
}
|
||
|
||
const ProductCharacteristics = ({ result }: ProductCharacteristicsProps) => {
|
||
const [partsIndexData, setPartsIndexData] = useState<any>(null);
|
||
|
||
// Запрос к Parts Index для получения дополнительных характеристик
|
||
const { data: partsIndexResult, loading: partsIndexLoading } = useQuery(PARTS_INDEX_SEARCH_BY_ARTICLE, {
|
||
variables: {
|
||
articleNumber: result?.articleNumber || '',
|
||
brandName: result?.brand || '',
|
||
lang: 'ru'
|
||
},
|
||
skip: !result?.articleNumber || !result?.brand,
|
||
errorPolicy: 'ignore'
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (partsIndexResult?.partsIndexSearchByArticle) {
|
||
setPartsIndexData(partsIndexResult.partsIndexSearchByArticle);
|
||
}
|
||
}, [partsIndexResult]);
|
||
|
||
// Функция для рендеринга параметров из Parts Index
|
||
const renderPartsIndexParameters = () => {
|
||
if (!partsIndexData?.parameters) return null;
|
||
|
||
return partsIndexData.parameters.map((paramGroup: any, groupIndex: number) => (
|
||
<div key={groupIndex} className="w-layout-vflex flex-block-53">
|
||
{paramGroup.params?.map((param: any, paramIndex: number) => (
|
||
<div key={paramIndex} className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">{param.title}:</span>
|
||
<span className="text-block-28">
|
||
{param.values?.map((value: any) => value.value).join(', ') || 'Нет данных'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
));
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="w-layout-hflex flex-block-52">
|
||
{result && (
|
||
<>
|
||
<div className="w-layout-vflex flex-block-53">
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Бренд:</span>
|
||
<span className="text-block-28">{result.brand}</span>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Артикул:</span>
|
||
<span className="text-block-28">{result.articleNumber}</span>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Название:</span>
|
||
<span className="text-block-28">{result.name}</span>
|
||
</div>
|
||
{partsIndexData?.originalName && (
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Оригинальное название:</span>
|
||
<span className="text-block-28">{partsIndexData.originalName}</span>
|
||
</div>
|
||
)}
|
||
{partsIndexData?.description && (
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Описание:</span>
|
||
<span className="text-block-28">{partsIndexData.description}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Дополнительные характеристики из Parts Index */}
|
||
{partsIndexLoading ? (
|
||
<div className="w-layout-vflex flex-block-53">
|
||
<div className="w-layout-hflex flex-block-55">
|
||
<span className="text-block-29">Загрузка характеристик...</span>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
renderPartsIndexParameters()
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ProductCharacteristics;
|