<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 = computed(() => {
    return {
        where: { claimFk: claimId.value },
        fields: ['id', 'created', 'workerFk', 'text'],
        include: {
            relation: 'worker',
            scope: {
                fields: ['id', 'firstName', 'lastName'],
                include: {
                    relation: 'user',
                    scope: {
                        fields: ['id', 'nickname'],
                    },
                },
            },
        },
    };
});

const body = {
    claimFk: claimId.value,
    workerFk: user.value.id,
};
</script>
<template>
    <VnNotes
        url="claimObservations"
        :add-note="$props.addNote"
        :filter="claimFilter"
        :body="body"
        v-bind="$attrs"
        style="overflow-y: auto"
    />
</template>
