<template>
  <el-dialog
    title="拾取坐标"
    :visible.sync="dialogTableVisible"
    :show-close="false"
    :close-on-click-modal="false"
  >

    <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>
    <div style="width: 47vw; height: 57vh" id="container"></div>

    <el-col :span="8" class="button">
      <el-input id="ss" placeholder="输入地址" v-model="keyWorld"  ></el-input><el-button size="small" type="primary" icon="el-icon-search" @click="search" style="position: fixed;margin-left: 3px;">搜索</el-button>
    </el-col>

  </el-dialog>
</template>
<script>
  export default {
    props: {
      dialogTableVisible: false,
      slat: 0,
      slng: 0
    },
    data(){
      return{
        lnglat: {
          lat: "",
          lng: ""
        },
        keyWorld: ""
      }
    },
    mounted(){
      let that = this;
      that.$nextTick(() => {
        //初始化地图
        let map = new AMap.Map("container", {
          center: [114.72995, 38.37417],
          // resizeEnable: true,
          disableSocket: true,
          viewMode: "3D",
          showLabel: true,
          pitch: 8,
          zoom: 10
        });
        map.setFitView();

        //坐标回显
        if (typeof that.slng == "number" && that.slng != 0) {
          that.lnglat.lng = that.slng;
          that.lnglat.lat = that.slat;
          let marker = new AMap.Marker({
            position: [that.slng,that.slat]
          });
          marker.setMap(map);
          map.setCenter([that.slng,that.slat]);
        }

        //点击获取坐标点
        var mouseTool = new AMap.MouseTool(map);
        //监听draw事件可获取画好的覆盖物
        var overlays = [];
        mouseTool.on('draw',function(e){
          map.remove(overlays);
          overlays.push(e.obj);
          that.lnglat.lat = e.obj._position.lat;
          that.lnglat.lng = e.obj._position.lng;
        })
        that.draw(mouseTool);

        //搜索功能
        AMap.plugin(["AMap.AutoComplete","AMap.PlaceSearch"], function() {
          that.placeSearch = new AMap.PlaceSearch({
            map: map
          });
        });
      })
    },
    methods:{
      confirmFun(){
        this.$emit('confirmFun',this.lnglat);
        this.$emit('dialogcancelFun');
      },
      draw(mouseTool){
        mouseTool.marker({
          //同Marker的Option设置
        });
      },
      search(){
        this.placeSearch.search(this.keyWorld);  //关键字查询查询
      }
    }
  }

</script>

<style scoped lang="scss">
  .lt{
    margin-bottom: 10px;
  }
  .lt .el-input {
    width: 180px;
    margin-right: 15px;
    display: inline-block;
  }

  .button{
    position: relative;
    top: -393px;
    left: 14px;
  }

  .button .el-input{
    width: 180px;
    margin-right: 10px;
    display: inline-block;
  }
</style>
