<template>
  <div>


    
    <div class="input-card" style="width: 500px" v-if="isEdit">
      <el-button type="primary" class="btn" @click="clickmap()" style="margin-bottom: 5px">绘制点</el-button>
      <el-button type="danger" class="btn" @click="removeMarker()" style="margin-bottom: 5px">清除点</el-button>
      <el-button type="primary" class="btn" @click="openPoly()" style="margin-bottom: 5px">绘制面</el-button>
      <el-button type="success" class="btn" @click="closePoly()" style="margin-bottom: 5px">结束面</el-button>
      <el-button type="danger" class="btn" @click="clearPoly()">清空</el-button>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
 
export default {
  name: 'AMapPolygon2_0',
  props: {
    name: {
      type: String,
      default: function() {
        return ''
      }
    },
    isEdit: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    areas: {
      type: Array,
      default: function() {
        return []
      }
    },
    center: {
      type: Array,
      default: function() {
        return [121.59996, 31.197646]
      }
    },
    // lnglat: {
    //   type: Array,
    //   default: function() {
    //     return []
    //   }
    // },
  },
  data() {
    return { polyEditor: null, polygonPaths: [], map: null, polygons: [],lnglat:[],markers:[],markArray:[] }
  },
  watch: {},
  mounted() {
    this.init()
    
  },
  methods: {
    async init() {
      await this.initMap()
      this.initAreas()
      if (this.isEdit) {
        this.initPoly()
      }
    },
    async initMap() {
      let AMap = await AMapLoader.load({
        key: '9b9c04d2714e93c08fd240ad35d0f20a',
        version: '2.0',
        plugins: [
          'AMap.PolygonEditor',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.PolyEditor',
          'AMap.CircleEditor',
          'AMap.Geolocation',
          'AMap.Geocoder',
          'AMap.AMapUI']
 
      })
      this.map = new AMap.Map('container', {
        center: this.center,
        zoom: 12,
        plugin: [   //一些工具插件
          {
            pName: 'MapType',  //地图类型
            defaultType: 0,
            events: {
              init(instance) {
              }
            }
          }
        ]
      })
      // 缩放地图到合适的视野级别
      this.map.setFitView()
      //点击标记
    },
    initAreas() {
      for (let i = 0; i < this.areas.length; i++) {
        let area = this.areas[i]
        let path = []
        for (let j = 0; j < area.length; j++) {
          path.push([area[j].lng, area[j].lat])
        }
        if (path.length <= 0) {
          continue
        }
        var polygon = new AMap.Polygon({
          path: path,
          strokeColor: 'green',
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          zIndex: 50,
          bubble: true
        })
        this.polygons.push(polygon)
      }
      if (this.polygons.length <= 0) {
        return
      }
      //地图上新增矢量多边形
      this.map.add(this.polygons)
    },
    initPoly() {
      if (this.polygons.length > 0) {
        this.polyEditor = new AMap.PolygonEditor(this.map, this.polygons[0])
      } else {
        this.polyEditor = new AMap.PolygonEditor(this.map)
      }
      // this.polyEditor.open()
      let _this = this
      //关闭多边形编辑polygonEditor.close()触发该方法；
      this.polyEditor.on('end', function(event) {
        // event.target 即为编辑后的多边形对象,event.target.getPath()得到编辑完成后的点数组
        let pointArr = event.target.getPath()
        this.polygonPaths = []
        for (let i = 0; i < pointArr.length; i++) {
          this.polygonPaths.push({ lat: pointArr[i].lat, lng: pointArr[i].lng })
        }
        _this.$emit('getPolygonMap', this.polygonPaths)
          console.log('polygonPaths', this.polygonPaths)
      })
    },
    openPoly() {
      this.$emit('clearPolygonMap')
       this.map.destroy()
       this.init()
       this.reset()
      setTimeout(()=> {
        this.polyEditor.open()
        this.map.remove(this.markers);
        this.map.off("click", this.clickMapHandler);
      },10)
      // this.reset()
    },
    closePoly() {
      this.polyEditor.close()
    },
    clearPoly() {
      this.$emit('clearPolygonMap')
      this.map.destroy()
      this.reset()
      this.init()
    },
    reset() {
      this.polyEditor = null
      this.polygonPaths = []
      this.map = null
      this.polygons = []
    },
    //绘制点
    clickmap(){ 
      this.map.destroy()
      this.init()
      // this.$emit('clearPolygonMap')
      setTimeout(()=> {
      this.map.remove(this.markers);
       this.map.on("click", this.clickMapHandler);
      },100)
    },
    //标记
    clickMapHandler(e) {
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
         this.setMarker(this.lnglat);
},
//  添加标记
setMarker(lnglat) {
  console.log("位置", lnglat); // lnglat=[经度,纬度]
  this.markArray.push(lnglat)
  let marker = new AMap.Marker({
    position: lnglat,
  });
  marker.setMap(this.map);
  this.markers.push(marker); // 在data中记录标记点
  this.$emit('getmarkers',lnglat)
},
// 删除之前后的标记点
removeMarker() {
// 判断是否存被标记的点，有--->移除
  if (this.markers) {
    this.map.remove(this.markers);
     this.map.off("click", this.clickMapHandler);
     this.$emit('getmarkers',[])
  }
},
  }
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 380px;
}
</style>