<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 {NTag, NNumberAnimation} from 'naive-ui'
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: {}
    }
})

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.reportInfo = {
        ...reportStore.reportInfo,
        ...props
    }

    reportStore.reportForm.metrika_item_3 = props.department.recipientCount
    reportStore.reportForm.metrika_item_7 = props.department.extractCount
    reportStore.reportForm.metrika_item_8 = props.department.currentCount

    reportStore.reportForm.metrika_item_9 = props.department.deadCount
    reportStore.reportForm.metrika_item_10 = props.department.surgicalCount[1]
    reportStore.reportForm.metrika_item_11 = props.department.surgicalCount[0]
    reportStore.reportForm.metrika_item_17 = props.department.countStaff

    reportStore.unwantedEvents = props.report.unwantedEvents

    if (props.report.isHeadOrAdmin) {
        reportStore.timestampCurrentRange = [
            props.dates.startAt,
            props.dates.endAt,
        ]
    } else {
        reportStore.timestampCurrentRange = [
            props.dates.endAt,
            props.dates.endAt
        ]
    }

    // reportStore.getReportInfo()
})

// reportStore.getReportInfo()

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

watch(() => props, (newProps) => {
    reportStore.reportInfo = {
        ...reportStore.reportInfo,
        ...newProps
    }

    if (newProps.report.isHeadOrAdmin) {
        reportStore.reportInfo.userId = newProps.report.userId
    }

    reportStore.reportForm.metrika_item_3 = newProps.department.recipientCount
    reportStore.reportForm.metrika_item_7 = newProps.department.extractCount
    reportStore.reportForm.metrika_item_8 = newProps.department.currentCount

    reportStore.reportForm.metrika_item_9 = newProps.department.deadCount
    reportStore.reportForm.metrika_item_10 = newProps.department.surgicalCount[1]
    reportStore.reportForm.metrika_item_11 = newProps.department.surgicalCount[0]

    reportStore.unwantedEvents = newProps.report.unwantedEvents

    if (props.report.isHeadOrAdmin) {
        reportStore.timestampCurrentRange = [
            props.dates.startAt,
            props.dates.endAt,
        ]
    } else {
        reportStore.timestampCurrentRange = [
            props.dates.endAt,
            props.dates.endAt
        ]
    }
}, {
    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>
