"use script";

//对应widget.js中MyWidget实例化后的对象
var thisWidget

var current_heatmap_alpha_value = 0.5;
var current_heatmap_qindex = "pm25";

var grid_level_list = [{ layer: null, level: 5000, min: 8, max: 10, data: [], image: "", show: false }, { layer: null, level: 3000, min: 11, max: 12, data: [], image: "", show: false }, { layer: null, level: 1000, min: 13, max: 14, data: [], image: "", show: false }, { layer: null, level: 500, min: 15, max: 19, data: [], image: "", show: false }];

//var grid_level_list = [{ layer: null, level: 3000, min: 8, max: 15, data: [], image: "", show: false }];

var tem_html_canvas = document.createElement("canvas");
tem_html_canvas.width = 2000;
tem_html_canvas.height = 2000;
grid_level_list.forEach(element => {
    // element.worker = new Worker('/shanghai/widgetsTS/widget_grid/webworker.js') ;
    element.worker = new Worker('webworker.js') ;
});

$(function () {
    $("#grid5000").click();
})
$("span").click(function () {
    if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
        $(this).addClass("touchOn");//给所点击元素加上touchOn类
    }
    $(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
})

//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;

    $("#grid5000").click(function () {
        thisWidget.changeCamerView("grid5000");
    });
    $("#grid3000").click(function () {
        thisWidget.changeCamerView("grid3000");
    });
    $("#grid1000").click(function () {
        thisWidget.changeCamerView("grid1000");
    });
    $("#grid500").click(function () {
        thisWidget.changeCamerView("grid500");
    });

    thisWidget.style_options.forEach(element => {
        $("#style_radio").append('<label style="padding-left: 10px;"><input type="radio" name="style_option" value="' + element + '" ' + (element == thisWidget.style_selected ? "checked" : "") + '/>' + element + '</label>')
        $("#style_radio2").append('<label style="padding-left: 10px;"><input type="radio" name="style_option2" value="' + element + '" ' + (element == thisWidget.style_selected ? "checked" : "") + '/>' + element + '</label>')

    });
    $("#style_radio label").eq(0).html('<input type="radio" name="style_option" value="pm25" checked="">PM₂.₅');
    $("#style_radio label").eq(1).html('<input type="radio" name="style_option" value="pm10">PM₁₀');
    $("#style_radio label").eq(2).html('<input type="radio" name="style_option" value="no">NO');
    $("#style_radio label").eq(3).html('<input type="radio" name="style_option" value="no2">NO₂');
    $("#style_radio label").eq(4).html('<input type="radio" name="style_option" value="nox">NOₓ');
    $("#style_radio label").eq(5).html('<input type="radio" name="style_option" value="co">CO');

    $("#style_radio2 label").eq(0).html('<input type="radio" name="style_option2" value="pm25" checked="">PM₂.₅');
    $("#style_radio2 label").eq(1).html('<input type="radio" name="style_option2" value="pm10">PM₁₀');
    $("#style_radio2 label").eq(2).html('<input type="radio" name="style_option2" value="no">NO');
    $("#style_radio2 label").eq(3).html('<input type="radio" name="style_option2" value="no2">NO₂');
    $("#style_radio2 label").eq(4).html('<input type="radio" name="style_option2" value="nox">NOₓ');
    $("#style_radio2 label").eq(5).html('<input type="radio" name="style_option2" value="co">CO');

    $('input[type=radio][name=style_option]').change(function () {
        thisWidget.update_grid_style(this.value);
    });
    $('input[type=radio][name=style_option2]').change(function () {
        current_heatmap_qindex = this.value;
        grid_level_list.forEach(grid_item => {
            if (grid_item.data.length > 0) {
                grid_item.worker.postMessage({dataItems:grid_item.data,gridLevel:grid_item.level,qindex:current_heatmap_qindex});// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                      
                grid_item.worker.onmessage = event => {
                    kriging.plot(tem_html_canvas, event.data, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                    grid_item.image = tem_html_canvas.toDataURL("image/png");
                    addImageToMap(grid_item);
                }
                grid_item.worker.onmessageerror = error => console.error(error)
                grid_item.worker.onerror = error => {
                    console.error(error)
                }
                //grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
                //addImageToMap(grid_item);
            }


        });

    });

    $("#gridmap_opcity")
        .slider({ min: 0.1, max: 1, step: 0.1, value: 1 })
        .on("change", (e) => {
            thisWidget.setGridmapAlpha(e.value.newValue);
        });
    $("#heatmap_opcity")
        .slider({ min: 0.1, max: 1, step: 0.1, value: 0.5 })
        .on("change", (e) => {
            current_heatmap_alpha_value = e.value.newValue;
            thisWidget.setHeatmapAlpha(e.value.newValue);
        });


    $("#show_gridmap").change(function () {
        if (this.checked) {
            thisWidget.showGridmapLayers();
        } else {
            thisWidget.hideGridmapLayers();
        }
    });

    $("#show_heatmap").change(function () {
        if (this.checked) {
            if (grid_level_list[0].layer != null) {
                thisWidget.showHeatmapLayers();
            } else {
                grid_level_list.forEach(grid_item => { grid_item.show = true; });
            }
        } else {
            thisWidget.hideHeatmapLayers();
        }
    });


    initHeatMapLayers();

}
function initHeatMapLayers() {

    grid_level_list.forEach(grid_item => {
        queryGridHeatmapData(grid_item).then(function () {
            if (grid_item.data.length > 0) {
                //worker.postMessage([grid_item, current_heatmap_qindex]);// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                                                                                                                  
                grid_item.worker.postMessage({dataItems:grid_item.data,gridLevel:grid_item.level,qindex:current_heatmap_qindex});// 发送JavaScript对象，会先执行序列化为JSON文本消息再发送，然后在接收端自动反序列化为JavaScript对象。                                                                      
                grid_item.worker.onmessage = event => {
                    console.log(event.data.length);
                    kriging.plot(tem_html_canvas, event.data, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                    grid_item.image = tem_html_canvas.toDataURL("image/png");
                    addImageToMap(grid_item);
                }
                grid_item.worker.onmessageerror = error => console.error(error)
                grid_item.worker.onerror = error => {
                    console.error(error)
                }
                //grid_item.image = createKrigingImage(grid_item, kriging_bounds, kriging_colors); //kriging_bounds, kriging_colors在kriging_config.js中定义
                //addImageToMap(grid_item);
            }
        });
    });



}

function addImageToMap(grid_item) {

    if (grid_item.layer == null) {
        grid_item.layer = new mars3d.layer.ImageLayer({
            url: grid_item.image,
            rectangle: {
                xmin: map_extent.minx,
                xmax: map_extent.maxx,
                ymin: map_extent.miny,
                ymax: map_extent.maxy,
            },
            minimumLevel: grid_item.min,
            minimumTerrainLevel: grid_item.min,
            maximumLevel: grid_item.max,
            maximumTerrainLevel: grid_item.max,
            alpha: current_heatmap_alpha_value,
            show: grid_item.show,
            name:""
        });
        thisWidget.heatmapGroupLayer.addLayer(grid_item.layer);
    } else {
        grid_item.layer.options.url = grid_item.image;
        grid_item.layer.setOptions(grid_item.layer.options);

    }
}


//数据获取
function queryGridHeatmapData(grid_item) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: thisWidget.nodejs_url_predix + "dataapi/Bdata?bid=get_grid_heatmap&gridlevel=" + grid_item.level + "&datatype=" + thisWidget.datatype + "&datatime=" + thisWidget.datatime,
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.data?.result != undefined && result.data?.result?.length > 0) {
                    grid_item.data = result.data.result;
                }
                resolve(result.data.result);

            },
            error: function (data) {
                haoutil.msg("后台错误，请联系系统管理员。");
            },
        });
    });
}


//根据 克里金法 插值绘制图片
function createKrigingImage(gridConfig, bounds, colors) {
    var canvas = document.createElement("canvas");
    canvas.width = 2000;
    canvas.height = 2000;

    var t = [];
    var x = [];
    var y = [];
    console.log("开始：" + (new Date()).toISOString());
    for (var i = 0, len = gridConfig.data.length; i < len; i++) {
        t.push(gridConfig.data[i][current_heatmap_qindex]); // 权重值
        var tmp_grid_id = gridConfig.data[i]["grid_id"];
        var lon_lat = tmp_grid_id.split("_");
        if (gridConfig.level == 5000) {
            x.push(Number(lon_lat[0]) + 0.025); // x
            y.push(Number(lon_lat[1]) + 0.025); // y
        } else if (gridConfig.level == 3000) {
            x.push(Number(lon_lat[0]) + 0.0125); // x
            y.push(Number(lon_lat[1]) + 0.0125); // y
        } else if (gridConfig.level == 1000) {
            x.push(Number(lon_lat[0]) + 0.005); // x
            y.push(Number(lon_lat[1]) + 0.005); // y
        }

    }
    console.log("数据构造完成：" + (new Date()).toISOString());

    //1.用克里金训练一个variogram对象
    var variogram = kriging.train(t, x, y, "exponential", 0, 100);
    console.log("variogram对象完成：" + (new Date()).toISOString());

    //2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；
    //bounds:普通的geojson格式的面的格式的coordinates。

    var grid = kriging.grid(bounds, variogram, (map_extent.maxx - map_extent.minx) / 500);
    //3.将得到的格网预测值渲染到canvas画布上
    console.log("grid完成：" + (new Date()).toISOString());

    kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], colors);
    console.log("cavas绘制完成" + (new Date()).toISOString());

    var image = canvas.toDataURL("image/png");
    console.log("image转换完成：" + (new Date()).toISOString());

    return image;
}