<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.number="lnglat.lng"
          type="number"
        ></el-input>
        <el-input
          placeholder="纬度"
          v-model.number="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">
          <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import { toLonLat } from "ol/proj";
@Component({
  components: {
    Search,
  },
})
export default class Mapdialog extends Vue {
  @Provide() MAP: any;
  @Provide() Mutil: any;
  @Provide() mapLoadDone = false;

  @Prop(Number) slat!: Number;

  @Prop(Number) slng!: Number;

  @Prop(Boolean) dialogTableVisible!: Boolean;

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

  mapClick() {
    let that = this;
    that.MAP.on("click", function (evt: any) {
      let lnglat = toLonLat(evt.coordinate);
      that.Mutil.removeSearchm("pickLngLat");
      that.Mutil.addMarkerToMap(
        "pickLngLat",
        "",
        require("@/assets/mark/pk.png"),
        lnglat,
        0.5
      );
      that.lnglat.lng = Number(lnglat[0].toPrecision(10));
      that.lnglat.lat = Number(lnglat[1].toPrecision(10));
    });
  }
  confirmFun() {
    this.$emit("dialogcancelFun");
    this.$emit("confirm", {
      lng: this.lnglat.lng,
      lat: this.lnglat.lat,
    });
  }
  cancel() {}
  mounted() {
    let that = this;
    that.$nextTick(() => {
        that.Mutil = new Mutil("mapContainer");
        that.MAP = that.Mutil.MAP;
        that.mapLoadDone = true;
        if (typeof that.slng == "number" && that.slng != 0) {
          that.lnglat.lng = that.slng;
          that.lnglat.lat = that.slat;
          that.Mutil.addMarkerToMap(
            "pickLngLat",
            "",
            require("@/assets/mark/pk.png"),
            [that.slng, that.slat],
            0.5
          );
          that.Mutil.setViewF({
            center: [that.slng, that.slat],
            zoom: 16,
          });
        }
        that.mapClick();
      });
  }
}
</script>

<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: 450px;
  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>
