<template>
  <el-dialog title="选择坐标"
             fullscreen
             v-model="dialogVisible">
    <el-row>
      <div class="amap-page-container">
        <el-amap-search-box class="search-box"
                            :on-search-result="onSearchResult"
                            :center="center"></el-amap-search-box>
        <el-amap :vid="'amap-vue'"
                 :zoom="zoom"
                 :center="center"
                 :events="events">
          <el-amap-marker :position="marker.position"
                          :events="marker.events"
                          :visible="marker.visible"
                          :draggable="marker.draggable"></el-amap-marker>
        </el-amap>
      </div>
    </el-row>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  //https://elemefe.github.io/vue-amap
  export default {
    data() {
      return {
        q: '',
        zoom: 14,
        center: [116.602489, 40.080734],
        marker: {
          position: [116.602489, 40.080734],
          //events: {
          //    click: () => {
          //        alert('click marker');
          //    },
          //    dragend: (e) => {
          //        this.marker.position = [e.lnglat.lng, e.lnglat.lat];
          //    }
          //},
          visible: true,
          draggable: false
        },
        events: {
          click: (e) => {
            this.marker.position = [e.lnglat.lng, e.lnglat.lat]
          }
        },
        dialogVisible: false
      }
    },
    methods: {
      open(lng, lat) {
        if (lng && lat) {
          this.center = [lng, lat]
          this.marker.position = [lng, lat]
        }

        this.dialogVisible = true
      },
      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        pois.forEach(poi => {
          lngSum += poi.lng;
          latSum += poi.lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
      },
      submit() {
        this.$emit('callback', this.marker.position)
        this.dialogVisible = false
      }
    }
  }
</script>

<style>
  .amap-page-container {
    margin-top: -50px;
    width: 100%;
    height: 450px;
  }

  .search-box {
    margin-top: 0px;
    position: relative;
    top: 65px;
    left: 20px;
  }
</style>