<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'"
          @initialized="handleTabInitialized"
        />
      </el-tab-pane>
      
      <el-tab-pane label="场站级评估" name="anotherReport">
        <SubstationTab 
          ref="substationTabRef"
          :active="activeTab === 'anotherReport'"
          @initialized="handleTabInitialized"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MonitoringPointTab from './MonitoringPointTab.vue'
import SubstationTab from './SubstationTab.vue'

const activeTab = ref('pollutionReport')
const monitoringPointTabRef = ref()
const substationTabRef = ref()
const tabInitialized = ref({
  pollutionReport: false,
  anotherReport: false
})

const handleTabChange = (tabName: string) => {
  if (!tabInitialized.value[tabName]) {
    if (tabName === 'pollutionReport' && monitoringPointTabRef.value) {
      monitoringPointTabRef.value.refresh()
    } else if (tabName === 'anotherReport' && substationTabRef.value) {
      substationTabRef.value.refresh()
    }
  }
}

const handleTabInitialized = (tabName: string) => {
  tabInitialized.value[tabName] = true
}
</script>

