<template>
  <div class="map-home">
    <map-box
      v-if="showMap && floorId"
      :spaceData="spaceData"
      :projectId="projectId"
      :floorId="floorId"
      :spaceInfo="spaceInfo"
      :buildingId="buildingId"
      @changeSpace="changeSpace"
    ></map-box>
    <space-box
      v-else
      :spaceData="spaceData"
      @changeSpace="changeSpace"
    ></space-box>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  watch,
} from "vue";
import SpaceBox from "./SpaceBox.vue";
import MapBox from "./MapBox.vue";
import { useRouter } from "vue-router";
import { newNumber, parseImgUrl } from "@/utils";
import { UserActionTypes } from "@/store/modules/user/action-types";
import { useStore } from "@/store";
import { login } from "@/apis/user";
import { Form, Field, CellGroup, Button, Toast } from "vant";
import { setToken } from "@/utils/cookies";
import { getMapInfo } from "@/apis/envmonitor";

export default defineComponent({
  props: {
    spaceData: {
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    buildingId: {
      type: String,
      default: () => "",
    },
    floorId: {
      type: String,
      default: () => "",
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    vanForm: Form,
    vanField: Field,
    CellGroup,
    vanButton: Button,
    SpaceBox,
    MapBox,
  },
  setup(props, contex) {
    let router: any = useRouter();
    const store = useStore();
    const proxyData = reactive({
      spaceData: props.spaceData,
      showMap: false, // 是否展示地图
      // 切换空间
      changeSpace(item: any) {
        contex.emit("changeSpace", item, 1);
      },
      floorId: props.floorId,
      spaceInfo: props.spaceInfo,
      /**
       * 获取地图信息
       */
      getMapInfo() {
        let params: any = {
          projectId: props.projectId,
          floorId: proxyData.floorId,
        };
        getMapInfo(params)
          .then((res) => {
            let resData: any = res;
            if (resData.result === "success") {
              let data: any = resData?.data ?? null;
              // debugger
              if (data) {
                proxyData.showMap = true;
              } else {
                proxyData.showMap = false;
              }
            } else {
              proxyData.showMap = false;
            }
          })
          .catch(() => {
            proxyData.showMap = false;
          });
      }
    });
    onMounted(() => {});
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
        proxyData.floorId = newProps.floorId;
        proxyData.spaceInfo = newProps.spaceInfo;
        // console.log("proxyData.spaceInfo===")
        // console.log(proxyData.spaceInfo)
        proxyData.getMapInfo();
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.map-home {
  width: 100%;
  height: 100%;
  background: $elBg;
}
</style>
  