<script setup>
import { NFlex, NAlert, 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";
import {computed} from "vue";

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

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

const onSubmit = () => {
    reportStore.reportFormRef?.validate((errors) => {
        if (!errors) reportStore.sendReportForm()
        else window.$message.error('Ошибка отправки отчета')
    })
    // reportStore.sendReportForm()
}


</script>

<template>
    <NFlex vertical class="max-w-6xl mx-auto mt-6 mb-4 w-full">
        <NAlert type="warning" v-if="reportStore.reportInfo.report?.message">
            {{ reportStore.reportInfo.report.message }}
        </NAlert>
        <ReportHeader :mode="mode" />

        <ReportFormInput />

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

        <NButton v-if="reportStore.reportInfo?.report?.isActiveSendButton" secondary size="large" @click="onSubmit">
            Сохранить отчет
        </NButton>
    </NFlex>
</template>

<style scoped>

</style>
