<template>
    <div class="pd10">
        <el-row style="overflow-y: hidden">
            <el-col>
                <el-tabs v-model.trim="activeName" type="border-card" @tab-click="handleClick">
                    <!-- 首页 -->
                    <el-tab-pane label="概览" name="first" :style="'height:' + vh + ';'">
                        <homePage v-if="activeName == 'first'" />
                    </el-tab-pane>
                    <!-- 技术监督管理 -->

                    <el-tab-pane label="技术监督管理" name="technology" :style="'height:' + vh + ';'">
                        <technology v-if="activeName == 'technology'" />
                    </el-tab-pane>
                    <!-- 策略管理 -->
                    <el-tab-pane label="告警单策略管理" name="second" :style="'height:' + vh + ';'">
                        <el-tabs v-model="warn">
                            <!-- <el-tab-pane label="策略管理" name="1">
                                <PolicyManagement :typeKey="1" v-if="warn == '1'" />
                            </el-tab-pane> -->
                            <el-tab-pane label="策略绑定" name="2">
                                <WarningBinding :typeKey="1" v-if="warn == '2'" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>

                    <el-tab-pane label="预警单策略管理" name="tactics" :style="'height:' + vh + ';'">
                        <el-tabs v-model="warn">
<!--                            <el-tab-pane label="策略管理" name="3">
                                <PolicyManagement :typeKey="0" v-if="warn == '3'" />
                            </el-tab-pane>-->
                            <el-tab-pane label="策略绑定" name="4">
                                <WarningBinding :typeKey="0" v-if="warn == '4'" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import homePage from './components/WorkOrder/homePage.vue'
import technology from './components/WorkOrder/technology.vue'
import WarningBinding from './components/WorkOrder/WarningBinding.vue'
import PolicyManagement from './components/WorkOrder/PolicyManagement.vue'

export default {
    name: 'jsjdgl',
    components: { homePage, technology, PolicyManagement, WarningBinding },
    data() {
        return {
            vh: '',
            vh1: '',
            activeName: 'first',
            warn: '',

            device: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
            this.vh1 = window.sessionStorage.getItem('appheight') - 143 + 'px'
        },
        handleClick(tab, event) {
            if (this.activeName == 'second') {
                this.warn = '2'
            } else if (this.activeName == 'tactics') {
                this.warn = '4'
            } else {
                this.warn = ''
            }
        }
    }
}
</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>
