<template>
  <div class="container">
    <div class="header">
      <h1>警保联动数据总览</h1>
    </div>
    <MapContainer class="map-container" ref="mapRef" :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 {createApp, h, ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import api from "@/axios";
import EnterprisesUnitInfoWindowContent from "@/views/data/components/EnterprisesUnitInfoWindowContent.vue";
import {EnterprisesUnit} from "@/types/views/data/dataOverview.ts";

const mapRef = ref<ComponentExposed<typeof MapContainer>>(null)

let infoWindow: AMap.InfoWindow = null;

const initMap = async () => {
  const {data} = await api.get<EnterprisesUnit[]>('/enterprisesUnit/mapPoint')
  mapRef.value?.mapInstance?.clearMap()
  const markers = data.map(item => {
    if (!item.point) {
      return null;
    }
    const marker = new AMap.Marker({
      icon: new AMap.Icon({
        image: __APP_ENV.VITE_APP_MINIO_URL + item.type.extData.icon,
        size: new AMap.Size(66, 66),
        imageSize: new AMap.Size(66, 66),
      }),
      position: item.point,
      offset: new AMap.Pixel(-33, -66)
    })
    marker.on('click', () => {
      if (!infoWindow) {
        infoWindow = new AMap.InfoWindow({
          isCustom: true,
          offset: new AMap.Pixel(66, -66),
          closeWhenClickMap: true
        });
      }
      const element = document.createElement('div')
      //h 渲染组件 跟vue一样的用法
      const _InfoWindow = h(EnterprisesUnitInfoWindowContent, item)
      const app = createApp(_InfoWindow)
      app.mount(element)
      infoWindow.setContent(element)
      infoWindow.open(mapRef.value?.mapInstance, item.point)
    })
    return marker
  }).filter(Boolean)
  mapRef.value.mapInstance.add(markers)
  mapRef.value.mapInstance.setFitView()
}

</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 {
  width: 15%;
  left: 10px;
}

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