import { ElementRef } from '@angular/core';
import { fabric } from 'fabric';

export class MonitorCanvas {


  private _canvas: fabric.Canvas;
  private _index: { [key: number]: any } = {};
  private _transform: any;

  public colors: { [key: string]: string } = {
    //颜色设置 https://blog.csdn.net/singit/article/details/49179643   king
    seashell: '#FFF5EE',
    burlywood: '#DEB887',
    sienna: '#A0522D',
    SaddleBrown: '#8B4513',
    darkblue: '#0000aa',
    blue: '#1e88e5',
    gray: '#90a4ae',
    green: '#0f0',//#4caf50
    red: '#f00',//  #d50000
    yellow: '#ffb74d',
    darkgreen: '#225B28',
    violet: '#9900CC',
    GradientInactiveCaption: '#40d1ff',//#B9D1EA
    darkorange: '#FF8C00',
    gold: '#FFD700',
    mediumvioletred: '#C71585',
    Yking: '#FFD700'
  }

  public get object() {
    return this._index;
  }

  public get canvas() {
    return this._canvas;
  }

  public get transform() {
    return this._transform;
  }

  public init(map: ElementRef): Promise<void> {
    map.nativeElement.firstChild.width = screen.width;
    map.nativeElement.firstChild.height = screen.height;
    return new Promise(resolve => {
      setTimeout(() => {
        this._canvas = new fabric.Canvas('map', { selection: false });
        const scale = map.nativeElement.clientWidth / 1650;
        this._canvas.zoomToPoint(new fabric.Point(0, 0), scale);
        this._canvas.relativePan(new fabric.Point(0, (map.nativeElement.clientHeight - 500 * scale) / 2));
        this._transform = this._canvas.viewportTransform;

        let panning = false;
        this._canvas.on('mouse:down', () => panning = true);
        this._canvas.on('mouse:up', () => panning = false);
        this._canvas.on('mouse:move', (e: any) => panning && e && e.e && this._canvas.relativePan(new fabric.Point(e.e.movementX, e.e.movementY)));
        this._canvas.on('mouse:wheel', (e: any) => e && e.e && this._canvas.zoomToPoint(new fabric.Point(e.e.pageX, e.e.pageY), Math.max(.1, Math.min(10, this._canvas.getZoom() * (e.e.deltaY > 0 ? .9 : 1.1)))));
        this._canvas.on('mouse:dblclick', (e: any) => e && e.target && e.target.data && this.fire(e.target.data));
        this._canvas.on('mouse:over', (e) => e && this.focus(e));

        resolve();
      });
    });
  }

  public render() {
    this._canvas?.renderAll();
  }

  public load(handler: (canvas: fabric.Canvas, colors: { [key: string]: string }, index: { [key: number]: any }, data: { [key: number]: any }) => void, data: { [key: number]: any }) {
    this._canvas.clear();
    // debugger;
    for (const key in this._index) {
      delete this._index[key];
    }
    handler(this._canvas, this.colors, this._index, data);
  }

  public fire: (device: number) => void;
  public focus: (e: any) => void;

}