<template>
  <div>
    <div id="map-container" ref="view" style="width: 100%; height: 100%"/>
    <slot/>
  </div>
</template>

<script>
import bindEvents from 'vue-baidu-map/components/base/bindEvent.js'
import { checkType } from 'vue-baidu-map/components/base/util.js'

export default {
  name: 'BaiduMap',
  props: {
    center: {
      type: Object,
      required: true
    },
    zoom: {
      type: Number,
      default: 10
    },
    minZoom: {
      type: Number,
      default: 5
    },
    maxZoom: {
      type: Number,
      default: 19
    },
    vid: {
      type: String,
      default: ''
    }
  },
  watch: {
    center(val, oldVal) {
      const { map, zoom } = this
      if (checkType(val) === 'String' && val !== oldVal) {
        map.centerAndZoom(val, zoom)
      }
    },
    'center.lng'(val, oldVal) {
      const { BMap, map, zoom, center } = this
      if (val !== oldVal && val >= -180 && val <= 180) {
        map.centerAndZoom(new BMap.Point(val, center.lat), zoom)
      }
    },
    'center.lat'(val, oldVal) {
      const { BMap, map, zoom, center } = this
      if (val !== oldVal && val >= -74 && val <= 74) {
        map.centerAndZoom(new BMap.Point(center.lng, val), zoom)
      }
    },
    zoom(val, oldVal) {
      const { map } = this
      if (val !== oldVal && val >= 3 && val <= 19) {
        map.setZoom(val)
      }
    },
    minZoom(val) {
      const { map } = this
      map.setMinZoom(val)
    },
    maxZoom(val) {
      const { map } = this
      map.setMaxZoom(val)
    }
  },
  mounted() {
    // this.initMap()
    this.reset()
  },
  methods: {
    // 地图配置
    // setMapOptions() {
    //   const { map, minZoom, maxZoom } = this
    //   minZoom && map.setMinZoom(minZoom)
    //   maxZoom && map.setMaxZoom(maxZoom)
    // },
    getCenterPoint() {
      const { center } = this
      switch (checkType(center)) {
        case 'String': return center
        case 'Object': return new BMap.Point(center.lng, center.lat)
        default: return new BMap.Point()
      }
    },
    getMapScript() {
      // 如果BMap不存在
      if (!global.BMap) {
        global.BMap = {}
        global.BMap._preloader = new Promise((resolve, reject) => {
          global._initBaiduMap = function() {
            resolve(global.BMap)
            // global.document.body.removeChild($script)
            global.BMap._preloader = null
            global._initBaiduMap = null
          }
          // const $script = document.createElement('script')
          // global.document.body.appendChild($script)
          // $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
        })
        return global.BMap._preloader
      } else if (!global.BMap._preloader) {
        return Promise.resolve(global.BMap)
      } else {
        return global.BMap._preloader
      }
    },
    reset() {
      // const { getMapScript, initMap } = this
      // getMapScript()
      //   .then(initMap)
      this.init()
    },
    // initMap(BMap) {
    //   this.BMap = BMap
    //   this.init(BMap)
    // },
    init() {
      // if (this.map) {
      //   return
      // }
      this.BMap = window.BMap
      let $el = this.$refs.view
      for (const $node of this.$slots.default || []) {
        if ($node.componentOptions && $node.componentOptions.tag === 'bm-view') {
          this.hasBmView = true
          $el = $node.elm
        }
      }
      const mapOptions = {
        minZoom: this.minZoom, // 地图最小层级
        mapType: BMAP_NORMAL_MAP
      }
      const map = new BMap.Map($el, mapOptions)
      this.map = map
      const { zoom, getCenterPoint } = this
      // setMapOptions()
      bindEvents.call(this, map)
      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
      map.reset()
      map.centerAndZoom(getCenterPoint(), zoom)
      map.enableScrollWheelZoom() // 启用滚轮放大缩小。
      map.enableContinuousZoom() // 启用连续缩放效果

      // ----- control -----
      // map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
      // map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
      // map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true })) // 缩略图控件
      this.$emit('ready', { BMap, map })
      // Debug
      // global.map = map
      // global.mapComponent = this
    }
    // initMap() {
    //   // var BMap = window.BMap
    //   const mapOptions = {
    //     minZoom: this.minZoom, // 地图最小层级
    //     mapType: BMAP_NORMAL_MAP
    //   }
    //   var map = new BMap.Map('map-container', mapOptions) // 设置卫星图为底图BMAP_PERSPECTIVE_MAP
    //   var initPoint = new BMap.Point(this.center[0], this.center[1]) // 创建点坐标
    //
    //   map.centerAndZoom(initPoint, this.zoom) // 初始化地图,设置中心点坐标和地图级别。
    //   map.enableScrollWheelZoom() // 启用滚轮放大缩小。
    //   map.enableContinuousZoom() // 启用连续缩放效果
    //
    //   // ----- control -----
    //   // map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
    //   // map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
    //   map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true })) // 缩略图控件
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  #map-container {
    width: 100%;
    height: 100%;
    .alarm-window {
      max-width: 250px;
      /*background-color: #ffeaf1;*/
      .alarm-header {
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        color: red;
        font-weight: bold;
        /*background-color: #ffecec;*/
      }
      .alarm-body {
        padding: 5px 10px 10px 10px;
        line-height: 23px;
        font-size: 14px;
        .alarm-red {
          color: #ff0000;
        }
      }
    }
  }
</style>