<template>
  <div class="map-home">
    <space-box :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";

export default defineComponent({
  props: {
    spaceData: {
      type: Array,
      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,
      changeSpace(item: any) {
        contex.emit("changeSpace", item, 1);
      },
    });
    onMounted(() => {});
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.map-home {
  width: 100%;
  height: 100%;
}
</style>
  