<template>
  <div class="h-100">
    <map-box v-if="showMapbox" :key="mapboxKey" ref="mapbox" :enableNofly="true" />
  </div>
</template>

<script>
import MapBox from '@/components/MapBox'

export default {
  name: 'Nofly',
  components: {
    MapBox
  },
  data () {
    return {
      showMapbox: true, // 数据更新的时候 用于刷新地图组件
      mapboxKey: 0 // 初始化一个变量用于控制map-box组件的重新渲染
    }
  },
  computed: {
    noflyData () {
      return this.$store.state.noflyData
    },
    isCollapse () {
      return this.$store.state.app.isCollapse
    }
  },
  methods: {

  },
  mounted () {
  },
  watch: {
    noflyData: {
      deep: true,
      immediate: true,
      handler () {
        this.showMapbox = false
        this.$nextTick(() => {
          this.mapboxKey++
          this.showMapbox = true
        })
      }
    },
    /**
     * @description: 侧边栏缩进有变化时 地图重新自适应
     */
    isCollapse: {
      handler (val) {
        if (val) {
          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.mapbox.handleResize()
            })
          }, 500)
        }
      },
      deep: true
    }
  }
}

</script>

<style scoped></style>
