<script setup>
import AppLayout from "../../Layouts/AppLayout.vue";
import ReportForm from "./Components/ReportForm.vue";
import {useReportStore} from "../../Stores/report.js";
import {computed, onMounted} from "vue";
import {useAuthStore} from "../../Stores/auth.js";

const reportStore = useReportStore()
const authStore = useAuthStore()

onMounted(() => {
    const queryString = window.location.search
    const params = new URLSearchParams(queryString)
    const userId = params.get('userId')

    reportStore.reportInfo.userId = userId

    reportStore.getReportInfo()
})

// reportStore.getReportInfo()

const mode = computed(() => {
    if (authStore.isHeadOfDepartment)
        return 'readonly'
    return 'fillable'
})

</script>

<template>
    <AppLayout>
        <ReportForm :mode />
    </AppLayout>
</template>
