<template>
    <div class="pd10">
        <el-row style="overflow-y: hidden">
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <!-- 监测终端统计 -->
                    <el-tab-pane label="暂态指标统计" name="first" :style="'height:' + vh + ';'">
                        <Census v-if="activeName == 'first'"></Census>
                    </el-tab-pane>
                    <!-- 监测点统计 -->
                    <el-tab-pane label="暂态指标分布统计" name="second" :style="'height:' + vh + ';'">
                        <Transientstatistics v-if="activeName == 'second'"></Transientstatistics>
                    </el-tab-pane>
                    <el-tab-pane label="暂态事件明细" name="third" :style="'height:' + vh + ';'">
                        <Transientdetails v-if="activeName == 'third'"></Transientdetails>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Census from './transientIndicators/Census.vue'
import Transientdetails from './transientIndicators/Transientdetails.vue'
import Transientstatistics from './transientIndicators/Transientstatistics.vue'
// import Definite from "./TransientState/Definite.vue";
export default {
    name: 'zwztzb',
    components: { Census, Transientstatistics, Transientdetails },
    data() {
        return {
            vh: '',
            vh1: '',
            activeName: 'first',
            device: ''
        }
    },
    created() {
        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName
        }
    },
    mounted() {
        this.device = window.devicePixelRatio

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
            this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.block {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>
