<template>
    <div class="default-main">
        <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
            <el-tab-pane label="监测点评估" name="pollutionReport">
                <MonitoringPointTab ref="monitoringPointTabRef" :active="activeTab === 'pollutionReport'" />
            </el-tab-pane>

            <el-tab-pane label="场站级评估" name="anotherReport">
                <SubstationTab ref="substationTabRef" :active="activeTab === 'anotherReport'" />
            </el-tab-pane>
            <el-tab-pane label="区域级评估" name="3">
                <regionalAssessment v-if="activeTab == '3'" />
            </el-tab-pane>
            <el-tab-pane label="敏感及重要用户评估" name="4">
                <userEvaluation v-if="activeTab == '4'" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MonitoringPointTab from './components/MonitoringPointTab.vue'
import SubstationTab from './components/SubstationTab.vue'
import regionalAssessment from './components/regionalAssessment.vue'
import userEvaluation from './components/userEvaluation.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
defineOptions({
    name: 'harmonic-boot/qydetailedAnalysis/pollutionReport'
})

const activeTab = ref('pollutionReport')
const monitoringPointTabRef = ref()
const substationTabRef = ref()

const handleTabChange = (tabName: string) => {
    if (tabName === 'pollutionReport' && monitoringPointTabRef.value) {
        monitoringPointTabRef.value.refresh()
    } else if (tabName === 'anotherReport' && substationTabRef.value) {
        substationTabRef.value.refresh()
    }
}
watch(
    () => route.query.t,
    async (newValue, oldValue) => {
        if (route.fullPath.includes('harmonic-boot/qydetailedAnalysis/pollutionReport')) {
            let type = (route.query.type as string) || 'null'
            if (type == 'null') {
            } else if (type == '2') {
                activeTab.value = 'anotherReport'
                substationTabRef.value.refresh((route.query.statisticalType as string) || 'null')
            } else if (type == '4') {
                activeTab.value = '4'
            }
        }
    },
    { deep: true, immediate: true }
)
</script>
