// @ts-nocheck
import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib"

export class GraphView extends SCanvasView {
    // 0 :line 1:area 2:img
    _type: number = 0;
    get type(): number {
        return this._type
    }
    set type(v: number) {
        this._type = v;
        this.update()
    }

    // 线条颜色
    private _strokecolor: string = "";
    get strokecolor(): string {
        return this._strokecolor
    }
    set strokecolor(v: string) {
        this._strokecolor = v;
        this.update()
    }

    // 背景颜色
    private _bgcolor: string = "";
    get bgcolor(): string {
        return this._bgcolor
    }
    set bgcolor(v: string) {
        this._bgcolor = v;
        this.update()
    }
    //线条类型
    private _lineType: string = "";
    get lineType(): string {
        return this._lineType
    }
    set lineType(v: string) {
        this._lineType = v;
        this.update()
    }

    //线条粗细
    private _lineWidth: number = 1;
    get lineWidth(): number {
        return this._lineWidth
    }
    set lineWidth(v: number) {
        this._lineWidth = v;
        this.update()
    }

    /** 图片dom */
    img: CanvasImageSource | undefined;

    /** 图片地址 */
    private _url: string = "";
    get url(): string {
        return this._url;
    }
    set url(v: string) {
        this._url = v;
        this.img = new Image();
        this.img.src = v;
        this.img.onload = (): void => {
            this.update();
        };
        this.img.onerror = (e): void => {
            this.update();
        };
    }

    constructor(id: string) {
        super(id)
    }

    onDraw(canvas: SPainter): void {
        canvas.clearRect(0, 0, this.width, this.height)
        canvas.pen.lineWidth = this.lineWidth;
        if (this.lineType == 'dashed') {
            canvas.pen.lineDash = [10, 2]
        }
        if (this.lineType == 'dotted') {
            canvas.pen.lineDash = [this.lineWidth, this.lineWidth]
        }
        canvas.pen.color = new SColor(this.strokecolor);
        canvas.brush.color = new SColor(this.bgcolor);
        if (this.type == 0) {
            canvas.drawLine(0, 14, 28, 14);
        } else if (this.type == 1) {
            canvas.drawRect(0, 0, 28, 28);
        } else if (this.type == 2) {
            if (this.img) {
                console.log(this.img)
                canvas.drawImage(this.img, 0, 0, 28, 28)
            }
        }
    }
}
