<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnPaginate from 'components/ui/VnPaginate.vue';
import CardList from 'components/ui/CardList.vue';
import VnLv from 'components/ui/VnLv.vue';
import ParkingFilter from './ParkingFilter.vue';
import ParkingSummary from './Card/ParkingSummary.vue';
import VnSection from 'src/components/common/VnSection.vue';

const stateStore = useStateStore();
const { push } = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ParkingList';

onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false));

const filter = {
    fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
};

function exprBuilder(param, value) {
    switch (param) {
        case 'code':
            return { [param]: { like: `%${value}%` } };
        case 'sectorFk':
            return { [param]: value };
        case 'search':
            return { or: [{ code: { like: `%${value}%` } }, { id: value }] };
    }
}
</script>

<template>
    <VnSection
        :data-key="dataKey"
        prefix="parking"
        :array-data-props="{
            url: 'Parkings',
            order: ['code'],
            userFilter: filter,
            exprBuilder,
        }"
    >
        <template #advanced-menu>
            <ParkingFilter data-key="ParkingList" />
        </template>
        <template #body>
            <QPage class="column items-center q-pa-md">
                <div class="vn-card-list">
                    <VnPaginate :data-key="dataKey">
                        <template #body="{ rows }">
                            <CardList
                                v-for="row of rows"
                                :key="row.id"
                                :id="row.id"
                                :title="row.code"
                                @click="
                                    push({ path: `/shelving/parking/${row.id}/summary` })
                                "
                            >
                                <template #list-items>
                                    <VnLv
                                        label="Sector"
                                        :value="row.sector?.description"
                                    />
                                    <VnLv
                                        :label="t('parking.pickingOrder')"
                                        :value="row.pickingOrder"
                                    />
                                </template>
                                <template #actions>
                                    <QBtn
                                        :label="t('components.smartCard.openSummary')"
                                        @click.stop="viewSummary(row.id, ParkingSummary)"
                                        color="primary"
                                    />
                                </template>
                            </CardList>
                        </template>
                    </VnPaginate>
                </div>
            </QPage>
        </template>
    </VnSection>
</template>
