<template>
    <div>
        <div class="flex justify-between">
            <h1 class="font-bold text-4xl uppercase">Passeport du bovin</h1>
            <p v-if="bovinData">{{ bovinData.presencePeriod }}</p>
        </div>
        <div class="overflow-x-auto mt-12" v-if="bovinData">
            <table class="w-full border-collapse border border-black text-sm">
                <tr>
                    <th
                        rowspan="2"
                        class="w-10 border border-black p-0 align-middle"
                    >
                        <div class="flex h-full w-full items-center justify-center">
                          <span class="-rotate-90 whitespace-nowrap font-semibold tracking-widest">
                            VEAU
                          </span>
                        </div>
                    </th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">N° de travail</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">Sexe</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">Code Race</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">Code pays</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">Type de racial</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">Date de naissance</th>
                </tr>

                <tr>
                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.workNumber }}</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.sex }}</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.breedType }}</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">FR {{ bovinData.numeroNational }}</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">???</th>
                    <th class="border border-black px-4 py-3 text-center font-semibold">{{ bovinData.birthDate }}</th>
                </tr>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {getBovinData} from "~/services/identification-bovin";

const bovinData = ref<IdentificationBovinData|null>()

onMounted(async () => {
    bovinData.value = await getBovinData('7979580026');
})
</script>
