<template>
    <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
        <pane :size="size">
            <PointTree
                :default-expand-all="false"
                :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                :current-node-key="monitoringPoint.state.lineId"
                @node-click="handleNodeClick"
                @init="handleNodeClick"
            ></PointTree>
        </pane>
        <pane>
            <Map v-bind="$attrs"></Map>
        </pane>
    </splitpanes>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import Map from './map.vue'
import Tree from '@/components/tree/index.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'

const monitoringPoint = useMonitoringPoint()
const size = ref(0)
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
})
const handleNodeClick = (data: any, node: any) => {
    if (data.level === 6) {
        monitoringPoint.setValue('lineId', data.id)
    }
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
</style>
