<template>
  <el-dialog
    title="拾取坐标"
    :visible.sync="dialogTableVisible"
    :before-close="handleClose"
  >

    <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: 65vh" id="container1"></div>

    <el-col :span="8" class="button">
      <el-input id="ss" placeholder="输入地址" v-model="keyWorld" size="small" ></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>
  import gaodeMap from "./js/gaodeMapDialog.js";
  export default {
    props: {
      dialogTableVisible: false,
      slat: 0,
      slng: 0
    },
    data(){
      return{
        lnglat: {
          lat: "",
          lng: ""
        },
        keyWorld: ""
      }
    },
    watch:{
      dialogTableVisible:{
        handler(value) {
          if(value){
            let that = this;
            that.$nextTick(() => {
              //初始化地图
              /*let map = new AMap.Map("container1", {
                center: [114.72995, 38.37417],
                // resizeEnable: true,
                disableSocket: true,
                viewMode: "3D",
                showLabel: true,
                pitch: 8,
                zoom: 12
              });*/
              let gaode = new gaodeMap(process.env.VUE_APP_MAP_CENTER);
              var overlays = [];
              //坐标回显
              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(gaode.myMap);
                gaode.myMap.setCenter([that.slng,that.slat]);
                overlays.push(marker);
              }

              //点击获取坐标点
              var mouseTool = new AMap.MouseTool(gaode.myMap);
              //监听draw事件可获取画好的覆盖物
              mouseTool.on('draw',function(e){
                gaode.myMap.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: gaode.myMap
                });
              });
            })
          }
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true

      }
    },
    methods:{
      confirmFun(){
        this.$emit('confirmFun',this.lnglat);
        this.$emit('dialogcancelFun');
      },
      draw(mouseTool){
        mouseTool.marker({
          //同Marker的Option设置
        });
      },
      handleClose(){
        this.$emit('dialogcancelFun');
      },
      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: absolute;
    top: 140px;
    left: 35px;
  }

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