<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue";
import { messageCallback } from "@/message/index";
import Legend from "./components/Legend.vue";
import { useMap } from "@/hooks/web/useMap";
const { initMap } = useMap();
const resize = () => {
  const app = document.getElementById("app") as HTMLDivElement;
  if (!app) return;
  const clientHeight = document.body.clientHeight;
  const zoom = clientHeight / 1080;
  (app.style as any).zoom = zoom * 100 + "%";
};

onMounted(async () => {
  initMap();
  // 注册postMessage事件
  window.addEventListener("message", messageCallback);
  window.addEventListener("resize", resize);
  window.addEventListener("load", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("message", messageCallback);
  window.$bus.$all_off();
});
</script>

<template>
  <div class="legend-box">
    <Legend></Legend>
  </div>
</template>

<style lang="scss" scoped>
.legend-box {
  position: absolute;
  bottom: 24px;
  right: 550px;
  padding: 12px 0 12px 12px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
</style>
