<template>
    <NuxtLayout :name="device" :config="config">
        <main class="seller-store">
            <aside>
                <PanelSellerProfile />
                <PanelSellerScore />
            </aside>
            <section>
                <div>
                    <PanelSellerMangement title="warehouse" />
                    <PanelSellerMangement title="orders" />
                    <img src="/images/sell.svg">
                </div>
                <PanelSellerUpcoming />
                <div>
                    <PanelSellerSales title="status" />
                    <PanelSellerSales title="number" />
                    <PanelSellerPieChart />
                </div>
                <PanelSellerBestSelling />
            </section>
        </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 { status, data, error } = await useFetch('/api/shop', {
    headers: {
        Authorization: useCookie('token')
    }
})

if (status.value == 'success') {
    provide('data', data.value)
}
else throw createError(error.value)


</script>

<style lang="scss">
.seller-store {
    @apply w-full container flex flex-col lg:flex-row pt-[1.9rem] pb-20 lg:pt-14 max-lg:px-6 gap-6 justify-center;

    aside {
        @apply flex max-lg:flex-wrap max-lg:justify-between lg:flex-col gap-3 lg:gap-5;
    }

    &>section {
        @apply flex flex-col gap-6 lg:gap-[1.9rem];

        &>div:nth-child(1) {
            @apply flex max-lg:flex-wrap gap-3 max-lg:justify-between lg:gap-6;

            img {
                @apply object-cover object-[0%_75%] w-[21.4rem] h-[18.1rem] lg:w-[18.3rem] lg:h-[25.2rem] rounded-[0.6rem];
                @apply max-xl:hidden;
            }
        }

        &>div:nth-child(3) {
            @apply flex max-lg:flex-wrap gap-3 max-lg:justify-between lg:gap-6;


        }
    }
}
</style>