<script setup lang="ts">
const isOrg = ref(true)
const data = ref([] as RootObject[])
data.value = await apiCall<RootObject[]>(`stat/?type=location`, 'get')

interface RootObject {
    location: Location | Location[];
    inv_count: number;
    tmc: Tmc[];
}
interface Tmc {
    tmc__name: string;
    count: number;
}
interface Location {
    id: number;
    name: string;
}

const getData = async () => {
    isOrg.value = !isOrg.value
    data.value = []
    data.value = await apiCall<RootObject[]>(`stat/${isOrg.value == true ? '?type=location' : ''}`, 'get')
}
</script>
<template>
    <div class="grid grid-cols-12 gap-4">
        <div class="col-span-12 page-header">
            <h1>Результаты инвентаризации</h1>
        </div>
        <div class="col-span-12">
            <UButtonGroup>
                <UButton :disabled="isOrg" @click="getData">По организациям</UButton>
                <UButton :disabled="!isOrg" @click="getData">По продуктам</UButton>
            </UButtonGroup>
        </div>
        <UCard v-for="item in data" class="col-span-4" v-if="data && isOrg">
            <template #header>
                {{ item.location.name }} <UBadge>{{ item.inv_count }}</UBadge>
            </template>
            <UTable :rows="item.tmc" />
        </UCard>
        <UCard v-for="item in data" class="col-span-6" v-if="data && !isOrg">
            <template #header>
                <template v-for="el in item.tmc">
                    {{ el.tmc__name }}, всего {{ el.count }}
                </template>
                <UBadge>{{ item.inv_count }}</UBadge>
            </template>
            <UTable :rows="item.location" />
        </UCard>
    </div>
</template>