<template>
    <NuxtLayout :name="device" :config="config">
        <main class="panel-moeen-factors">
            <table>
                <caption>
                    <ul>
                        <li v-for="(value, key) in info" :key="key">
                            <label v-text="$t(key) + ':'" />
                            <span v-text="value" />
                        </li>
                    </ul>
                </caption>
                <thead>
                    <tr>
                        <th v-for="(column, i) in columns" :key="i" v-text="$t(column)" />
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr v-for="(row, i) in rows" :key="i">
                        <td v-text="i + 1" />
                        <td v-for="(value, key) in row" :key="key" v-text="value" />
                    </tr>
                </tbody>
            </table>
        </main>
    </NuxtLayout>
</template>

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

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

const info = ref([])
const rows = ref([])
const columns = ref([])

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

if (status.value == 'success') {
    // info.value = data.value.info
    // rows.value = data.value.items
    // columns.value = ["row", ...Object.keys(rows.value[0]), ""]
} else throw createError(error.value)

const show = () => { }
</script>

<style lang="scss">
.panel-moeen-factors {
    @apply container w-full flex flex-col items-center max-lg:px-6 max-lg:gap-4;
    @apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] overflow-x-auto;


    &::-webkit-scrollbar {
        @apply hidden;
    }

    table {
        @apply w-[100.3rem] border border-[#E5E5E5];

        caption {
            @apply h-[3.6rem] border-x border-t px-6 border-[#E5E5E5];

            ul {
                @apply h-full flex items-center gap-4 text-xs lg:text-base;

                li {
                    @apply flex items-center gap-2 font-vazir whitespace-nowrap;

                    label {
                        @apply text-[#333333] font-bold;
                    }

                    span {
                        @apply text-[#7F7F7F] font-medium;
                    }

                    &:nth-child(1) {
                        @apply ml-[8.6rem];
                    }

                    &:nth-child(3) {
                        @apply ml-[8.8rem] mr-auto;
                    }
                }
            }
        }

        thead {
            tr {
                @apply h-[2.8rem] border border-[#E5E5E5] bg-[#F2F2F2];

                th {
                    @apply border-l border-[#E5E5E5] px-2.5 text-xs lg:text-base;
                    @apply text-center text-[#333333] font-medium font-vazir;
                }
            }
        }

        tbody {
            @apply h-max;

            tr {
                @apply border-b h-[2.8rem] w-full;

                td {
                    @apply border-l border-[#E5E5E5] px-2.5 text-[0.7em] lg:text-sm;
                    @apply text-center text-zinc-800 font-medium font-vazir;

                    &:nth-child(6) {
                        @apply w-[17.2rem] text-right;
                    }

                    &:nth-child(12) {
                        @apply w-[3.3rem];

                        button {
                            .p-button-icon {
                                @apply text-2xl text-[#B2B2B2];
                            }
                        }
                    }
                }

                &:first-child {
                    direction: ltr;
                    @apply ltr;
                }
            }
        }
    }
}
</style>
