<template>
  <div id="visualizationHome">
    <VisualizationHeader />
    <Map/>
    <TreeMenu />
    <ServiceTree/>
    <FigureLegend />
    <BaseMapSwitch />
    <router-view/>
    <VisualizationBottom />
    <template v-if="mapStore.layerDetailShow">
      <LayerDetailDialog :dia-attrs="{modal:false}"  />
    </template>
  </div>
</template>

<script>
import VisualizationHeader from "../../c-cpns/VisualizationHeader.vue";
import Map from "../../c-cpns/Map.vue";
import VisualizationBottom from "@/views/c-cpns/VisualizationBottom.vue";
import ServiceTree from "@/views/c-cpns/ServiceTree.vue";
import FigureLegend from "@/views/c-cpns/figureLegend.vue";
import TreeMenu from "@/views/c-cpns/TreeMenu.vue";
import BaseMapSwitch from "@/views/c-cpns/BaseMapSwitch.vue";
import {useMapStore} from "@/store/mapStore.js";
import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
export default {
  name: "VisualizationHome",
  components: {
    LayerDetailDialog,
    BaseMapSwitch, TreeMenu, FigureLegend, ServiceTree, VisualizationBottom, Map, VisualizationHeader},
  setup() {
    const mapStore = useMapStore();
    return{
      mapStore
    }
  }
}
</script>

<style scoped lang="scss">
#visualizationHome{
  width: 100%;
  height: 100%;
  background: rgb(1, 27, 67);
}
</style>