<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useState } from 'src/composables/useState';
import VnNotes from 'src/components/ui/VnNotes.vue';

const route = useRoute();
const state = useState();
const user = state.getUser();

const $props = defineProps({
    id: { type: [Number, String], default: null },
    addNote: { type: Boolean, default: true },
});
const claimId = computed(() => $props.id || route.params.id);

const claimFilter = {
    fields: ['id', 'created', 'workerFk', 'text'],
    include: {
        relation: 'worker',
        scope: {
            fields: ['id', 'firstName', 'lastName'],
            include: {
                relation: 'user',
                scope: {
                    fields: ['id', 'nickname', 'name'],
                },
            },
        },
    },
};

const body = {
    claimFk: claimId.value,
    workerFk: user.value.id,
};
</script>

<template>
    <VnNotes
        url="claimObservations"
        :go-to="`/claim/${route.params.id}/lines`"
        :add-note="$props.addNote"
        :user-filter="claimFilter"
        :filter="{ where: { claimFk: claimId } }"
        :body="body"
        v-bind="$attrs"
        style="overflow-y: auto"
    />
</template>
