<template>
    <div class="default-main" style="padding: 10px">
        <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    ref="pointTree"
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    :show-checkbox="monitoringPoint.state.showCheckBox"
                    :default-checked-keys="monitoringPoint.state.lineIds"
                    @check="handleCheckChange"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane>
                <div style="position: relative; height: 100%">
                    <el-tabs
                        v-model="activeName"
                        type="border-card"
                        class="demo-tabs"
                        style="height: 100%"
                        @tab-change="handleTabChange"
                    >
                        <el-tab-pane label="事件分析" name="3" lazy v-if="!isReload">
                            <EventStudy :externalHeight="20" />
                        </el-tab-pane>
                        <el-tab-pane label="事件统计" name="2" lazy v-if="!isReload">
                            <EventStatistics :externalHeight="20" />
                        </el-tab-pane>

                        <!-- <el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
                            <RunningCondition :externalHeight='20'/>
                        </el-tab-pane> -->
                        <el-tab-pane label="暂态报告" name="5" lazy v-if="!isReload">
                            <TransientReport />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { defineOptions, watch, onMounted, ref, nextTick } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { mainHeight } from '@/utils/layout'
import Navigation from './navigation/index.vue'
import EventStatistics from './eventStatistics/index.vue'
import EventStudy from './eventStudy/index.vue'
import RunningCondition from './runningCondition/index.vue'
import TransientReport from './transientReport/index.vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
import router from '@/router'

defineOptions({
    name: 'harmonic-boot/monitor/online'
})

const monitoringPoint = useMonitoringPoint()
const pointTree = ref()
const size = ref(19)
const isReload = ref(false)
const height = mainHeight(40)
const activeName = ref('3')
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})
const handleNodeClick = (data: any, node: any) => {
    if (data.level === 6) {
     
        monitoringPoint.setValue('lineId', data.id)
        monitoringPoint.setValue('pid', data.pids)
        monitoringPoint.setValue('lineName', data.alias)
        monitoringPoint.setValue('comFlag', data.comFlag)
    }
}
const handleCheckChange = (data: any, node: any) => {
    monitoringPoint.setValue(
        'lineIds',
        node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
    )
}
const handleTabChange = () => {
    monitoringPoint.setShowCheckBox(false)
}
// watch(
//     () => router.currentRoute.value.query.lineId,
//     (newLineId, oldLineId) => {
//         if (!newLineId) return
//         // 在这里处理 lineId 的变化
//         monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
//         monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
//     },
//     { immediate: true }
// )
watch(
    () => monitoringPoint.state.lineId,
    () => {
        //  刷新页面
        isReload.value = true
        nextTick(() => {
            isReload.value = false
        })
    }
)
const changeTab = (e: string) => {
    activeName.value = e
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

.monitoring-point {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--el-color-primary);
}
</style>
