<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 ref="userEvaluationRef" 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 userEvaluationRef = 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 == '1') {
                activeTab.value = 'pollutionReport'
                setTimeout(() => {
                    monitoringPointTabRef.value.refresh((route.query.name as string) || 'null')
                }, 500)
            } else if (type == '2') {
                activeTab.value = 'anotherReport'
                setTimeout(() => {
                    substationTabRef.value.refresh((route.query.statisticalType as string) || 'null')
                }, 500)
            } else if (type == '4') {
                activeTab.value = '4'
                setTimeout(() => {
                    userEvaluationRef.value.setSearchValue((route.query.name as string) || '')
                }, 500)
            }
        }
    },
    { deep: true, immediate: true }
)
</script>
