<template>
    <div class="default-main" style="position: relative">
        <div v-show="view">
            <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
                <el-tab-pane label="导航" name="1" :style="height" lazy>
                    <Navigation @changeTab="changeTab" ref="navigationRef" />
                </el-tab-pane>
                <el-tab-pane label="事件统计" name="2" lazy v-if="!isReload">
                    <EventStatistics @viewWave="viewWave" />
                </el-tab-pane>
                <el-tab-pane label="事件分析" name="3" lazy v-if="!isReload">
                    <EventStudy />
                </el-tab-pane>
                <el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
                    <RunningCondition />
                </el-tab-pane>
                <el-tab-pane label="暂态报告" name="5" lazy v-if="VITE_FLAG">
                    <TransientReport />
                </el-tab-pane>
            </el-tabs>
            <div class="monitoring-point">当前位置：{{ monitoringPoint.state.lineName }}</div>
        </div>
        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
            <waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
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'
import { mainHeight } from '@/utils/layout'
import waveForm from '@/components/echarts/waveForm.vue'
import router from '@/router'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
defineOptions({
    name: 'Descentsystem/monitoringpoint'
})
const isReload = ref(false)
const navigationRef = ref()
const pageHeight = mainHeight(20)
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(82)
const activeName = ref('1')
const view = ref(true)
const view2 = ref(false)
const boxoList = ref({})
const wp = ref({})
watch(
    () => router.currentRoute.value.query.lineId,
    (newLineId, oldLineId) => {
        if (!newLineId) return
        // 在这里处理 lineId 的变化
        console.log('newLineId')
        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
        setTimeout(() => {
            navigationRef.value?.handleNodeClick({
                level: 6,
                id: router.currentRoute.value.query.lineId
            })
        }, 500)
    },
    { immediate: true }
)
watch(
    () => monitoringPoint.state.lineId,
    () => {
        //  刷新页面
        isReload.value = true
        nextTick(() => {
            isReload.value = false
        })
    }
)
const backbxlb = () => {
    view.value = true
    view2.value = false
}
const waveFormRef = ref()
// 查看波形
const viewWave = (row: any) => {
    view.value = false
    setTimeout(() => {
        console.log(123, monitoringPoint.state)

        waveFormRef.value.open({
            ...row,
            lineName: monitoringPoint.state.lineName.split('>').pop(),
            startTime: row.time,
            featureAmplitude: row.eventValue / 100,
            duration: row.persistTime
        })
    }, 100)
}
const changeTab = (e: string) => {
    activeName.value = e
}
</script>
<style lang="scss">
.monitoring-point {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--el-color-primary);
}
</style>
