<template>
  <div class="map-home map-home-pading">
    <!-- <div class="map-title">可调空间</div> -->
    <div class="map-top">
      <span :class="type == 1 ? 'span-active' : ''" @click="checkMapType(1)"
        >列表</span
      >
      <span :class="type == 2 ? 'span-active' : ''" @click="checkMapType(2)"
        >地图</span
      >
    </div>
    <map-box
      v-if="type === 2"
      :mapType="1"
      :spaceData="spaceData"
      :projectId="projectId"
      :floorId="floorId"
      :spaceInfo="spaceInfo"
      :buildingId="buildingId"
      @changeSpace="changeSpace"
    ></map-box>
    <space-box
      v-if="type === 1"
      :spaceData="spaceData"
      :spaceInfo="spaceInfo"
      @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();
    let showMap: any = null;
    const store = useStore();
    const proxyData = reactive({
      type: 1,
      spaceData: props.spaceData,
      showMap: showMap, // 是否展示地图
      // 切换空间
      changeSpace(item: any) {
        contex.emit("changeSpace", item, 1);
      },
      buildingId: props.buildingId,
      floorId: props.floorId,
      spaceInfo: props.spaceInfo,
      checkMapType(type: any) {
        proxyData.type = type;
      },
      /**
       * 获取地图信息
       */
      getMapInfo() {
        let params: any = {
          projectId: props.projectId,
          floorId: proxyData.floorId,
        };
        getMapInfo(params)
          .then((res) => {
            // debugger
            let resData: any = res;
            if (resData.result === "success") {
              let data: any = resData?.data ?? null;
              // debugger
              if (data && data.spaceList && data.spaceList.length) {
                proxyData.showMap = true;
              } else {
                proxyData.showMap = false;
              }
            } else {
              proxyData.showMap = false;
            }
          })
          .catch(() => {
            proxyData.showMap = false;
          });
      },
    });
    onMounted(() => {
      proxyData.getMapInfo();
    });
    watch(
      props,
      (newProps: any) => {
        proxyData.spaceData = newProps.spaceData;
        proxyData.buildingId = newProps.buildingId;
        proxyData.floorId = newProps.floorId;
        proxyData.spaceInfo = newProps.spaceInfo;
        // proxyData.getMapInfo();
      },
      {
        deep: false,
        immediate: true,
      }
    );
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  <style lang="scss" scoped>
.map-home {
  width: 100%;
  height: 100%;
  background: $elBg;
  .map-title {
    position: fixed;
    padding-top: 5px;
    padding-left: 20px;
    width: 160px;
    left: 0px;
    top: 30%;
    z-index: 333;
    border-radius: 10px;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 31px;
    /* identical to box height */
    color: #646c73;
  }
  .map-top {
    position: fixed;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
    // width: 160px;
    left: 0px;
    top: 30%;
    z-index: 333;
    border-radius: 10px;
    text-align: right;
    background: $elBg;
    span {
      width: 80px;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      background: #fff;
      display: inline-block;
    }
    .span-active {
      // border-radius: 5px;
      background: $elCircle;
      color: #fff;
    }
  }
}
.map-home-pading {
  padding-top: 30px;
}
</style>
  