<template>
    <div class="flex items-center justify-start gap-10 mt-16">
            <Icon @click="router.push('/')" name="gg:arrow-left-o" style="color: black" size="44" class="cursor-pointer"/>
            <h1 class="text-3xl font-bold uppercase">listes des réceptions finie</h1>
    </div>

    <div class="px-[86px]">
        <div class="mt-6 border border-slate-200 mb-16 ">
            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
                <div>Numéro</div>
                <div>Date</div>
                <div>Fournisseur</div>
                <div>Adresse</div>
                <div>Type réception</div>
                <div>Poids</div>
            </div>
            <div
                v-for="reception in receptionList"
                :key="reception.id"
                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
                role="button"
                tabindex="0"
                @click="goToReception(reception.id)"
            >
                <div>{{ reception.identificationNumber}}</div>
                <div>{{ reception.receptionDate}}</div>
                <div>{{ reception.supplier?.name }}</div>
                <div>{{ reception.address?.fullAddress }}</div>
                <div>{{ reception.receptionType?.label }}</div>
                <div>Plein : {{ formatWeighing(reception, 'gross') }} <br> Vide : {{ formatWeighing(reception, 'tare') }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {ReceptionData} from "~/services/dto/reception-data";
import {getReceptionList} from "~/services/reception";

const receptionList = ref<ReceptionData[]>()
const router = useRouter()

const formatWeighing = (reception: ReceptionData, type: 'gross' | 'tare') => {
    const entry = reception.weights?.find((weight) => weight.type === type)
    if (!entry || entry.weight == null || entry.dsd == null) {
        return '—'
    }
    return `${entry.weight} kg`
}

const goToReception = (id: number) => {
    router.push(`/reception/update/${id}`)
}

onMounted(async () => {
    receptionList.value = await getReceptionList(true)
})
</script>
