sgworld = window.external.createSgworld();
window.onload = function () {
    //获取需要查询的参数

    var parmType = localStorage.getItem("type");
    var type = getUrlParam("Type");
    if (type == "All") {
        //查询当前湖泊走哦有年份的面积
        $.ajax({
            url: "../../../Ashx/DataLake.ashx",
            type: "post",
            data: { Action: "GetCurrentArea", pathName: decodeURIComponent(getUrlParam("urlName")) },//81258c6425be4694af2575731f4e8831
            dataType: "json",
            async: true,
            success: function (result) {
              
                if (result == null) {
                    $("#container").empty();
                    $("#container").append("<table><tr><td>暂无数据</td></tr></table>");
                    $("#dataTable").empty();
                    $("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
                    return false;
                }
                var TablehtmlFirst = "";
                var TablehtmlSecond = "";
                var tableThird = ""
                var lastLakeArea = 0;
                var simName = "";
                var dataX = [];
                var dataY = [];
                var count = 0;
                $.each(result, function (index, value) {
                    count++;
                    simName = value.simName;
                    
                    TablehtmlFirst += "<td>" + value.time + "</td>";
                    TablehtmlSecond += "<td>" +parseFloat( Math.round(value.lakeArea)).toFixed(2) + "</td>";
                    if (count == 1) {
                        tableThird += "<td>0</td>";
                    } else {
                        tableThird += "<td>" +parseFloat( Math.round((value.lakeArea - lastLakeArea))).toFixed(2) + "</td>";
                    }
                   
                    dataX.push(value.time);
                    dataY.push(parseFloat(value.lakeArea).toFixed(2));
                    lastLakeArea =parseFloat( value.lakeArea).toFixed(2);
                });
                InitChart(decodeURIComponent(getUrlParam("urlName")), dataX, dataY);
                $("#dataTable").empty();
                $("#dataTable").append("<table><tr><td>名称/时间</td>" + TablehtmlFirst + "</tr>" + "<tr><td>"+simName+"</td>" + TablehtmlSecond + "</tr><tr><td>变化量</td>" + tableThird + "</tr></table>");
            }
        });
        //单年单选
    }
    else if (type == "simYearSimName") {
        var objParm = localStorage.getItem("openShp");
        
        $.ajax({
            url: "../../../Ashx/DataLake.ashx",
            type: "post",
            data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
            dataType: "json",
            async: true,
            success: function (result) {
                if (result == null) {
                    $("#container").empty();
                    $("#container").append("<table><tr><td>暂无数据</td></tr></table>");
                    $("#dataTable").empty();
                    $("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
                    return false;
                }
                var firstHtml = "";
                var secondHtml = "";
                var dataX = [];
                var dataY = [];
                $.each(result, function (index, value) {
                    firstHtml += "<td>" + value.time + "</td>";
                    secondHtml += "<td>" + value.simName + "</td><td>" + parseFloat(value.lakeArea).toFixed(2) + "</td>";
                    dataX.push(value.time);
                    dataY.push(parseFloat( value.lakeArea).toFixed(2));
                });
                InitChart("湖泊面积", dataX, dataY);
                $("#dataTable").empty();
                $("#dataTable").append("<table><tr><td>名称/时间</td>" + firstHtml + "</tr>" + "<tr>" + secondHtml + "</tr></table>");
            }
        });
        //单年多选
    }
    else if (type == "simYearManyName") {
        var objParm = localStorage.getItem("openShp");
        $.ajax({
            url: "../../../Ashx/DataLake.ashx",
            type: "post",
            data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
            dataType: "json",
            async: true,
            success: function (result) {
                if (result == null) {
                    $("#container").empty();
                    $("#container").append("<table><tr><td>暂无数据</td></tr></table>");
                    $("#dataTable").empty();
                    $("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
                    return false;
                }
                var FirstHtml = "";
                var SecondHtml = "";
                var dataTime = "";
                var dataX = [];
                var dataY = [];
                $.each(result, function (index, value) {
                    dataTime = value.time;
                    SecondHtml += "<tr><td>" + value.simName + "</td><td>" + parseFloat(value.lakeArea).toFixed(2)+"</td></tr>";
                    dataX.push(value.simName);
                    dataY.push(parseFloat( value.lakeArea).toFixed(2));
                });
                simYearManyName("湖泊面积", dataX, dataY);
                $("#dataTable").empty();
                $("#dataTable").append("<table><tr><td>名称/时间</td><td>" +dataTime+ "</td></tr>" +SecondHtml+"</table>");
            }
        });
        //多年单选
    }
    else if (type == "manyYearSimName") {
        var objParm = localStorage.getItem("openShp");

        $.ajax({
            url: "../../../Ashx/DataLake.ashx",
            type: "post",
            data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
            dataType: "json",
            async: true,
            success: function (result) {
                
                if (result == null) {
                    $("#container").empty();
                    $("#container").append("<table><tr><td>暂无数据</td></tr></table>");
                    $("#dataTable").empty();
                    $("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
                    return false;
                }
                var TablehtmlFirst = "";
                var TablehtmlSecond = "";
                var tableThird = ""
                var lastLakeArea = 0;
                var simName = "";
                var  count = 0;
                var dataX = [];
                var dataY = [];

                $.each(result, function (index, value) {
                    count++;
                    TablehtmlFirst += "<td>" + value.time + "</td>";
                    TablehtmlSecond += "<td>" +parseFloat( Math.round(value.lakeArea)).toFixed(2) + "</td>";
                    if (count == 1) {
                        simName = value.simName;
                        tableThird += "<td>0</td>";
                    } else {
                        tableThird += "<td>" +parseFloat( Math.round((value.lakeArea - lastLakeArea))).toFixed(2) + "</td>";
                    }
                    lastLakeArea = parseFloat(value.lakeArea).toFixed(2);
                    dataX.push(value.time);
                    dataY.push(parseFloat( value.lakeArea).toFixed(2));
                });
                InitChart("湖泊面积", dataX, dataY);
                $("#dataTable").empty();
                $("#dataTable").append("<table><tr><td>名称/时间</td>" + TablehtmlFirst + "</tr>" + "<tr><td>" + simName + "</td>" + TablehtmlSecond + "</tr><tr><td>变化量</td>" + tableThird + "</tr></table>");
            }
        });
        //多年多选
    }
    else if (type == "manyYearManyName") {
        var objParm = localStorage.getItem("openShp");
        $.ajax({
            url: "../../../Ashx/DataLake.ashx",
            type: "post",
            data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
            dataType: "json",
            async: true,
            success: function (result) {
                
                var simName = "";
                var dataX = [];
                var dataY = [];
                var dataYY = [];
                var tmy = "";
                var count=0;
                $.each(result, function (index, value) {
                    count++;
                    dataX.push(value.time);
                    if (count == result.length) {
                        dataYY.push(parseFloat( value.lakeArea).toFixed(2));
                        for (var i = 0; i < dataYY.length; i++) {
                            if (parseFloat(dataYY[i]) <= 200) {
                                dataYY[i] = dataYY[i] / 2;
                            }
                            if (parseFloat(dataYY[i]) <= 500 & parseFloat(dataYY[i]) > 200) {
                                dataYY[i] = ((dataYY[i] - 200) / 3) + 100;
                            }
                            if (parseFloat(dataYY[i]) <= 1000 & parseFloat(dataYY[i]) > 500) {
                                dataYY[i] = ((dataYY[i] - 500) / 5) + 200;
                            }
                            if (parseFloat(dataYY[i]) <= 2000 & parseFloat(dataYY[i]) > 1000) {
                                dataYY[i] = ((dataYY[i] - 1000) / 10) + 300;
                            }
                            if (parseFloat(dataYY[i]) <= 5000 & parseFloat(dataYY[i]) > 2000) {
                                dataYY[i] = ((dataYY[i] - 2000) / 30) + 400;
                            }
                        };
                        var dy = {
                            name: tmy,
                            type: 'bar',
                            data: dataYY
                        };
                        dataY.push(dy);
                    } else {
                        if (tmy == value.simName) {
                            dataYY.push(parseFloat( value.lakeArea).toFixed(2));
                        } else {                                
                                //判断数组是否为空
                                if (dataYY.length != 0) {
                                    for (var i = 0; i < dataYY.length; i++) {
                                        if (parseFloat(dataYY[i]) <= 200) {
                                            dataYY[i] = dataYY[i] / 2;
                                        }
                                        if (parseFloat(dataYY[i]) <= 500 & parseFloat(dataYY[i]) > 200) {
                                            dataYY[i] = ((dataYY[i] - 200) / 3) + 100;
                                        }
                                        if (parseFloat(dataYY[i]) <= 1000 & parseFloat(dataYY[i]) > 500) {
                                            dataYY[i] = ((dataYY[i] - 500) / 5) + 200;
                                        }
                                        if (parseFloat(dataYY[i]) <= 2000 & parseFloat(dataYY[i]) > 1000) {
                                            dataYY[i] = ((dataYY[i] - 1000) / 10) + 300;
                                        }
                                        if (parseFloat(dataYY[i]) <= 5000 & parseFloat(dataYY[i]) > 2000) {
                                            dataYY[i] = ((dataYY[i] - 2000) / 30) + 400;
                                        }
                                    };
                                    var dy = {
                                        name: tmy,
                                        type: 'bar',
                                        data:dataYY
                                    };
                                    dataY.push(dy);
                                }
                                tmy = value.simName;
                                //修改数组的值
                                dataYY = [];
                                dataYY.push(parseFloat( value.lakeArea).toFixed(2));
                        }
                    }
                 
                });
                manyYearManyName("湖泊面积", dataX, dataY);
                //给table添加数据
                var dx = uniq(dataX);
                var firstHtml = "";
                var secondHtml = "";
                for (var i = 0; i < dx.length;i++){
                    firstHtml += "<td>"+dx[i]+"</td>";
                }

                for (var i = 0; i < dataY.length; i++) {
                    var   secondHtml1 = "<tr><td>" + dataY[i].name + "</td>";
                    var secondHtml2 = "<tr><td>变化量</td>";
                   // alert(dataY[i].data);
                    for (j = 0; j < dataY[i].data.length; j++) {
                        
                       
                        if (parseFloat(dataY[i].data[j]) <= 100) {
                            dataY[i].data[j] = dataY[i].data[j] * 2;
                        }
                        if (parseFloat(dataY[i].data[j]) <= 200 & parseFloat(dataY[i].data[j]) > 100) {
                            dataY[i].data[j] = ((dataY[i].data[j] - 100) * 3) + 200;
                        }
                        if (parseFloat(dataY[i].data[j]) <= 300 & parseFloat(dataY[i].data[j]) > 200) {
                            dataY[i].data[j] = ((dataY[i].data[j] - 200) * 5) + 500;
                           
                        }
                        if (parseFloat(dataY[i].data[j]) <= 400 & parseFloat(dataY[i].data[j]) > 300) {
                            dataY[i].data[j] = ((dataY[i].data[j] - 300) * 10) + 1000;
                        }
                        if (parseFloat(dataY[i].data[j]) <= 500 & parseFloat(dataY[i].data[j]) > 400) {
                            dataY[i].data[j] = ((dataY[i].data[j] - 400) * 30) + 2000;
                        }

                        

                        secondHtml1 += "<td>" +Math.round(dataY[i].data[j]) + "</td>";
                        if (j == 0) {
                            secondHtml2 += "<td>0</td>";
                        } else {
                            secondHtml2 += "<td>" + Math.round(dataY[i].data[j] - dataY[i].data[j - 1]) + "</td>";
                        }
                    }
                    secondHtml += secondHtml1 + "</tr>" + secondHtml2+"</tr>";
                }
                $("#dataTable").empty();
                $("#dataTable").append("<table><tr><td>名称/时间</td>"+firstHtml+"</tr>"+secondHtml+"</table>")


            }
        });
    }

    btnClick();
}

function InitChart(title, dataX, dataY) {
    var minY = Math.min.apply(null, dataY);
    var maxY = Math.max.apply(null, dataY);

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        //title: {
        //    text: title,
        //    left: 'center',
        //    textStyle: {
        //        color: '#fff'
        //    }

        //},
        grid: {
            top: '10%',
            left: '20%',
            right: '5%',
            bottom: '12%'
        },
        backgroundColor: '#000000',
        color: ["#1A88C8"],
        tooltip: {
            trigger: 'axis',
            confine: 'hidden',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: dataX,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            }

        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            splitLine: {
                show: false
            },
            max: Math.round(maxY + 50),
            min: ((Math.round(minY - 50) < 0) ? 0 : Math.round(minY - 50))
        },
        series: [{
            data: dataY,
            type: 'bar',
            barWidth: 20,

        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

function simYearManyName(title, dataX, dataY) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));
    //对y轴数据进行处理
    for (var i = 0; i < dataY.length; i++) {
        if (parseFloat(dataY[i]) <= 200) {
            dataY[i] = dataY[i] / 2;
        }
        if (parseFloat(dataY[i]) <= 500 & parseFloat(dataY[i]) > 200) {
            dataY[i] = ((dataY[i] - 200) / 3) + 100;
        }
        if (parseFloat(dataY[i]) <= 1000 & parseFloat(dataY[i]) > 500) {
            dataY[i] = ((dataY[i] - 500) / 5) + 200;
        }
        if (parseFloat(dataY[i]) <= 2000 & parseFloat(dataY[i]) > 1000) {
            dataY[i] = ((dataY[i] - 1000) / 10) + 300;
        }
        if (parseFloat(dataY[i]) <= 5000 & parseFloat(dataY[i]) > 2000) {
            dataY[i] = ((dataY[i] - 2000) / 30) + 400;
        }
    }

    // 指定图表的配置项和数据
    var option = {
        //title: {
        //    text: title,
        //    left: 'center',
        //    textStyle: {
        //        color: '#fff'
        //    }
        //},
        backgroundColor: '#000000',
        color: ["#1A88C8"],
        grid: {
            top: '10%',
            left: '15%',
            right: '5%',
            bottom: '12%'
        },
        tooltip: {
            confine: 'hidden',
            formatter: function (parm) {
                var returnStr = "";
                var vl = "";
                if (parm.value <= 100) {
                    returnStr = parm.name + ":<br />" + parm.value * 2;
                }
                if (parm.value > 100 & parm.value <= 200) {
                    returnStr = parm.name + ":<br />" + ((parm.value - 100) * 3 + 200);
                }
                if (parm.value > 200 & parm.value <= 300) {
                    vl = (parm.value - 200) * 5 + 500;
                    returnStr = parm.name + ":<br />" + vl;
                }
                if (parm.value > 300 & parm.value <= 400) {
                    vl = (parm.value - 300) * 10 + 1000;
                    returnStr = parm.name + ":<br />" + vl;
                }
                if (parm.value > 400 & parm.value <= 500) {
                    returnStr = parm.name + ":<br />" + ((parm.value - 400) * 30 + 2000);
                }
                return returnStr;
            }
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            data: dataX
        },
        yAxis: {
            min: 0,
            max: 500,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                formatter: function (value) {
                    var texts = [];
                    if (value == 0) {
                        texts.push('0');
                    }
                    else if (value <= 100) {
                        texts.push('200');
                    }
                    else if (value <= 200) {
                        texts.push('500');
                    }
                    else if (value <= 300) {
                        texts.push('1000');
                    }
                    else if (value <= 400) {
                        texts.push('2000');
                    }
                    else if (value <= 500) {
                        texts.push('5000');
                    }
                    return texts;
                }
            }
        },
        series: [
            {
                type: 'bar',
                barMaxWidth:20,
                data: dataY
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}

function manyYearManyName(title, dataX, dataY) {
    dataX= uniq(dataX);
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var newData = [];
    for (var i = 0; i < dataY.length; i++) {
        var lineItem = new serLineItem();
        lineItem.name = dataY[i].name;
        lineItem.type = dataY[i].type;
        lineItem.data = dataY[i].data;
        newData.push(lineItem);
    }

   
    option = {
        //title: {
        //    text: title,
        //    left: 'center',
        //    textStyle: {
        //        color: '#fff'
        //    }
        //},
        backgroundColor: '#000000',
        color: ["#1A88C8"],
        tooltip: {
            trigger: 'axis',
            confine: 'hidden',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (parm) {
                var p = parm;
                var returnStr = parm[0].name+": <br />";
                var vl = "";
                for (var i = 0; i<parm.length;i++){
                    if (parm[i].data <= 100) {
                        returnStr += parm[i].seriesName + ":" + parm[i].data * 2 + "<br />";
                    }
                    if (parm[i].data > 100 & parm[i].data <= 200) {
                        returnStr += parm[i].seriesName + ":" + ((parm[i].data - 100) * 3 + 200) + "<br />";
                    }
                    if (parm[i].data > 200 & parm[i].data <= 300) {
                        vl = (parm[i].data - 200) * 5 + 500;
                        returnStr += parm[i].seriesName + ":" + vl + "<br />";;
                    }
                    if (parm[i].data > 300 & parm[i].data <= 400) {
                        vl = (parm[i].data - 300) * 10 + 1000;
                        returnStr += parm[i].seriesName + ":" + vl + "<br />";;
                    }
                    if (parm[i].data > 400 & parm[i].data <= 500) {
                        returnStr += parm[i].seriesName + ":" + ((parm[i].data - 400) * 30 + 2000) + "<br />";;
                    }
                }
               
                return returnStr;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            data: dataX
        },
        dataZoom: [
            {
                show: true,
                start: 50,
                end: 100,
                backgroundColor: '#1A88C8',
                textStyle: {
                    color:'#ffffff'
                },
                left:'10%',
                right:'10%'
            }
        ],
        yAxis: {
            min: 0,
            max: 500,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                formatter: function (value) {
                    var texts = [];
                    if (value == 0) {
                        texts.push('0');
                    }
                    else if (value <= 100) {
                        texts.push('200');
                    }
                    else if (value <= 200) {
                        texts.push('500');
                    }
                    else if (value <= 300) {
                        texts.push('1000');
                    }
                    else if (value <= 400) {
                        texts.push('2000');
                    }
                    else if (value <= 500) {
                        texts.push('5000');
                    }
                    return texts;
                }
            }
        },
        series: newData
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }   
}

var serLineItem = function () {
    return {
        name: '',
        type: '',
        data: []
    }
}

//数组去重
function uniq(array) {
    var temp = []; //一个新的临时数组
    for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i]);
        }
    }
    return temp;
}



function btnClick() {
    $(".chartBtn").click(function () {
        $("#container").css("display", "block");
        $("#dataTable").css("display", "none");
        $(".dataBtn").css("background-color", "#000000");
        $(".chartBtn").css("background-color", "#033D73");
    });

    $(".dataBtn").click(function () {
        $("#container").css("display", "none");
        $("#dataTable").css("display", "block");
        $(".dataBtn").css("background-color", "#033D73");
        $(".chartBtn").css("background-color", "#000000");
    });
}