precents

src/reprocess/ReprocessResultTable.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { iskFormater, percentFormater } from '@/formaters';
+import { computed } from 'vue';
+import { ReprocessItemValues } from './reprocess';
+
+interface Props {
+    result?: ReprocessItemValues[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    result: () => []
+});
+
+const computedResult = computed(() => props.result.map(r =>({
+    ...r,
+    buy_ratio: (r.buy_reprocess / r.buy) - 1,
+    sell_ratio: (r.sell_reprocess / r.sell) - 1
+})))
+</script>
+
+<template>
+    <table class="table-auto border-collapse border w-full">
+        <thead>
+            <tr>
+                <th class="border bg-slate-200">Item</th>
+                <th class="border bg-slate-200">Buy</th>
+                <th class="border bg-slate-200">Buy reprocess</th>
+                <th class="border bg-slate-200">Sell</th>
+                <th class="border bg-slate-200">Sell reprocess</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-green-200': r.buy_reprocess >= r.sell}">
+                <td class="border px-1">{{ r.typeID }}</td>
+                <td class="border text-right px-1">{{ iskFormater.format(r.buy) }}</td>
+                <td class="border text-right px-1">{{ iskFormater.format(r.buy_reprocess) }} ({{percentFormater.format(r.buy_ratio)}})</td>
+                <td class="border text-right px-1">{{ iskFormater.format(r.sell) }}</td>
+                <td class="border text-right px-1">{{ iskFormater.format(r.sell_reprocess) }} ({{percentFormater.format(r.sell_ratio)}})</td>
+            </tr>
+        </tbody>
+    </table>
+</template>@/formaters