<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()
}

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

</script>

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

        <ReportFormInput />

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

        <NFlex v-if="reportStore.reportInfo?.report?.isActiveSendButton" :size="12">
            <NButton secondary size="large" @click="onSubmit">
                Сохранить отчет
            </NButton>
            <NButton
                v-if="reportStore.reportInfo?.report?.canPublish || !reportStore.reportInfo?.report?.report_id"
                type="primary"
                size="large"
                @click="onPublish"
            >
                Опубликовать
            </NButton>
        </NFlex>
    </NFlex>
</template>

<style scoped>

</style>
