<template>
    <div class="pd10">
        <el-row>
            <el-col>
                <el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
                    <el-tab-pane label="单位台账" name="first" :style="'height:' + vh + ';'">
                        <MainAccount v-if="activeName == 'first'"></MainAccount>
                    </el-tab-pane>

                    <el-tab-pane label="主网监测点台帐" name="second" :style="'height:' + vh + ';'">
                        <Monitoringpoint v-if="activeName == 'second'"></Monitoringpoint>
                    </el-tab-pane>
                    <el-tab-pane label="主网监测点限值" name="Zhuwangjiancedianxianzhi" :style="'height:' + vh + ';'">
                        <Zhuwangjiancedianxianzhi
                            v-if="activeName == 'Zhuwangjiancedianxianzhi'"
                        ></Zhuwangjiancedianxianzhi>
                    </el-tab-pane>

                    <!-- <el-tab-pane
                      label="配网监测点台帐"
                      name="second"
                      :style="'height:' + vh + ';'"
                    >
                      <AllocationAccount  v-if="activeName=='second'"></AllocationAccount>
                    </el-tab-pane> -->

                    <el-tab-pane label="台区信息" name="third" :style="'height:' + vh + ';'">
                        <StationAreaInformation v-if="activeName == 'third'"></StationAreaInformation>
                    </el-tab-pane>

                    <el-tab-pane label="用电用户台帐" name="fourth" :style="'height:' + vh + ';'">
                        <UseRadioAccount v-if="activeName == 'fourth'"></UseRadioAccount>
                    </el-tab-pane>

                    <el-tab-pane label="发电用户台账" name="fifth" :style="'height:' + vh + ';'">
                        <PowerGenerationAccount v-if="activeName == 'fifth'" />
                    </el-tab-pane>

                    <el-tab-pane label="终端台帐" name="sixth" :style="'height:' + vh + ';'">
                        <TerminalAccount v-if="activeName == 'sixth'"></TerminalAccount>
                    </el-tab-pane>

                    <el-tab-pane label="变电站台账" name="seventh" :style="'height:' + vh + ';'">
                        <setInformation v-if="activeName == 'seventh'"></setInformation>
                    </el-tab-pane>

                    <el-tab-pane label="牵引站台账" name="eighth" :style="'height:' + vh + ';'">
                        <TractionStationInformation v-if="activeName == 'eighth'"></TractionStationInformation>
                    </el-tab-pane>

                    <el-tab-pane label="变压器台账" name="ninth" :style="'height:' + vh + ';'">
                        <transformer v-if="activeName == 'ninth'"></transformer>
                    </el-tab-pane>

                    <el-tab-pane label="母线台账" name="tenth" :style="'height:' + vh + ';'">
                        <RouteTable v-if="activeName == 'tenth'"></RouteTable>
                    </el-tab-pane>

                    <el-tab-pane label="典型台账" name="Typical" :style="'height:' + vh + ';'">
                        <Typical :flag="1" v-if="activeName == 'Typical'"></Typical>
                    </el-tab-pane>
                    <el-tab-pane label="台账上送统计" name="statistics" :style="'height:' + vh + ';'">
                        <statistics v-if="activeName == 'statistics'"></statistics>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import MainAccount from './components/MainAccount'
import Monitoringpoint from './components/Monitoringpoint'
import Typical from './components/Monitoringpoint'
import AllocationAccount from './components/AllocationAccount'
import StationAreaInformation from './components/StationAreaInformation'
import UseRadioAccount from './components/UseRadioAccount'
import PowerGenerationAccount from './components/PowerGenerationAccount'
import TerminalAccount from './components/TerminalAccount'
import setInformation from './components/setInformation'
import TractionStationInformation from './components/TractionStationInformation'
import BusbarList from './components/BusbarList'
import transformer from './components/transformer'
import RouteTable from './components/RouteTable'
import Zhuwangjiancedianxianzhi from './components/zhuwangjiancedianxianzhi'
import statistics from './components/statistics'

export default {
    name: 'tzzdgl',
    components: {
        MainAccount,
        Monitoringpoint,
        AllocationAccount,
        StationAreaInformation,
        UseRadioAccount,
        PowerGenerationAccount,
        TerminalAccount,
        setInformation,
        transformer,
        TractionStationInformation,
        BusbarList,
        RouteTable,
        Zhuwangjiancedianxianzhi,
        Typical,
        statistics
    },
    data() {
        return {
            vh: '',
            activeName: 'first',
            device: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    computed: {
        //计算表格高度
        // height(){
        //   return '100vh'- this.$refs.form.offsetHeight +259;
        // }
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    }
}
</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>
