<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});

const route = useRoute();

const { notify } = useNotify();
const { t } = useI18n();
const entityId = computed(() => {
    return $props.id || route.params.id;
});
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
const filter = {
    where: { id: entityId },
};
const removeRole = async () => {
    await axios.delete(`VnRoles/${entityId.value}`);
    notify(t('Role removed'), 'positive');
};
</script>

<template>
    <CardDescriptor
        :url="`VnRoles/${entityId}`"
        :filter="filter"
        module="Role"
        @on-fetch="setData"
        data-key="Role"
        :title="data.title"
        :subtitle="data.subtitle"
        :summary="$props.summary"
    >
        <template #menu>
            <QItem v-ripple clickable @click="removeRole()">
                <QItemSection>{{ t('Delete') }}</QItemSection>
            </QItem>
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('role.description')" :value="entity.description" />
        </template>
    </CardDescriptor>
</template>
<style scoped>
.q-item__label {
    margin-top: 0;
}
</style>
<i18n>
    en:
        accountRate: Claming rate
    es:
        accountRate: Ratio de reclamación
</i18n>
