<template>
    <Page>
        <div class="setting">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane lazy label="设备告警" name="first">
                    <Device :deviceTree="deviceTree" v-if="activeName == 'first'" />
                </el-tab-pane>
                <el-tab-pane lazy label="稳态越限告警" name="second">
                    <Steady :deviceTree="deviceTree" v-if="activeName == 'second'" />
                </el-tab-pane>
                <el-tab-pane lazy label="暂态事件" name="three">
                    <Transient :deviceTree="deviceTree" v-if="activeName == 'three'" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </Page>
</template>
<script>
import Device from './device'
import Steady from './steady'
import Transient from './transient'
import { getDeviceTree } from '@/api/app/device.js'

export default {
    name: 'GovernAlarmIndex',
    components: {
        Device,
        Steady,
        Transient
    },
    data() {
        return {
            activeName: 'first',
            deviceTree: []
        }
    },
    created() {
        getDeviceTree().then(res => {
            res.data.forEach(item => {
                item.value = item.id
                item.label = item.name
                item.children.forEach(child => {
                    child.value = child.id
                    child.label = child.name
                    child.children.forEach(grand => {
                        grand.value = grand.id
                        grand.label = grand.name
                        delete grand.children
                    })
                })
            })
            this.deviceTree = res.data
        })
    },
    mounted() {
        console.log(this.$route)
        if (this.$route.query.tab == 3) {
            this.activeName = 'three'
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event)
        }
    }
}
</script>

<style lang="scss">
.setting {
}
</style>
