<template>
    <div class="default-main manage-operationalguidance" :style="{ height: pageHeight.height }">
        <DeviceTree @init="nodeClick" @deviceTypeChange="onDeviceTypeChange" />
        <div class="manage-operationalguidance-right">
            <el-tabs v-model="activeTab" type="border-card" class="og-tabs">
                <el-tab-pane label="实时状态" name="realTime" lazy>
                    <RealTime :device="currentDevice" />
                </el-tab-pane>
                <el-tab-pane label="定值管理" name="setting" lazy>
                    <SettingManage :device="currentDevice" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import RealTime from './comp/realTime.vue'
import SettingManage from './comp/settingManage.vue'

defineOptions({
    name: 'operationalguidance'
})

const pageHeight = mainHeight(20)
const activeTab = ref('realTime')
const currentDevice = ref<anyObj>()

const nodeClick = (e?: anyObj) => {
    if (e) currentDevice.value = e
}

const onDeviceTypeChange = (_type: any, device?: anyObj) => {
    if (device) currentDevice.value = device
}
</script>

<style scoped lang="scss">
.manage-operationalguidance {
    display: flex;

    &-right {
        height: 100%;
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5;
        min-width: 0;
    }

    .og-tabs {
        height: 100%;
        display: flex;
        flex-direction: column;

        :deep(.el-tabs__content) {
            flex: 1;
            overflow: hidden;
            padding: 10px 0;
        }

        :deep(.el-tab-pane) {
            height: 100%;
        }
    }
}
</style>
