"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: 19, data: [], image: "", show: false }];

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



// 子进程方法
function loadkriging() {
    onmessage = ({ data: { processId,gridConfig, qindex, kriging, bounds, map_extent } }) => {
        console.log('收到主线程消息：' + gridConfig);
        canvas.width = 2000;
        canvas.height = 2000;

        var t = [];
        var x = [];
        var y = [];
        for (var i = 0, len = gridConfig.data.length; i < len; i++) {
            t.push(gridConfig.data[i][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
            }

        }
        //1.用克里金训练一个variogram对象
        var variogram = kriging.train(t, x, y, "exponential", 0, 100);

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

        var grid = kriging.grid(bounds, variogram, (map_extent.maxx - map_extent.minx) / 500);
        //3.将得到的格网预测值渲染到canvas画布上
        //kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], colors);
        //var image = canvas.toDataURL("image/png");

        postMessage({processId,result:grid });
    };
}
const makeWorker = (func) => {
    let pendingProcesss = {};
    if (!window.Worker) {//浏览器不支持worker子线程的情况
        alert('浏览器不支持worker子线程');
        return;
    }
    //创建新的Worker
    const worker = new Worker(
        URL.createObjectURL(new Blob([`(${func.toString()})()`]))
    );
    //接收消息
    worker.onmessage = ({ data: { result, processId } }) => {
        // 调用resolve，改变Promise状态
        pendingProcesss[processId](result);
        // 删掉，防止进程id冲突
        delete pendingProcesss[processId];
        // 关闭worker线程
        worker.terminate();
    }

    //异常处理
    worker.onerror = function (err) { }

    return (...message) => new Promise(resolve => {
        const processId = String(Math.random())//new Date().getTime()
        pendingProcesss[processId] = resolve;
        //传递参数
        worker.postMessage({ processId, message });
    })
}
const testWorker = makeWorker(loadkriging);
console.log('主线程正常运行：1')




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

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

    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>')

    });

    $('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 => {
            /*
            testWorker(grid_item, current_heatmap_alpha_value, kriging, kriging_bounds, map_extent ).then((grid) => {
                var canvas = document.createElement("canvas");
                kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                grid_item.image = canvas.toDataURL("image/png");
                addImageToMap(grid_item);
            });
            */
            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 () {
        console.log(this.checked);
        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 () {
            /*
            testWorker(grid_item, current_heatmap_alpha_value, kriging, kriging_bounds, map_extent ).then((grid) => {
                var canvas = document.createElement("canvas");
                kriging.plot(canvas, grid, [map_extent.minx, map_extent.maxx], [map_extent.miny, map_extent.maxy], kriging_colors);
                grid_item.image = canvas.toDataURL("image/png");
                addImageToMap(grid_item);
            });
            */
            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
        });
        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;
}