<template>
  <div class="mapwrap">
    <el-dialog
      title="拾取坐标"
      :visible.sync="dialogTableVisible"
      :show-close="false"
      :close-on-click-modal="false"
      id="mapcnt"
    >
      <el-row class="lt">
        经纬度:
        <el-input placeholder="经度" v-model="lnglat.lng" type="number"></el-input>
        <el-input placeholder="纬度" v-model="lnglat.lat" type="number"></el-input>
        <el-button type="primary" size="small" @click="confirmFun">确定</el-button>
        <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
      </el-row>
      <el-row>
        <div id="mapContainer">
          <el-amap-search-box
            class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          ></el-amap-search-box>
          <el-amap
            ref="map"
            vid="amapDemo"
            :center="mapCenter"
            :zoom="zoom"
            :events="events"
            class="amap-demo"
          >
            <el-amap-marker
              v-for="(item,index) in marker"
              :vid="index"
              :key="index"
              :position="item.position"
            ></el-amap-marker>
          </el-amap>
          <!-- <el-amap ref="map" vid="amap-vue" :center="mapCenter" :events="events"  :zoom="zoom" class="amap-box" >
            <el-amap-marker v-for="(item,index) in marker" :vid="index" :position="item.position"></el-amap-marker>
          </el-amap>-->
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>
<style lang="scss">
#mapcnt .el-dialog {
  width: 90% !important;
}

.el-cascader {
  width: 100%;
}

.lt .el-input {
  width: 180px;
  margin-right: 15px;
  display: inline-block;
}

#mapContainer {
  width: 100%;
  height: 400px;
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}

.el-vue-amap-container {
  width: 100%;
  height: 100%;
}

.search-box {
  position: absolute !important;
  top: 10px;
  left: 10px;
}

#searchbar input {
  padding: 5px;
  border: 1px solid royalblue;
  border-radius: 5px;
  min-width: 150px;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class Mapdialog extends Vue {
  @Prop(Number) slat!: Number;

  @Prop(Number) slng!: Number;

  @Prop(Boolean) dialogTableVisible!: Boolean;

  @Provide() zoom: Number = 12;
  @Provide() lnglat: any = {
    lng: 0,
    lat: 0
  };

  @Provide() searchOption: Object = {
    city: "新乐市",
    citylimit: true
  };
  @Provide() mapCenter: any = [114.72995, 38.37417];

  @Provide() marker: any = [];

  @Provide() mapvisible: Boolean = true;

  @Provide() events: Object = {
    click: (e: any) => {
      this.addMarker(e.lnglat.lng, e.lnglat.lat);
      this.mapCenter = [e.lnglat.lng, e.lnglat.lat];
      this.lnglat.lng = e.lnglat.lng;
      this.lnglat.lat = e.lnglat.lat;
    }
  };
  addMarker(lng: any, lat: any) {
    let obj = {
      position: [lng, lat]
    };
    this.marker = [];
    this.marker.push(obj);
  }
  onSearchResult(pois: any) {
    let latSum = 0;
    let lngSum = 0;
    this.marker = [];
    if (pois.length > 0) {
      pois.forEach((poi: any) => {
        let { lng, lat } = poi;
        lngSum += lng;
        latSum += lat;
        this.marker.push({
          position: [poi.lng, poi.lat]
        });
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      };
      this.mapCenter = [center.lng, center.lat];
    }
  }
  mapClick() {
    alert("dfjgk");
  }
  confirmFun() {
    this.$emit("dialogcancelFun");
    this.$emit("confirm", { lng: this.lnglat.lng, lat: this.lnglat.lat });
  }
  cancel() {}
  created() {
    if (typeof this.slng == "number" && this.slng != 0) {
      this.mapCenter = [this.slng, this.slat];
      this.lnglat.lng = this.slng;
      this.lnglat.lat = this.slat;
      this.addMarker(this.slng, this.slat);
    }
  }
}
</script>