<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";

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 = 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.unwantedEvents = props.report.unwantedEvents

    reportStore.timestampCurrentRange = [
        props.dates.startAt,
        props.dates.endAt,
    ]

    // reportStore.getReportInfo()
})

// reportStore.getReportInfo()

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

watch(() => props, (newProps) => {

    reportStore.reportInfo = newProps

    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

    reportStore.timestampCurrentRange = [
        newProps.dates.startAt,
        newProps.dates.endAt,
    ]
}, {
    deep: true, // важно для глубокого отслеживания
    immediate: true // выполнить сразу при создании
})
</script>

<template>
    <AppLayout>
        <ReportForm :mode />
    </AppLayout>
</template>
