<template>
    <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
        <pane :size="size">
            <PointTree
                :default-expand-all="false"
                v-if="showTree"
                :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                :current-node-key="monitoringPoint.state.lineId"
                @node-click="handleNodeClick"
                @init="handleNodeClick"
            ></PointTree>
        </pane>
        <pane>
            <div style="display: none">
                <DatePicker ref="datePickerRef"></DatePicker>
            </div>
            <Map v-bind="$attrs" v-if="flag" :mapList="mapList"></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 { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { useAdminInfo } from '@/stores/adminInfo'
import DatePicker from '@/components/form/datePicker/index.vue'
import router from '@/router'
const adminInfo = useAdminInfo()
const monitoringPoint = useMonitoringPoint()
const size = ref(17)
const params = ref({
    deptIndex: '',
    monitorFlag: 2,
    powerFlag: 2,
    searchBeginTime: '',
    searchEndTime: '',
    serverName: 'event-boot',
    statisticalType: {}
})
const datePickerRef = ref()
const mapList: any = ref([])
const flag = ref(true)
const showTree = ref(false)
onMounted(() => {

    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
    params.value.deptIndex = adminInfo.$state.deptId
    params.value.searchBeginTime = datePickerRef.value.timeValue[0]
    params.value.searchEndTime = datePickerRef.value.timeValue[1]
    getAreaLineInfo(params.value)
        .then(res => {
            mapList.value = res.data
            showTree.value = true
        })
        .catch(err => {
            showTree.value = true
        })
})

const handleNodeClick = (data: any, node: any) => {
   
    if (data.level === 6) {
        if (window.localStorage.getItem('BMAP_SECKEY') == null) {
            flag.value = false
        }
        monitoringPoint.setValue('lineId', data.id)
        monitoringPoint.setValue('lineName', data.alias)
    }
    setTimeout(() => {
        flag.value = true
    }, 0)
}
defineExpose({
    handleNodeClick
})
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
</style>
