<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 vehicleId = computed(() => route.params.id);

const noteFilter = computed(() => {
    return {
        order: 'created DESC',
        where: { vehicleFk: vehicleId.value },
    };
});

const body = {
    vehicleFk: vehicleId.value,
    userFk: user.value.id,
};
</script>

<template>
    <VnNotes
        url="vehicleObservations"
        :add-note="true"
        :filter="noteFilter"
        :body="body"
        style="overflow-y: auto"
        required
        deletable
    />
</template>
