<script setup>
import { onMounted, ref, computed, provide, useTemplateRef } from "vue"
import Fence from "../components/Fence.vue"
import Filter from "../components/Filter.vue"
import Sky from "../components/Sky.vue"
import DisplayColor from "../components/DisplayColor.vue"
import DisplayRouteLine from "../components/DisplayRouteLine.vue"

// 在Map.vue中添加props定义
const props = defineProps({
  elId: {
    type: String,
    default: 'mapContainer'
  }
})

const { VgoMap } = window
let mapId = "1977947221534052352"
const isLoaded = ref(false)

const map = ref()
const routeLineRef = useTemplateRef('routeLineRef')

provide("map", computed(() => map.value))
provide('routeLineRef', computed(() => routeLineRef.value))
provide('polygonDataAll', computed(() => {
  const outDoor = map.value?.mapData?.polygonData ?? []

  const inDoor = map?.mapData?.build?.reduce((result, build) => {
    build.floor.forEach(fItem => {
      result.push(...fItem.polygonData)
    })
    return result
  }, []) ?? []
  
  return [...outDoor, ...inDoor]
}))

onMounted(() => {
  map.value = new VgoMap.Map({
    el: props.elId, // 使用传入的elId,
    id: mapId,
  })
  
  map.value.on("loaded", () => {
    window.$map = map.value
    isLoaded.value = true
  })
})
</script>

<template>
  <div class="wrapper">
    <div :id="elId"></div>
    <div v-if="isLoaded" class="ui">
      <!-- <Fence/> -->
      <DisplayRouteLine ref="routeLineRef"/>
      <!-- <DisplayColor/> -->
      <Sky/>
      <Filter/>
    </div>
  </div>
</template>

<style lang="css">
html,
body,
.app,
.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#mapContainer {
  position: relative;
  z-index: 1;
}

.ui {
  position: absolute;
  right: 50px;
  bottom: 50px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 30px;
}
</style>
