<template>
    <NuxtLayout :name="device" :config="config">
        <main class="seller-orders">
            <aside v-if="device == 'desktop'">
                <PanelSellerProfile />
                <PanelSellerScore />
            </aside>
            <ul>
                <li v-for="(order, i) in orders" :key="i">
                    <PanelSellerOrder :data="order" />
                </li>
                <li v-if="orders.length < 1">
                    <p>{{ $t('notFound') }}</p>
                </li>
            </ul>
        </main>
    </NuxtLayout>
</template>

<script setup>
const { device, t } = inject('service')
const config = reactive({
    desktop: { toolbar: true, seller: true },
    mobile: { header: { back: true, toolbar: true, title: t('userPanel') } },
})

const { meta, query } = useRoute()

const orders = ref([])

const { status, data, error } = await useFetch('/api/shop/orders', {
    headers: {
        Authorization: useCookie('token')
    }
})

if (status.value == 'success') {
    orders.value = data.value.shop.pendingProducts
    provide('data', data.value)
}
else throw createError(error.value)
</script>

<style lang="scss">
.seller-orders {
    @apply container flex pt-[1.9rem] pb-20 lg:pt-14 max-lg:px-6 gap-6;

    &>aside {
        @apply flex flex-col gap-3 lg:gap-5;
    }

    &>ul {
        @apply w-full flex flex-col gap-3 lg:gap-2.5;
    }
}
</style>