total in acquisition table

src/market/acquisition/AcquisitionResultTable.vue

@@ -120,12 +120,39 @@ const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() =>
 })
 const getLineColor = (result: Result) => {
     if (result.precentProfit >= (threshold.value / 100)) {
-        return 'line-green';
+        return 'line-green'; 
     } else if (result.precentProfit < 0) {
         return 'line-red';
     }
     return '';
 }
+const total = computed(() => {
+    if (sortedArray.value.length <= 1) {
+        return null;
+    }
+
+    const first = sortedArray.value[0];
+
+    if (!first) {
+        return null;
+    }
+
+    const sameItem = sortedArray.value.every(r => r.type.id === first.type.id);
+    const quantity = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.quantity, 0) : 0;
+    const totalRemaining = sameItem ? sortedArray.value.reduce((acc, r) => acc + r.remaining, 0) : 0;
+    const price = sortedArray.value.reduce((acc, r) => acc + r.price * r.remaining, 0) / totalRemaining;
+    const precentProfit = marketTaxStore.calculateProfit(price, first.sell);
+    const iskProfit = sortedArray.value.reduce((acc, r) => acc + r.iskProfit, 0);
+
+    return {
+        sameItem,
+        price,
+        remaining: totalRemaining,
+        quantity,
+        precentProfit,
+        iskProfit
+    };
+});
 </script>
 
 <template>
@@ -142,7 +169,7 @@ const getLineColor = (result: Result) => {
             </div>
         </div>
     </div>
-    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" :footerHeight="!!total ? 33 : 0" bottom="1rem">
         <template #default="{ list }">
             <thead>
                 <tr>
@@ -178,6 +205,31 @@ const getLineColor = (result: Result) => {
                     </td>
                 </tr>
             </tbody>
+            <tfoot v-if="!!total">
+                <tr>
+                    <td v-if="showColumn('name')">Total</td>
+                    <td v-if="showColumn('buy')" />
+                    <td v-if="showColumn('sell')" />
+                    <td v-if="showColumn('date')" />
+                    <td v-if="showColumn('price')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ formatIsk(total.price) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('remaining')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ total.remaining }}/{{ total.quantity }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('precentProfit')"  class="text-right">
+                        <template v-if="total.sameItem">
+                            {{ percentFormater.format(total.precentProfit) }}
+                        </template>
+                    </td>
+                    <td v-if="showColumn('iskProfit')"  class="text-right">{{ formatIsk(total.iskProfit) }}</td>
+                    <td v-if="showColumn('buttons')" />
+                </tr>
+            </tfoot>
         </template>
         <template #empty>
             <div class="text-center mt-4">