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

const props = defineProps({
    department: {
        type: Object,
        default: {}
    },
    report: {
        type: Object,
        default: {}
    },
    metrikaItems: {
        type: Array,
        default: []
    },
    dates: {
        type: Object,
        default: {}
    },
    patients: {
        type: Object,
        default: () => ({})
    }
})

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

const syncPageProps = () => reportStore.initializeFromPage(props)

onMounted(syncPageProps)

// reportStore.getReportInfo()

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

watch(() => props, (newProps) => {
    reportStore.initializeFromPage(newProps)
}, {
    deep: true,
    immediate: true
})


</script>

<template>
    <AppLayout>
        <template #headerSuffix>
            <StatisticRecipientPlanOfYear :plan="reportStore.reportInfo.department.recipientPlanOfYear" :progress="reportStore.reportInfo.department.progressPlanOfYear" />
        </template>
        <ReportForm :mode />
    </AppLayout>
</template>
