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

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

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

const rolesOptions = ref([]);
const formModelRef = ref();
watch(
    () => route.params.id,
    () => formModelRef.value.reset()
);
</script>
<template>
    <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
    <FormModel
        ref="formModelRef"
        model="AccountPrivileges"
        url="VnUsers/preview"
        :filter="{ where: { id: route.params.id } }"
        :url-create="`VnUsers/${route.params.id}/privileges`"
        :id="route.params.id"
        auto-load
    >
        <template #form="{ data }">
            <div class="q-gutter-y-sm">
                <QCheckbox
                    v-model="data.hasGrant"
                    :label="t('account.card.privileges.delegate')"
                />
                <VnSelect
                    :label="t('account.card.role')"
                    v-model="data.roleFk"
                    :options="rolesOptions"
                    option-value="id"
                    option-label="name"
                    hide-selected
                    :required="true"
                />
            </div>
        </template>
    </FormModel>
</template>
