<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-comments">
            <ul>
                <li v-for="(comment, i) in comments" :key="i">
                    <PanelCommentItem :data="comment" />
                </li>
            </ul>
            <AppPagination :pages="pages" />
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/panel'
provide('init', init())
const { device, t } = inject('service')

const config = reactive({
    desktop: { toolbar: true },
    mobile: { header: { back: true, title: t('myComments') } },
})

const comments = ref([])
const pages = ref(1)

const { meta, query } = useRoute()
const { page = 1 } = query

const { status, data, error } = await useFetch(`/api/comments/${page}`, {
    headers: {
        Authorization: useCookie('token')
    }
})

if (status.value == 'success') {
    comments.value = data.value
    pages.value = data.value.pages

} else throw createError(error.value)
</script>

<style lang="scss">
.panel-comments {
    @apply w-full container max-lg:px-6 pb-20 pt-[1.9rem] lg:py-[6.3rem];

    ul {
        @apply flex flex-col justify-center mx-auto gap-6 lg:gap-[2.6rem];

        li {
            @apply border-b pb-6 lg:pb-10 border-[#B9B9B9] last:border-none;
        }
    }
}

body:has(.panel-comments) {
    .p-dialog-mask {
        @apply z-10 #{!important};

        .p-dialog {
            @apply m-0 max-lg:w-full #{!important};
        }

        .p-dialog-content {
            @apply lg:container w-screen lg:w-max flex lg:px-4 #{!important};
        }
    }

    .p-menu {
        @apply w-[10.8rem];
    }

    .p-menuitem {
        @apply text-base;

        &:first-child span {
            @apply text-[#4C4C4C] #{!important};
        }

        &:last-child span {
            @apply text-[#AD3434] #{!important};
        }
    }

    .p-menuitem-content a {
        @apply rtl px-5 #{!important};

        .p-menuitem-icon {
            @apply mr-0 ml-3 #{!important};
        }
    }
}
</style>
