<template>
  <div class="iot-data-analysis">
    <IOTHeader />
    <IOTLeft> </IOTLeft>
    <IOTRight :params="mapParams"/>
    <IOTLIstDialog v-show="isShowListDialog" />
    <IOTBaseMapSwitch />
    <Map/>
    <template v-if="mapStore.layerDetailShow">
      <LayerDetailDialog :dia-attrs="{ modal: false }" />
    </template>
    <div class="list-controll" @click="changeShowListDialog"></div>
  </div>
</template>

<script setup>
import { ref,provide } from "vue";
import IOTHeader from "./components/IOTHeader.vue";
import IOTLeft from "./components/IOTLeft.vue";
import IOTRight from "./components/IOTRight.vue";
import IOTLIstDialog from "./components/IOTLIstDialog.vue";
import Map from "./map/Map.vue";
import { useMapStore } from "@/store/mapStore.js";

import IOTBaseMapSwitch from "./map/IOTBaseMapSwitch.vue";
import LayerDetailDialog from "@/views/c-cpns/LayerDetailDialog.vue";
const mapStore = useMapStore();
const isShowListDialog = ref(false);
const changeShowListDialog = () => {
  isShowListDialog.value = !isShowListDialog.value;
  console.log(isShowListDialog.value);
};

const mapParams = ref({}); // 存储参数
provide('mapParams', mapParams); // 提供参数


</script>

<style scoped lang="scss">
.iot-data-analysis {
  width: 100vw;
  height: 100vh;
  font-size: 18px;
  .gis-map {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
  }
  .list-controll {
    position: fixed;
    left: 420px;
    top: 110px;
    width: 35px;
    height: 35px;
    background-image: url("@/assets/imgs/tckg.png");
    background-size: 100% 100%;
    z-index: 999;
  }
}
</style>
