<template>
    <div class="default-main">
        <DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
        <baidu-map class="map" :style="height" @ready="initMap" :center="{ lng: 116.403765, lat: 39.914850 }" :zoom="10"
            :scroll-wheel-zoom='true'>
            <bm-boundary v-for="item in boundaryList" :name="item.name" :strokeWeight="2" strokeColor="#0e8780"
                fillColor="#0e8780" fillOpacity="0.05"></bm-boundary>

            <!-- <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true"
                @lineupdate="updatePolygonPath" /> -->

        </baidu-map>
    </div>
</template>

<script setup lang='ts'>
import { mainHeight } from '@/utils/layout'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import { ref, reactive ,onMounted} from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useDictData } from '@/stores/dictData'
const datePickerRef = ref()
const height = mainHeight(20)
// 页面中直接引入就可以
const dictData = useDictData()
import { BaiduMap, BmBoundary, BmPolygon } from 'vue-baidu-map-3x'
const boundaryList = ref([
    { name: '张家口市' },
    { name: '唐山市' },
    { name: '秦皇岛市' },
    { name: '承德市' },
    { name: '廊坊市' },
])

const initMap = async ({ BMap, map }: any) => {

  


}
const addMarkers= async()=>{
    let params = {
        deptIndex: '0d52f9f6e43ec0ee83013cd32da93f66',
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: datePickerRef.value.timeValue[0],
        searchEndTime: datePickerRef.value.timeValue[1],
        serverName: 'event-boot',
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
        // ...row
    }

    let { data } = await getAreaLineInfo(params)

}


const mouseover = () => {
    console.log(123);

}
onMounted(() => {
    addMarkers()
})
</script>
<style lang="scss" scoped>
.map {
    width: 100%;

}
</style>
