var code = "";
var resultData = null;

window.onload = function () {
    var parms = decodeURI(getUrlParam("queryName"));
    var Action = getUrlParam("Action");
    GetData(Action,parms);
    btnClick();

}

function GetData(action,parms) {
    $.ajax({
        url: "../../../Ashx/JZData.ashx",
        type: "post",
        data: { Action: action ,XMC:parms},
        dataType: "json",
        async: false,
        success: function (result) {
            //result = JSON.parse(result);
            var numData = [];
            var xAxisData = [];
            var areaData=[];
            var html = '<table><tr><td>类型</td><td>总面积</td><td>数量</td></tr>';
            $.each(result, function (index, value) {
                var tblx = "";
                switch (value.TBLX) {
                    case "13":
                        tblx = "推填土";
                        break;
                    case "11":
                        tblx = "线型地物";
                        break;
                    case "12":
                        tblx = "建（构）筑物";
                        break;
                    case "2":
                        tblx = "光伏用地";
                        break;
                    case "3":
                        tblx = "高尔夫球场";
                        break;
                    default:
                        tblx = "其他用地";
                        break;
                }
                html += '<tr class="data"><td>'+tblx+'</td><td>'+value.MJZH+'</td><td>'+value.NUMBER+'</td></tr>';
                xAxisData.push(tblx);
                //seriesData.push(value.MJZH);
                numData.push(value.NUMBER);
                areaData.push(value.MJZH);
            });
            html += "</table>";
            $("#dataTable").empty();
            $("#dataTable").append(html);
            InitChart(xAxisData, numData,areaData);
        }
    });
}

var myChart = null;
function InitChart(dataX, dataY1,dataY2) {
    var dom = document.getElementById("container");
    myChart = echarts.init(dom);
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            top: '20%',
            left: "12%",
            bottom: '18%',
            right:"15%"
        },
        //toolbox: {
        //    feature: {
        //        dataView: { show: true, readOnly: false },
        //        magicType: { show: true, type: ['line', 'bar'] },
        //        restore: { show: true },
        //        saveAsImage: { show: true }
        //    }
        //},
        legend: {
            data: ['数量', '总面积'],
            textStyle: {
                color: "#fff"
            }
        },
        xAxis: [
            {
                axisLabel: {
                    rotate: -25,
                    color:"#fff"
                },
                type: 'category',
                data: dataX,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                },
                axisLabel: {
                    //formatter: '{value} 个'
                    color: "#fff"
                }
            },
            {
                type: 'value',
                name: '面积(亩)',
                min: 0,
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                },
                axisLabel: {
                    //formatter: '{value} 亩'
                    color: "#fff"
                }
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar',
                itemStyle:{
                    color: "#1E90FF"
                },
                data: dataY1
            },
            {
                name: '总面积',
                type: 'bar',
                itemStyle: {
                    color: "#DB7093"
                },
                yAxisIndex: 1,
                data: dataY2
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };
}


function btnClick() {
    $(".data").hover(function () {
        $(this).css("background-color", "cadetblue");
    }, function () {
        $(this).css("background-color", "#000");
    });
    $(".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");
    });
}