<script setup>
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 id = route.params.id;

const $props = defineProps({
    addNote: { type: Boolean, default: true },
});

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

const body = {
    claimFk: id,
    workerFk: user.value.id,
};
</script>
<template>
    <div class="column items-center">
        <VnNotes
            style="overflow-y: scroll"
            :add-note="$props.addNote"
            :id="id"
            url="claimObservations"
            :filter="claimFilter"
            :body="body"
        />
    </div>
</template>
