class PlanisphereWidget {
    constructor(id, options) {
        console.log("PlanisphereWidget  " + id);

        this.options = options;
        this.container = document.getElementById(id);
        this.bg_color = (options && options.bg_color) ? options.bg_color : '#27293D';
        this.fore_color = (options && options.bg_color) ? options.bg_color : '#CCCCCC';
        this.coor_color = (options && options.coor_color) ? options.coor_color : '#1B1B24';
        this.border_color = (options && options.border_color) ? options.border_color : '#CCCCCC';
        this.wave_color = (options && options.wave_color) ? options.wave_color : '#1D8CF8';

        this.margin_left = (options && options.margin_left) ? options.margin_left : 0;
        this.margin_top = (options && options.margin_top) ? options.margin_top : 0;

        this.stage = new Konva.Stage({
            container: id,
            width: this.container.clientWidth || 500,
            height: this.container.clientHeight || 500
        });
        this.layer_coor = new Konva.Layer();
        this.layer_coor.hitGraphEnabled(false);
        this.layer_wave = new Konva.Layer();
        this.layer_wave.hitGraphEnabled(false);

        this.stage.add(this.layer_coor);
        this.stage.add(this.layer_wave);

        this.canvas = document.createElement("canvas");
        this.ctx_canvas = this.canvas.getContext("2d");
        this.ctx_canvas.fillStyle = this.bg_color;


        this.init();
        this.initResize();

        this.dAlpha = false;
        this.d1 = null;
        this.d2 = null;
        this.d3 = null;
        this.d4 = null;
    }

    init() {
        if (this.container.clientHeight === 0) return;
        this.stage.setWidth(this.container.clientWidth);
        this.stage.setHeight(this.container.clientWidth);
        this.area_x = this.margin_left;
        this.area_y = this.margin_top;
        this.area_width = this.stage.getWidth() - this.margin_left;
        this.area_height = this.stage.getHeight() - this.margin_top;

        this.drawCoor();

        this.canvas.height = this.area_height;
        this.canvas.width = this.area_width;
        this.ctx_canvas.strokeStyle = this.wave_color;
        this.ctx_canvas.lineWidth = 1;

        this.pointer = new Konva.Circle({
            x: 0,
            y: 0,
            radius: 1,
            stroke: this.wave_color,
            strokeWidth: 1
        });
        this.pointer.cache();
    }


    drawCoor() {
        var layer = this.layer_coor;
        layer.destroyChildren();

        var len = this.area_width;
        var rval = this.area_width / 2;
        layer.add(new Konva.Rect({
            x: this.area_x,
            y: this.area_y,
            width: this.area_width,
            height: this.area_height,
            stroke: this.border_color,
            strokeWidth: 1
        }));

        layer.add(new Konva.Line({
            points: [0, 0, this.area_width, this.area_height],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Line({
            points: [this.area_width, 0, 0, this.area_height],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));

        layer.add(new Konva.Line({
            points: [0, rval, this.area_width, rval],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Line({
            points: [0, rval / 2, this.area_width, rval / 2],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Line({
            points: [0, rval / 2 * 3, this.area_width, rval / 2 * 3],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));

        ///
        layer.add(new Konva.Line({
            points: [rval, 0, rval, len],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Line({
            points: [rval / 2, 0, rval / 2, len],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Line({
            points: [rval / 2 * 3, 0, rval / 2 * 3, len],
            stroke: this.border_color,
            strokeWidth: 1,
            lineJoin: 'round',
            dash: [1, 1]
        }));
        layer.add(new Konva.Circle({
            x: rval,
            y: rval,
            radius: rval,
            stroke: this.border_color,
            strokeWidth: 1
        }));
        layer.add(new Konva.Circle({
            x: rval,
            y: rval,
            radius: rval / 2,
            stroke: this.border_color,
            strokeWidth: 1
        }));
        layer.batchDraw();
    }

    setViewMode(vm) {
        if (vm == 3) {//0=星座图，3=余晖图。2021.03.31李伟添加；
            this.dAlpha = true;
            vm = 0;
        } else {
            this.dAlpha = false;
        }
        this.viewmodel = vm;

        this.clear();
    }
	//星座图
    feed(d, di, dq) {
        if (!this.viewmodel || this.viewmodel == 0) {
            this.drawWave_vector(d);
           // this.drawWave_planis(d);
            return;
        }
    }
	//矢量图
    feedVector(d) {
        if (!this.viewmodel || this.viewmodel == 0) {
            this.drawWave_vector(d);
            return;
        }
    }
	//眼图
    feedIQ(di, dq) {
        if (this.viewmodel == 1 && di != null) {
            this.drawIQ(di);
        }
        else if (this.viewmodel == 2  && dq != null) {
            this.drawIQ(dq);
        }
    }
    drawIQ(IQBuff) {
        this.clear();
        for (var j = 0; j < IQBuff.length; j++) {
            this.drawWave_eye(IQBuff[j]);
        }
    }
    clear() {
        this.imgData = null;
        this.drawWave_planis([]);
        this.drawWave_vector([]);
    }

    drawWave_eye(d) {
       // console.log("in drawWave_eye" + d.length);
        var layer = this.layer_wave;

        var width = this.area_width;
        var height = this.area_height;
        var rwidth = width / 2;
        var rHeight = height / 2;

        var ctx_canvas = layer.getContext();
        ctx_canvas.strokeStyle = this.wave_color;
        ctx_canvas.lineWidth = 1;
        ctx_canvas.beginPath();

        for (var n = 0; n < d.length; n++) {
            //var x = Math.floor(width*(1-1/1.4)/2+ n * width / d.length / 1.4);
            var x = Math.floor( n * width / d.length );
            var y = Math.floor(rHeight + d[n] * rHeight / 1.4);

            if (n == 0) {
                ctx_canvas.moveTo(x, y);
            }
            else {
                ctx_canvas.lineTo(x, y);
            }
        }
        ctx_canvas.stroke();
    }

    drawWave_planis(d) {
        //console.log("in plan" + d.length);
        var layer = this.layer_wave;

        var width = this.getDrawWHByPixelRatio(this.area_width) ;
        var height = this.getDrawWHByPixelRatio(this.area_height);
        var rwidth = width / 2;
        var rHeight = height / 2;



        //不显示的时候不报错
        if (!width || !height||width == 0 || height == 0) {
            return;
        }

        var context = layer.getContext();
        context.clearRect(0, 0, width, height);

        var imgData = context.createImageData(width, height);
        var dlen = imgData.data.length;
        //2021.03.31 李伟增加余晖效果
        if (this.dAlpha && d) {
            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d4, 32);
            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d3, 32);
            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d2, 64);
            this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, this.d1, 128);
            this.d4 = this.d3;
            this.d3 = this.d2;
            this.d2 = this.d1;
            this.d1 = d;
        }
        this.drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, 255);
        /*
        for (var n = 0; n < d.length; n++) {

            //console.log(rwidth+d[n][0] * rwidth);

            var x = Math.floor(rwidth + d[n][0] * rwidth/1.4);
            var y = Math.floor(rHeight+ d[n][1] * rHeight/1.4);

            var p = ( y * width  + x )* 4;

            this.setWaveColor(imgData, p, dlen,width*4);
        }
        */
        context.putImageData(imgData, 0, 0);
    }
    drawWave_plainsD(rwidth, rHeight, width, imgData, dlen, d, a) {
        if (!d)
            return;
        for (var n = 0; n < d.length; n++) {

            //console.log(rwidth+d[n][0] * rwidth);

            var x = Math.floor(rwidth + d[n][0] * rwidth / 1.4);
            var y = Math.floor(rHeight + d[n][1] * rHeight / 1.4);

            var p = (y * width + x) * 4;

            this.setWaveColor(imgData, p, dlen, width * 4, a);
        }
    }
    drawWave_vector(d) {

        var maxLine = 100;

        var dlen = Math.min(maxLine, d.length);

        var layer = this.layer_wave;

        var width = this.area_width;
        var height = this.area_height;
        var rwidth = width / 2;
        var rHeight = height / 2;

        //不显示的时候不报错
        if (!width || !height || width == 0 || height == 0) {
            return;
        }

        var context = layer.getContext();
        context.clearRect(0, 0, width, height);

        var ctx_canvas = layer.getContext();
        ctx_canvas.strokeStyle = this.wave_color;
        ctx_canvas.lineWidth = 1;
        ctx_canvas.beginPath();

        for (var n = 0; n < dlen; n++) {
            var x = Math.floor(rwidth + d[n][0] * rwidth / 1.2);
            var y = Math.floor(rHeight + d[n][1] * rHeight / 1.2);
            if (n == 0) {
                ctx_canvas.moveTo(x, y);
            }
            else {
                ctx_canvas.lineTo(x, y);
            }
        }
        ctx_canvas.stroke();
    }

  /*像素单位转css单位,该函数返回当前浏览器缩放比例所影响的 x y width height 的绘图位置
    仅适用putImageData getImageData等函数*/
    getDrawWHByPixelRatio(xory) {
        if (xory == 0) return 0;
        if (!xory) return xory;
        var ret = Math.ceil(window.devicePixelRatio * xory);
        //console.log(`xory=${xory} ratio=${window.devicePixelRatio} ret=${ret}`);
        return ret;
    }
    setWaveColor_thin(imgData, p, dlen, rowlen) {
        var dp = p + rowlen;
        if (p < 0) return;
        if (dp + 11 >= dlen) return;

        imgData.data[p] = 33;
        imgData.data[p + 1] = 129;
        imgData.data[p + 2] = 247;
        imgData.data[p + 3] = 255;

    }
    setWaveColor(imgData, p, dlen, rowlen, a = 255) {//2021.03.31 李伟增加余晖效果 a=alpha
        var dp = p + rowlen;
        if (p < 0) return;
        if (dp + 11 >= dlen) return;

        var r = 33;
        var g = 129;
        var b = 247;
        if (a != 255) {
            r = 0;
            g = 255;
            b = 0;
        }
        //console.log(a);
        imgData.data[p] = r;
        imgData.data[p + 1] = g;
        imgData.data[p + 2] = b;
        imgData.data[p + 3] = a;//255;//2021.03.31 李伟增加余晖效果

        imgData.data[p + 4] = r;
        imgData.data[p + 5] = g;
        imgData.data[p + 6] = b;
        imgData.data[p + 7] = a;//255;

        imgData.data[p + 8] = r;
        imgData.data[p + 9] = g;
        imgData.data[p + 10] = b;
        imgData.data[p + 11] = a;//255;


        imgData.data[dp] = r;
        imgData.data[dp + 1] = g;
        imgData.data[dp + 2] = b;
        imgData.data[dp + 3] = a;//255;

        imgData.data[dp + 4] = r;
        imgData.data[dp + 5] = g;
        imgData.data[dp + 6] = b;
        imgData.data[dp + 7] = a;//255;

        imgData.data[dp + 8] = r;
        imgData.data[dp + 9] = g;
        imgData.data[dp + 10] = b;
        imgData.data[dp + 11] = a;//255;
    }

    destroy() {
        this.imgData = null;
        this.stage.destroy();
        this.color_map = null;
    }
    dispose() {
        console.log("dispose wfmin");
        this.destroy();
    }
    initResize() {
        var _self = this;
        $(this.container).resize(function () {
            var target = this;
            if (target.resizeFlag) {
                clearTimeout(target.resizeFlag);
            }
            target.resizeFlag = setTimeout(function () {
                _self.init();
                target.resizeFlag = null;
            }, 100);
        });
    }
}
