<template>
    <div v-if="item" class="p-4">
        <h3 class="text-xl font-bold mb-2">{{ item.name }}</h3>
        <p>Количество элементов: {{ item.elements_count }}</p>
        <p>Количество гибов: {{ item.bends_count }}</p>

        <!-- Имя -->
        <TableItem caption="По названию:" :items="item.statistics.Name" label-key="Название" label-value="Количество" />

        <!-- Материал -->
        <TableItem caption="По материалу:" :items="item.statistics.Material" label-key="Материал"
            label-value="Количество" />

        <!-- Площадь -->
        <TableItem caption="Площадь материалов:" :items="item.statistics.Area" label-key="Материал"
            label-value="Площадь (м²)" />

        <!-- Сварки -->
        <TableItem caption="Сварные швы:" :items="item.statistics.Welding" label-key="Имя сварки"
            label-value="Длина (мм)" />
    </div>
</template>

<script setup>

defineProps({
    item: {
        type: Object,
        required: true
    }
})
</script>