<template>
  <div class="auto">
    <button type="button" class="btn btn-default" @click="this.$back('ass')">&lt;&lt;</button>
    <div id="allmap2" :style="mapStyle"></div>
  </div>
</template>

<script>
// because of some weired behavior of baidu map, logic cant be extracted out and factored into a map component

import Vue from 'vue'

export default {
  title: '岗位图',
  props: ['lonlats'],
  data () {
    return {
      mapStyle: {
        width: (this.$parent.$el.clientWidth -30) + 'px',
        height: (this.$parent.$el.clientHeight - 80) + 'px'
      },
      markers : []
    }
  },
  ready () {
    this.lonlats.filter((item) => {
      return item.f_longitude != 0 && item.f_latitude != 0
    }).forEach((item) => {
      this.markers.push({
        longitude: item.f_longitude,
        latitude: item.f_latitude,
        hint: item.f_user_name + '[' + item.f_datetime + ']'
      })
    })
    if(Vue.mapLoaded) {
      this.render()
    } else {
      window.__mapCallback__ = this.mapCallback
      let element = document.createElement('script')
      element.setAttribute("type","text/javascript")
      element.setAttribute("src", 'http://api.map.baidu.com/api?v=2.0&ak=CAErfbr2DatVA6rHdoUELPynrdPh9A6S&callback=__mapCallback__')
      document.body.appendChild(element)
    }
  },
  methods: {
    mapCallback () {
      Vue.mapLoaded = true
      this.render()
    },
    patch () {
      let a = document.getElementById('allmap2').getElementsByClassName('BMap_cpyCtrl BMap_noprint anchorBL')
      if(a.length != 0) {
        a[0].style.height = 'auto'
      } else {
        window.setTimeout(this.patch, 500)
      }
    },
    render () {
      window.map = new BMap.Map("allmap2")
      window.map.clearOverlays();
      if(this.markers.length == 0)
        window.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      else
        window.map.centerAndZoom(new BMap.Point(this.markers[0].longitude, this.markers[0].latitude), 11)
      window.map.addControl(new BMap.NavigationControl())
      this.markers.forEach(function(pos) {
        var point = new BMap.Point(pos.longitude,pos.latitude)
      	var marker = new BMap.Marker(point)  // 创建标注
        var label = new BMap.Label(pos.hint, {offset: new BMap.Size(20, 0)})
        marker.setLabel(label)
        label.setStyle({ border : '0px', padding: '0px'})
      	window.map.addOverlay(marker)              // 将标注添加到地图中
      // 	var infoWindow = new BMap.InfoWindow(pos.hint)  // 创建信息窗口对象
      // 	marker.addEventListener("click", function(){
      // 		window.map.openInfoWindow(infoWindow,point) //开启信息窗口
      // 	})
      })
      this.patch()
    }
  }
}
</script>
