<template>
  <div class="page-map">
    <map id="myMap" class="map"
     :longitude="pageMsg.longitude" :latitude="pageMsg.latitude"
     :markers="pageMsg.markers" :covers="pageMsg.covers" show-location
     @markertap="goDes"
     scale="10">
    </map>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      mapCtx: {},
      pageMsg: {

        longitude: '',
        latitude: '',
        markers: '',
        covers: ''
      }
    }
  },
  computed: {
    ...mapGetters(['user', 'severList'])
  },
  methods: {
    ...mapMutations({
      'setServerPart': 'discoveryServerPart'
    }),
    getLocation () {
      let _this = this
      mpvue.showLoading({
        title: '定位中',
        mask: true
      })
      mpvue.choosePoi({
        type: 'gcj02',
        altitude: true, // 高精度定位
        // 定位成功，更新定位结果
        success: function (res) {
          var latitude = res.latitude
          var longitude = res.longitude
          var speed = res.speed
          var accuracy = res.accuracy

          _this.pageMsg = {
            longitude: longitude,
            latitude: latitude,
            speed: speed,
            accuracy: accuracy
          }
          _this.getMaker()
        },
        // 定位失败回调
        fail: function () {
          mpvue.showToast({
            title: '定位失败',
            icon: 'none'
          })
        },

        complete: function () {
        // 隐藏定位中信息进度
          mpvue.hideLoading()
        }

      })
    },
    goDes (e) {
      let _id = e.mp.markerId
      let item = this.severList.find(n => {
        return n.ServerPart_Id === _id
      })
      this.setServerPart(item)
      mpvue.switchTab({url: '/pages/discovery/main'})
    },
    getMaker () {
      let _this = this
      let markers = []
      _this.severList.map(n => {
        // if (n.Distance < 50) {
        markers.push({
          // iconPath: 'https://eshangtech.com/ShopICO/icos/fwq-ico.png',
          id: n.ServerPart_Id,
          latitude: n.ServerPart_Y,
          longitude: n.ServerPart_X,
          title: n.ServerPart_Name,
          callout: {
            content: n.ServerPart_Name,
            bgColor: '#fff',
            padding: '6',
            borderRadius: '4',
            borderColor: '#f0f0f0',
            display: 'ALWAYS'
          }
        })
        // }
      })
      _this.pageMsg.markers = markers
    }
  },
  onLoad () {
    this.mapCtx = mpvue.createMapContext('myMap')
    this.getLocation()
    this.$utils.addUserBehaviorNew();
  }
}
</script>

<style lang="stylus" scoped>
.page-map
  height 100%
.map
  width 750rpx
  height 100%
</style>
