<template>
  <div id="searchMap" style="width:100%;height:550px" ></div>
</template>

<script>
// import L from 'leaflet'
// import {tiledMapLayer} from '@supermap/iclient-leaflet';
// import 'leaflet/dist/leaflet.css'
// import '@supermap/iclient-leaflet'
// import 'leaflet/dist/leaflet'
import data from './data.js'
export default {
  name: 'testMap',
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    // 开启一个监听
    window.addEventListener('click', this.handleMousedown)
    var map;
    // var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
    var url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326';
    map = L.map('searchMap', {
      maxZoom: 25,
      center: [35, 110],
      zoom: 4,
      crs: L.CRS.EPSG4326,
      // crs: L.CRS.EPSG3857, // 取消才会显示mask点位
    })

    // var latlngs = data.geometries[0].coordinates[0];
    // var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
    // map.fitBounds(polyline.getBounds());

    let areaLocal =  JSON.parse(localStorage.getItem('area'));
    let resultLayer,area
    if(!areaLocal){
      resultLayer = L.featureGroup().addTo(map);
      area = data.geometries[0].coordinates[0];
      area = area.map(item => {
        return item.reverse()
      })
      localStorage.setItem('area',JSON.stringify(area))
    } else {
      resultLayer = L.featureGroup().addTo(map);
      area = areaLocal
    }

    // 地图点击触发函数
    map.on('click', function (ev) {
      console.log(ev.latlng);
      // var layer;
      // layer && layer.remove()
      // layer = L.marker(ev.latlng).addTo(map);
      // layer.addTo(map);
    });


    let _this = this;
    var poiSearch = new L.supermap.Components.Search({
      isGeoCoding: !window.isLocal,
      perPageDataNum: 6,  // 每页显示数据个数
      cityConfig: ["赣州市"],
      //设置结果图层样式：
      style: function (feature, latLng) {
        _this.list.push({
          name: feature.properties.name,
          address: feature.properties.address,
          pos: feature.geometry.coordinates,
          lon: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1],
        })
        if (latLng && feature instanceof L.latLng || feature.geometry.type.toLowerCase() === "point") {
          return L.circleMarker(latLng, {
            fillColor: '#0083cb',
            weight: 1,
            opacity: 1,
            color: '#0083cb',
            fillOpacity: 0.6
          });
        }
      }
    });
    poiSearch.addTo(map);
    // 区域框选
    var polygon = L.polygon(area, { color: "red" });
    resultLayer.addLayer(polygon);
    var areaMeasureParam = new L.supermap.MeasureParameters(polygon);
    
    new L.supermap
      .MeasureService(url)
      .measureArea(areaMeasureParam, function (serviceResult) {
        var content = resources.text_area + serviceResult.result.area + resources.msg_sqm;
        polygon.bindPopup(content).openPopup(polygon.getCenter());
      });
    new L.supermap.TiledMapLayer(url).addTo(map);
    this.autoClick()
    // this.query(map,url);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.handleMousedown)
  },
  methods: {
    autoClick() {
      // document.activeElement.id = 'searchMap'
      // document.querySelector('#searchMap').setAttribute('style','transform : scale(' + 0.8 + ')');
      setTimeout(() => {
        document.querySelector('.component-citytabpag__content').click()
      }, 200)
      setTimeout(() => {
        document.querySelector('.component-citytabpag__content > span').click()
      }, 300)
    },
    query(map, url) {
      //查询数据构建示例图层：
      var polygon = L.polygon([[90, 180], [90, -180], [-90, -180], [-90, 180], [90, 180]]); // 添加点位
      var param = new L.supermap.QueryByBoundsParameters({
        queryParams: { name: "Capitals@World.1" },
        bounds: polygon.getBounds()
      });
      new L.supermap
        .QueryService('https://iclient.supermap.io//iserver/services/map-world/rest/maps/World' || url)
        .queryByBounds(param, function (serviceResult) {
          var result = serviceResult.result;
          var resultLayer = L.geoJSON(result.recordsets[0].features, {
            pointToLayer: function (geoJsonPoint, latlng) {
              return L.circleMarker(latlng, {
                fillColor: 'blue',
                weight: 1,
                opacity: 1,
                color: 'blue',
                fillOpacity: 0.6
              });
            },
          }).addTo(map);
          poiSearch.addSearchLayer([new L.supermap.Components.GeoJSONLayerWithName("首都", resultLayer)]);
        });
    },
    handleMousedown(e) {
      let dom = document.querySelector('.component-search__resultitme>.component-search__resultitme-selected').nextElementSibling
      if (dom) {
        let _name = dom.innerText.replace(/(\t|[A-Za-z])/g, '').split('\n')[0]
        let _item = this.list.find(item => {
          return item.name == _name
        })
        if (_item) {
          this.$emit('getMapInfo', _item)
        }
      }
    },
  }
}
</script>
<style scope></style>