<template>
    <div class="default-main">
        <TableHeader date-picker area>
            <template v-slot:select></template>
        </TableHeader>
        <el-tabs v-model.trim="activeName" type="border-card" @tab-click="handleClick"
            v-loading="tableStore.table.loading">
            <el-tab-pane label="暂降原因及类型统计" name="1">
                <TypeStatistics ref="Statistics" />
            </el-tab-pane>
            <el-tab-pane label="电压容忍度曲线兼容性统计" name="2">
                <Compatibility ref="compatibility" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'

import { useDictData } from '@/stores/dictData'
import TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, provide } from 'vue'
import TypeStatistics from './components/TypeStatistics.vue'
import Compatibility from './components/Compatibility.vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
    name: 'Region/overview'
})
const activeName = ref('1')
const Statistics = ref()
const compatibility = ref()
const dictData = useDictData()

const tableStore = new TableStore({
    url: '/event-boot/areaAnalysis/getEventReason',
    method: 'POST',
    column: [],
    loadCallback: () => {
        if (activeName.value == '1') {
            Statistics.value.info(tableStore.table.data)
        } else {
            compatibility.value.info(tableStore.table.data.voltageToleranceCurveDataList)
        }
    }
})
provide('tableStore', tableStore)

tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
onMounted(() => {
    tableStore.index()
})
const handleClick = async (e: any) => {
    if (e.paneName == '1') {
        tableStore.table.params.scale = null
        tableStore.table.params.loadType = null
        tableStore.url = '/event-boot/areaAnalysis/getEventReason'
    } else {
        tableStore.table.params.scale = compatibility.value.checkedVoltage
        tableStore.table.params.loadType = compatibility.value.checkedSource
        tableStore.url = '/event-boot/areaAnalysis/getVoltageToleranceCurve'
    }
    await tableStore.onTableAction('search', {})
}
const layout = mainHeight(123) as any
</script>

<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: 500px;
}

::v-deep(.el-tabs__content) {
    height: v-bind('layout.height');
    overflow-y: auto;
}
</style>
