<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';

import { useArrayData } from 'src/composables/useArrayData';

const route = useRoute();
const { t } = useI18n();

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const { store } = useArrayData('Account');
const account = ref(store.data);

const entityId = computed(() => $props.id || route.params.id);
const filter = {
    where: { id: entityId },
    fields: ['id', 'nickname', 'name', 'role'],
    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
</script>

<template>
    <CardSummary
        data-key="AccountSummary"
        ref="AccountSummary"
        url="VnUsers/preview"
        :filter="filter"
        @on-fetch="(data) => (account = data)"
    >
        <template #header>{{ account.id }} - {{ account.nickname }}</template>
        <template #body>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
                    <router-link
                        :to="{ name: 'AccountBasicData', params: { id: entityId } }"
                        class="header header-link"
                    >
                        {{ t('globals.pageTitles.basicData') }}
                        <QIcon name="open_in_new" />
                    </router-link>
                </QCardSection>
                <VnLv :label="t('account.card.nickname')" :value="account.name" />
                <VnLv :label="t('account.card.role')" :value="account.role.name" />
            </QCard>
        </template>
    </CardSummary>
</template>

<style lang="scss" scoped>
.q-dialog__inner--minimized > div {
    max-width: 80%;
}
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}
.multimedia-container {
    flex: 1 0 21%;
}
.multimedia {
    transition: all 0.5s;
    opacity: 1;
    height: 250px;

    .q-img {
        object-fit: cover;
        background-color: black;
    }
    video {
        object-fit: cover;
        background-color: black;
    }
}

.multimedia:hover {
    opacity: 0.5;
}

.close-button {
    top: 1%;
    right: 10%;
}

.zindex {
    z-index: 1;
}

.change-state {
    width: 10%;
}
</style>
