<script setup>
import {NButton, NDataTable, NScrollbar, NList, NListItem, NGrid, NGi, NFlex, NH2, NSpace} from "naive-ui";
import AppLayout from "../../../Layouts/AppLayout.vue";
import AppPanel from "../../../Components/AppPanel.vue";
import AppContainer from "../../../Components/AppContainer.vue";

const props = defineProps({
    userData: {
        type: Object,
        default: {}
    },
    roles: {
        type: Array,
        default: []
    },
    departments: {
        type: Array,
        default: []
    }
})
</script>

<template>
    <AppLayout>
        <template #header>
            <NFlex align="center" justify="space-between" class="max-w-6xl mx-auto mt-6 mb-4 w-full">
                <NH2>
                    {{ userData.name }}
                </NH2>
                <NSpace>
                    <NButton type="primary">
                        Создать учетную запись
                    </NButton>
                </NSpace>
            </NFlex>
        </template>
        <AppContainer>
            <NGrid cols="2" x-gap="12" y-gap="12">
                <NGi>
                    <AppPanel header="Информация о пользователе" min-h="148px" max-h="148px">
                        <NSpace vertical>
                            <NFlex align="center" justify="space-between">
                                <div>
                                    Имя
                                </div>
                                <div>
                                    {{ userData.name }}
                                </div>
                            </NFlex>
                            <NFlex align="center" justify="space-between">
                                <div>
                                    Логин
                                </div>
                                <div>
                                    {{ userData.login }}
                                </div>
                            </NFlex>
                            <NFlex align="center" justify="space-between">
                                <div>
                                    Активен
                                </div>
                                <div>
                                    {{ userData.is_active ? 'Да' : 'Нет' }}
                                </div>
                            </NFlex>
                            <NFlex align="center" justify="space-between">
                                <div>
                                    Дата создания
                                </div>
                                <div>
                                    {{ userData.created_at }}
                                </div>
                            </NFlex>
                            <NFlex align="center" justify="space-between">
                                <div>
                                    Дата обновления
                                </div>
                                <div>
                                    {{ userData.updated_at }}
                                </div>
                            </NFlex>
                        </NSpace>
                    </AppPanel>
                </NGi>
                <NGi>

                </NGi>
                <NGi>
                    <AppPanel :header="`Доступные отделения (${departments.length})`" min-h="148px" max-h="148px">
                        <NList>
                            <NListItem v-for="department in departments">
                                {{ department.name_full }}
                            </NListItem>
                        </NList>
                    </AppPanel>
                </NGi>
                <NGi>
                    <AppPanel :header="`Доступные роли (${roles.length})`" min-h="148px" max-h="148px">
                        <NList>
                            <NListItem v-for="role in roles">
                                {{ role.name }}
                            </NListItem>
                        </NList>
                    </AppPanel>
                </NGi>
            </NGrid>
        </AppContainer>
    </AppLayout>
</template>

<style scoped>
:deep(.n-h) {
    margin: 0;
}

:deep(.n-data-table-th),
:deep(.n-data-table-td) {
    font-size: var(--n-font-size);
}
</style>
