import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ViewerService } from 'src/app/services';

@Component({
  selector: 'app-layer-manager',
  templateUrl: './layer-manager.component.html',
  styleUrls: ['./layer-manager.component.css']
})
export class LayerManagerComponent implements OnInit {

  public layersStore = [
    {
      name: '黄石海事倾斜',
      url: 'http://172.16.126.125:8090/qlhtest/huangshihaishi/010202ban_qlh/tileset.json',
      type: smart3d.LayerTypeMode.IMAGERY
    },
    {
      name: '测绘大楼分层模型',
      url: 'http://www.south-smart.com/w3d-data/modeldata/nanfangcehuiBIM/NFCH0911/CHDLFC/tileset.json',
      type: smart3d.LayerTypeMode.MODEL
    },
    {
      name: '南昌林业点云服务',
      url: 'http://www.south-smart.com/w3d-data/modeldata/nanchanglinye/tileset.json',
      type: smart3d.LayerTypeMode.POINTCLOUD
    },
    {
      name: 'UTM51DOM服务（WMTS）',
      url: 'http://172.16.10.221:8080/geoserver/gwc/service/wmts?layer=gwth:UTM51DOM',
      type: smart3d.LayerTypeMode.WMTS
    },
    {
      name: '甘肃联通植被控制点服务',
      url: 'http://www.south-smart.com/w3d-data/modeldata/gansuliantong/vector/zbpoint/zbpoint.json',
      type: smart3d.LayerTypeMode.VECTOR,
      vectorStyle: new smart3d.VectorStyle({
        fillColor: '#FF0000'
      })
    },
    {
      name: '甘肃联通其它道路服务',
      url: 'http://www.south-smart.com/w3d-data/modeldata/gansuliantong/vector/road_QT/road_QT.json',
      type: smart3d.LayerTypeMode.VECTOR,
      vectorStyle: new smart3d.VectorStyle({
        lineColor: '#FF0000',
        lineWidth: 5
      })
    }
  ];
  public currentLayerName = this.layersStore.length > 0 ? this.layersStore[0].name : '';

  @ViewChild('dialog', { static: false }) dialog: ElementRef;
  public addLayerStore = {
    url: '',
    name: '',
    type: '',
  };
  public LayerTypeMode = smart3d.LayerTypeMode;

  constructor(
    private viewerService: ViewerService,
  ) { }

  ngOnInit() {
    for (const layerStore of this.layersStore) {
      const layer = new smart3d.Layer({
        ...layerStore,
      });
      this.viewerService.addLayer(layer);
    }
    this.viewerService.currentLayerNameChange.emit(this.currentLayerName);
  }

  /**
   * 定位到当前图层，依赖于 this.currentLayerName
   */
  locatingLayer(): void {
    this.viewerService.flyToLayerByName(this.currentLayerName);
  }

  addLayer() {
    if (typeof this.dialog.nativeElement.showModal === 'function') {
      this.dialog.nativeElement.showModal();
    } else {
      alert('你的浏览器不支持 dialog API。');
    }
  }

  confirmAddLayer(type: 'canceled' | 'confirmed') {

    if (type === 'confirmed') {
      if (Object.values(this.addLayerStore).some(v => v  === '')) {
        alert('图层名、图层 URL 或图层类型不能为空');
        return;
      }

      this.dialog.nativeElement.close();

      try {
        this.viewerService.addLayer({ ...this.addLayerStore });
        this.layersStore.push({ ...this.addLayerStore });
      } catch (e) {
        alert(e.message);
      }
    } else if (type === 'canceled') {
      this.dialog.nativeElement.close();
    }
  }

  removeLayer() {
    this.viewerService.removeLayerByName(this.currentLayerName);

    const layerIndex = this.layersStore.findIndex(layer => layer.name === this.currentLayerName);
    this.layersStore.splice(layerIndex, 1);
  }

  toggleLayerShow() {
    this.viewerService.toggleLayerShow(this.currentLayerName);
  }

  handleCurrentLayerNameChange(): void {
    this.viewerService.currentLayerNameChange.emit(this.currentLayerName);
  }

}
