<template>
  <div class="container">
    <div class="header">
      <h1>地图页面标题</h1>
    </div>
    <MapContainer class="map-container" ref="mapRef" :map-options="mapOptions" :init-callback="initMap">
      <div class="left-panel panel">
        <h2>左侧统计面板</h2>
        <!-- 添加你的统计数据 -->
      </div>
      <div class="right-panel panel">
        <h2>右侧统计面板</h2>
        <!-- 添加你的统计数据 -->
      </div>
    </MapContainer>
  </div>
</template>

<script setup lang="ts">
import MapContainer from "@/components/aMap/MapContainer.vue";
import {ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import api from "@/axios";

const mapRef = ref<ComponentExposed<typeof MapContainer>>(null)
const mapOptions: AMap.MapOptions = {
  // 是否为3D地图模式
  viewMode: "3D",
  // 初始化地图级别
  zoom: 16,
  mapStyle: 'amap://styles/darkblue'
}

const initMap = async () => {
  const {data} = await api.get<any[]>('/enterprisesUnit/mapPoint')
  mapRef.value?.mapInstance?.clearMap()
  const markers = data.map(item => {
    if (!item.point) {
      return null;
    }
    return new AMap.Marker({
      position: item.point
    })
  }).filter(Boolean)
  mapRef.value.mapInstance.add(markers)
}

</script>

<style scoped lang="scss">
.container {
  position: relative;
  height: 100vh;
}

.header {
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
}

.map-container {
  height: 100%;
  position: relative;
}

.panel {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 100px; /* 调整顶部距离以避免与标题重叠 */
  z-index: 10;
}

.left-panel {
  left: 10px;
}

.right-panel {
  right: 10px;
}
</style>
