<template>
  <div style="height: 450px;margin: -10px;">
    <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height: 98%" @ready="handler">
      <bm-geolocation :show-address-bar="true" :auto-location="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" zoom="10"/>
      <!--<bm-control style="position: relative;width: 3%;height: 100%;"/>-->
    </baidu-map>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import Bus from '@/utils/Bus.js'
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'GIpUncIwoaK7BjBZdrpOs0ytywLippwu'
})

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {
      devices: [],
      center: { lng: 0, lat: 0 },
      zoom: 10,
      BMap: '',
      map: '',
      chart: null
    }
  },
  created() {
    this.getParams()
    this.getDevices()
    // this.GetLiveUrl()
  },
  methods: {
    getDevices() {
      Bus.$on('myFun', (message) => { // 这里最好用箭头函数，不然this指向有问题
        // this.devices = message
        this.center = { lng: message.jd, lat: message.wd }
        this.zoom = 12
      })
    },
    getParams() {
      Bus.$on('devices', (message) => { // 这里最好用箭头函数，不然this指向有问题
        this.devices = message
        if (this.map !== '') {
          this.map.clearOverlays()
        } else {
          console.log('等了1秒')
          setTimeout(this.getParams(), 1000)
          return
        }
        // 循环加入设备
        for (var i = 0; i < this.devices.length; i++) {
          var marker = new this.BMap.Marker(new this.BMap.Point(this.devices[i].jd, this.devices[i].wd)) // 创建点
          var label = new this.BMap.Label(this.devices[i].name, {
            offset: new this.BMap.Size(20, -10)
          })
          label.setStyle({
            // color: '#892B31',
            color: 'grey',
            backgroundColor: '0.05',
            border: '0'
          })
          marker.setTitle(this.devices[i].deviceid)
          marker.setLabel(label)
          /* var _this = this
          marker.addEventListener('click', function(val) {
            _this.deviceid = this.z.title
            _this.loadData()
          })*/
          this.map.addOverlay(marker)
          this.center = { lng: this.devices[i].jd, lat: this.devices[i].wd }
        }
      })
    },
    // 百度地图
    handler({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      const _this = this
      // 黑色主题
      // const mapStyle = { style: 'midnight' }
      // map.setMapStyle(mapStyle)
      /* if (this.isAdd) {*/
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function getinfo(position) {
        if (_this.center.lat === 0) {
          _this.center = { lng: position.longitude, lat: position.latitude }
        }
      }, function(e) {
      }, { provider: 'baidu' })
      // console.log(BMap, map)
      /* this.center.lng = 116.404
        this.center.lat = 39.915
        this.zoom = 15*/
    }
  }
}
</script>
