<script setup>
import { NFlex, NButton } from 'naive-ui'
import ReportHeader from "./ReportHeader.vue";
import ReportFormInput from "./ReportFormInput.vue";
import ReportSection from "./ReportSection.vue";
import {useReportStore} from "../../../Stores/report.js";
import {useAuthStore} from "../../../Stores/auth.js";

const props = defineProps({
    mode: {
        type: String,
        default: 'fillable' // 'fillable', 'readonly'
    }
})

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

const onSubmit = () => {
    reportStore.sendReportForm({
        departmentId: authStore.userDepartment.department_id
    })
}
</script>

<template>
    <NFlex vertical class="max-w-6xl mx-auto mt-6 mb-4 w-full">
        <ReportHeader :mode="mode" />

        <ReportFormInput />

        <ReportSection label="Планово" />

        <NButton secondary size="large" @click="onSubmit">
            Сохранить отчет
        </NButton>
    </NFlex>
</template>

<style scoped>

</style>
