<template>
  <div class="my-space" id="env">
    <map-box class="map-content"
             ref="mapRef"
             @changeSpaceId="changeSpaceId"
             @delPermanentSpace="delPermanentSpace"
             :isSetSpace="true"
             v-if="spaceInfo"
             :spaceInfo="spaceInfo"
             :projectId="userInfo.projectId"
             id="map"
    ></map-box>
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue'
import MapBox from '@/views/envmonitor/components/Map/MapBox.vue'
import { useRoute } from 'vue-router'
import { store } from '@/store'
import { delPermanentSpace, getPermanentSpace, permanentSpace } from '@/apis/envmonitor'
import { Toast, Notify } from 'vant'
import { useRouter } from 'vue-router'
import { setQueryConfig } from '@/utils'

export default defineComponent({
  components: {
    MapBox
  },
  setup(props, contx) {
    let mapRef: any = {}
    const router = useRouter()
    const spaceInfo: any = null
    let route: any = useRoute()
    const proxyData = reactive({
      mapRef: mapRef,
      showSecenDetailDalig: false,    // 是否展示场景详情页面
      spaceInfo: spaceInfo,
      userInfo: store.state.user,
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true
        })
      },
      /**
       * 结束
       */
       loadinngEnd() {
        Toast.clear()
      },
      /**
       *  获取常驻空间
       */
      getPermanentSpace() {
        proxyData.loadingStart()
        getPermanentSpace().then(res => {
          let resResult: any = res
          if (resResult.result === 'success') {
            proxyData.spaceInfo = resResult.data
          } else {
            proxyData.spaceInfo = null
          }
          proxyData.loadinngEnd()
        }).catch(() => {
          proxyData.spaceInfo = null
          proxyData.loadinngEnd()
        })
      },
      /**
       * 取消默认空间
       * @param id
       */
      delPermanentSpace(id: any) {
        let params = { id: proxyData.spaceInfo.id }
        let str: any = setQueryConfig(params)
        delPermanentSpace(str).then(res => {
          let resData: any = res
          if (resData.result === 'success') {
            Toast('取消设置成功')
            proxyData.getPermanentSpace()
            proxyData.mapRef.selectArea = {}
          } else {
            Toast('取消设置失败')
          }
        })
      },
      changeSpaceId(spaceId: any) {
        let params: any = {
          spaceId: spaceId,
          userId: proxyData.userInfo.userId,
          projectId: proxyData.userInfo.projectId
        }
        proxyData.loadingStart()
        permanentSpace(params).then(res => {
          let resData: any = res
          if (resData.result === 'success') {
            proxyData.loadinngEnd()
            router.push({
              path: '/envmonitor'
              // query: { showSpaceTip: 'true' }
            })
          } else {
            proxyData.loadinngEnd()
            Toast(resData.message)
            // 提示后调子组建的方法清除选中
          }
        }).catch(() => {
          proxyData.loadinngEnd()
        })
      }
    })
    onBeforeMount(() => {
      proxyData.getPermanentSpace()
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
.my-space {
  //position: relative;
  width: 100%;
  height: 100%;
  background: #EAEAEA;
  //overflow: hidden;

  .map-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    //overflow: scroll;
    overflow: hidden;
    z-index: 222;
    background: #f7f8fa;
  }
}
</style>
