<template>
  <div>
    <div id="baiduMapCt" style="width:100%;height:360px"></div>
    <p style="color:#666;font-size:12px;line-height:26px;margin-bottom:10px;">提示：可使用鼠标滚轮缩放地图，通过鼠标拖拽拖动地图，可在地图上单击设置地图中心点</p>
      <el-row>
        <el-col :span="8">
            宽度：<el-input-number v-model="dataModel.width" style="width:160px" :step="5" :min="1" :max="99999"></el-input-number>
        </el-col>
        <el-col :span="8">
            高度：<el-input-number v-model="dataModel.height" style="width:160px" :step="5" :min="1" :max="99999"></el-input-number>
        </el-col>
        <el-col :span="8">
            城市：<el-input placeholder="" style="width:160px" v-model="dataModel.city" :disabled="true">
            <el-button slot="append" icon="el-icon-search" @click="show=true">选择城市</el-button>
          </el-input>
        </el-col>
      </el-row>
    <city-selector v-if="show" :show.sync="show" v-model="dataModel.city" @cityPicked="cityPicked"></city-selector>
  </div>
</template>

<script>
/* global BMap _ */
import util from '@src/common/util.js'
import CitySelector from './citySelector.vue'
/* var cityPosition = {
  beijing: {
    lng: 116.403964,
    lat: 39.92283
  },
  shanghai: {
    lng: 121.47551,
    lat: 31.23338
  },
  guangzhou: {
    lng: 113.263416,
    lat: 23.096529
  },
  shenzhen: {
    lng: 114.072897,
    lat: 22.550772
  },
  chongqing: {
    lng: 106.559956,
    lat: 29.56396
  },
  wuhan: {
    lng: 114.272968,
    lat: 30.561573
  },
  changsha: {
    lng: 112.944051,
    lat: 28.231469
  },
  taiyuan: {
    lng: 112.550864,
    lat: 37.890277
  }
} */
export default {
  components: {
    CitySelector
  },
  props: {
    'widgetData': {
      type: Object
    }
  },
  data() {
    return {
      map: null,
      show: false,
      dataModel: {
        width: 320,
        height: 240,
        lng: 116.404,
        lat: 39.915,
        city: 'beijing',
        zoom: 11
      }
    }
  },
  created() {
    _.extend(this.dataModel, this.widgetData)
  },
  async mounted() {
    window.initBaiduMap = this.initBaiduMap
    if (typeof window.BMap === 'undefined') {
      try {
        await util.loadJS('http://api.map.baidu.com/api?v=1.2&callback=initBaiduMap')
      } catch (e) {
        console.error('http://api.map.baidu.com/api is missing', e.toString())
        return null
      }
    } else {
      this.initBaiduMap()
    }
  },
  methods: {
    initBaiduMap() {
      var map
      var marker
      this.map = map = new BMap.Map('baiduMapCt')
      window.projection = new BMap.MercatorProjection()
      map.centerAndZoom(new BMap.Point(this.dataModel.lng, this.dataModel.lat), this.dataModel.zoom)
      this.marker = marker = new BMap.Marker(new BMap.Point(this.dataModel.lng, this.dataModel.lat))
      marker.enableDragging()
      map.addOverlay(marker)
      map.enableScrollWheelZoom()
      map.addEventListener('click', function (e) {
        if (marker !== undefined) {
          map.removeOverlay(marker)
        }
        marker = new BMap.Marker(e.point)
        marker.enableDragging()
        map.addOverlay(marker)
      }, false)
    },
    cityPicked(cityObj) {
      if (this.dataModel.xity !== cityObj.city) {
        this.dataModel.city = cityObj.city
        this.dataModel.zoom = cityObj.level
        this.dataModel.lat = cityObj.point.lat
        this.dataModel.lng = cityObj.point.lng
        this.onCityChange(cityObj)
      }
    },
    onCityChange(cityObj) {
      if (this.map && this.dataModel.city) {
        this.map.centerAndZoom(new BMap.Point(this.dataModel.lng, this.dataModel.lat), this.dataModel.zoom)
        if (this.marker) {
          this.map.removeOverlay(this.marker)
          this.marker = undefined
        }
      }
    },
    validate() {
      return true
    },
    doSubmit() {
      var map = this.map
      if (map) {
        this.dataModel.zoom = map.getZoom()
        if (this.map.getOverlays().length > 0) {
          this.dataModel.lng = map.getOverlays()[0].getPosition().lng
          this.dataModel.lat = map.getOverlays()[0].getPosition().lat
        } else {
          this.dataModel.lng = map.getCenter().lng
          this.dataModel.lat = map.getCenter().lat
        }
      }
      return this.dataModel
    }
  }
}

</script>
