<template>
   <div id='map' style='width: 100%; height: 106%;'></div>


</template>

<script>
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
 
export default {
  name: "AreaCalc",
  props: ["status"],
  data() {
    return {
      currentLocation: [],
      currentLocationList: [],
      isDiaPoint: false,
      area: 0,
      surePolygon: null,
      center:[117.94214891969796, 35.294152309532066]
    }
  },
  watch: {
    status: function (e) {
      console.log('watch',e)
      if(e == 'dot'){
         this.isDiaPoint = true
      }
      if(e == 'clear'){
        this.clearMap()
      }
    }
  },
  created() {
     
  },
  mounted() {   
    this.loadMap().then((map) => {
      this.map = map
      // this.loadGaoQingLayer()
    })
  },
  methods: {
    cancel(){
      this.$emit("pointCancel")
    },
    loadMap() {
      return new Promise(resolve => {
        mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ"
        let map = new mapboxgl.Map({
          container: 'map',
          style: {
            glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            "version": 8,
            "sources": {
              "raster-tiles": {
                "type": "raster",
                "tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
                "tileSize": 256,
              },
              "raster-tiles-l": {
                "type": "raster",
                "tiles": ['https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
                "tileSize": 256,
              }
            },
          "layers": [{
              "id": "tdt-img-tiles",
              "type": "raster",
              "source": "raster-tiles",
              "minzoom": 0,
              "maxzoom": 22
            },{
              "id": "tdt-img-tiles-l",
              "type": "raster",
              "source": "raster-tiles-l",
              "minzoom": 0,
              "maxzoom": 22
            }]
          },
          zoom: 15,
          maxZoom: 17,
          // minZoom: 11,
          center: this.center
        })
        map.on('load', function () {
          resolve(map)
        });
        map.on('click', e=>{
         if(this.isDiaPoint){
            this.addPoint(e.lngLat)
         }
       })
      })
    },
    loadGaoQingLayer() {
      this.map.addLayer({
        'id': 'gaoqingyingxiang',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
          'tileSize': 256
        },
        'layout': {
          'visibility': 'visible'
        },
        'paint': {

        }
      });
    },
    
    addPoint(e) {
      this.isDiaPoint = false
      this.$emit("backLngLat",e)
      this.currentLocation = [
        e.lng,
        e.lat,
      ]
      this.currentLocationList.push(this.currentLocation)
      let pointId = `point-${String(this.currentLocation[0]).split('.')[1]}`
      this.pointId = pointId
      if (this.map.getSource(pointId) !== undefined) {
        this.map.removeLayer(pointId)
        this.map.removeSource(pointId)
      }
      this.map.addSource(pointId, {
        "type": "geojson",
        "data": {
          "type": "Point",
          "coordinates": this.currentLocation
        }
      });
      console.log('pointId',pointId)
      this.drawPoint(pointId)
    },
    drawPoint(pointId) {
      this.map.addLayer({
        "id": pointId,
        "source": pointId,
        "type": "circle",
        'paint': {
          'circle-color': "#f00",
          'circle-radius': 5
        },
      });
    },
 
    
    clearMap() {
      let _this = this
 
      if (this.map.getSource('maine') !== undefined) {
        this.map.removeLayer('maine')
        this.map.removeSource('maine')
      }
      if (this.map.getSource('p-lines') !== undefined) {
        this.map.removeLayer('p-lines')
        this.map.removeSource('p-lines')
      }
      this.currentLocationList.forEach(e => {
        let pointId = `point-${String(e[0]).split('.')[1]}`
        if (this.map.getSource(pointId) !== undefined) {
          this.map.removeLayer(pointId)
          this.map.removeSource(pointId)
        }
      })
      this.currentLocationList = []
      this.currentLocation = []
      this.area = 0
    }
    
  }
}
</script>

<style scoped>

</style>