<template>
    <div>
        <el-tabs type="border-card" v-model.trim="activeName" tab-position="left">
            <el-tab-pane label="暂降分布统计" name="1">
                <Distribution v-if="activeName == '1'" />
            </el-tab-pane>
            <el-tab-pane label="ITIC曲线" name="2">
                <ITIC v-if="activeName == '2'" />
            </el-tab-pane>
            <el-tab-pane label="F47曲线" name="3">
                <F47 v-if="activeName == '3'" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import Distribution from './eventStatistics/distribution.vue'
import ITIC from './eventStatistics/ITIC.vue'
import F47 from './eventStatistics/F47.vue'
import { mainHeight } from '@/utils/layout'

const emit = defineEmits(['back'])
const activeName = ref('1')
const layout = mainHeight(80)

provide('eventStatisticsBack', () => emit('back'))
</script>

<style lang="scss" scoped>
:deep(.el-tabs--border-card>.el-tabs__content) {
    padding: 10px 10px 10px 0;
}

:deep(.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left) {
    height: calc(100vh - 193px);
}
</style>