var first = "", second = "", time = "",title="";

window.onload = function () {
     first =decodeURI(getUrlParam("first"));
     second =decodeURI(getUrlParam("second"));
     time = decodeURI(getUrlParam("time"));
     title = localStorage.getItem("typeName");
     //first = "河流湿地*湖泊湿地";
     //second = "";
     //time = "2019";
     GetData(first, second, time);

     btnClick();
     new CusScrollBar({
         contentSelector: '.scroll_cont1', //滚动内容区
         barSelector: '.scroll_bar1', //滚动条
         sliderSelector: '.scroll_slider1' //滚动滑块
     });
}



function GetData(first, second, time) {
    var dataLegend = [];
    var dataY1 = [];
    var dataY2 = [];
    var TableName =localStorage.getItem("type");
    var TableColor =GetCmpareTable(TableName);
    $.ajax({
        url: "../../../Ashx/Secondcommon.ashx",
        type: "post",
        data: { Action: "GetAllChooseData", firstLeverl: first, secondLevel: second, timeL: time,dataTable: TableName, colorTable:TableColor },
        dataType: "json",
        async: false,
        success: function (result) {
            //单选柱子
            if (first == "" | second == "") {
                DanxuanChart(result);
            } else {
                //多选柱子
                DuoxuanChart(result);
            }

        }
    });

}

function DanxuanChart(chartData) {
    var dataX = [];
    var dataYSon = [];
    var dataY = [];
    var color = [];
    var dataLegend = [];
    var name = "";
    var html = "<tr><td>名称</td><td>面积</td><td>时间</td></tr>";
    $.each(chartData, function (index, value) {
        html += "<tr style='background-color:rgb(" + value.R + "," + value.G + "," + value.B + ");'><td>" +value.Name+ "</td><td>" + parseFloat(value.Area).toFixed(2) + "</td><td>" + value.Year + "</td></tr>";

        dataX.push(value.Year);
        color.push("rgb(" + value.R + "," + value.G + "," + value.B + ")");
        dataLegend.push(value.Name);
        if (value.Name != name) {

            if (dataYSon.length > 0) {
                var ity = new itemY();
                ity.name = name;
                ity.data = dataYSon;
                dataY.push(ity);
                dataYSon = [];
                dataYSon.push(parseFloat(value.Area).toFixed(2));
            } else {
                dataYSon.push(parseFloat(value.Area).toFixed(2));
            }
            name = value.Name;

        } else {
            dataYSon.push(parseFloat(value.Area).toFixed(2));
        }
        if (index == chartData.length - 1) {
            var ity = new itemY();
            ity.name = value.Name;
            ity.data = dataYSon;
            dataY.push(ity);
        }
    });
    $(".scroll_cont1 table").empty();
    $(".scroll_cont1 table").append(html);

    color = uniq(color);
    dataX = uniq(dataX);
    dataLegend = uniq(dataLegend);    

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = {
        //title: {
        //    text: title,
        //    x: 'center',
        //    y: 'top',

        //    textStyle: {
        //        color: '#ffffff',
        //        fontWeight: 'normal',
        //    }
        //},
        grid:{
            left: '2%',   // 与容器左侧的距离
            //right: '5%', // 与容器右侧的距离
            top: '10%',   // 与容器顶部的距离
            bottom: '5%', // 与容器底部的距离
            containLabel: true
        },
        color: color,
        tooltip: {
            trigger: 'axis',
            confine:'hidden',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show:false,
            data:dataLegend
        },

        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel : {
                    formatter: '{value}',
                    textStyle: { //改变刻度字体样式
                        color: '#fff'
                    }
                },
                data: dataX
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine:{  
                    show:false,
                   
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel : {
                    formatter: '{value}',
                    textStyle: { //改变刻度字体样式
                        color: '#fff'
                    },
                    formatter: function (value) {
                        if (parseFloat(value) > 1000000) {
                            var yz = parseFloat(value / 1000000);
                            return yz + "百万";
                        } else {
                            return value;
                        }
                    }
                }
            }
        ],
        series: dataY
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

function DuoxuanChart(chartData) {
    var year = "", vname = "", pcode = "", sname = "", html = "<tr><td>名称</td><td>面积</td><td>时间</td></tr>";
    var color = [];
    var dataX = [];
    var Name = [];
    var dataY = [];
    var DataYSon = [];
    var DataYSon1 = [];
    $.each(chartData, function (index, value) {
        color.push('rgb(' + value.R + ',' + value.G + ',' + value.B + ')');
        Name.push(value.Name);
        dataX.push(value.Year);
        html += "<tr style='background-color:rgb(" + value.R + "," + value.G + "," + value.B + ");'><td  >" + value.Name + "</td><td>" + parseFloat(value.Area).toFixed(2) + "</td><td>" + value.Year + "</td></tr>";

        if (value.Type == "parent" & value.Name != vname) {
            //如果有子项，先添加
            if (DataYSon1.length > 0) {             
                if (value.Code.substring(0, 2) == pcode) {
                    var ity = new ItemDY();
                    ity.name = sname;
                    ity.stack = vname,
                    // ity.barWidth = 5;
                    ity.data = DataYSon1;
                    dataY.push(ity);
                } else {
                    var ity = new ItemDY();
                    ity.name = sname;
                    ity.stack = sname,
                    // ity.barWidth = 5;
                    ity.data = DataYSon1;
                    dataY.push(ity);
                }
                DataYSon1 = [];
            }


            if (DataYSon.length > 0) {
                var ity = new ItemDYP();
                ity.name = vname;
                //ity.barWidth = 20;
                ity.data = DataYSon;
                dataY.push(ity);
            }
            DataYSon = [];
            vname = value.Name;
            pcode = value.Code;
            DataYSon.push(parseFloat(value.Area).toFixed(2));

        } else if(value.Type=="parent"&value.Name==vname) {
            DataYSon.push(parseFloat(value.Area).toFixed(2));
        } else {
            //如果有子项先添加父项
            if (DataYSon.length > 0) {
                var ity = new ItemDYP();
                ity.name = vname;
               // ity.barWidth = 20;
                ity.data = DataYSon;
                dataY.push(ity);
                DataYSon = [];
            }


            if (value.Name != sname) {
                if(DataYSon1.length>0){
                    if (value.Code.substring(0, 2) == pcode) {
                        var ity = new ItemDY();
                        ity.name = sname;
                        ity.stack=vname,
                       // ity.barWidth = 5;
                        ity.data = DataYSon1;
                        dataY.push(ity);
                    } else {
                        var ity = new ItemDY();
                        ity.name = sname;
                        ity.stack = sname,
                         //ity.barWidth =5;
                        ity.data = DataYSon1;
                        dataY.push(ity);
                    }
                }
                DataYSon1 = [];
                sname = value.Name;
                DataYSon1.push(parseFloat(value.Area).toFixed(2));

            } else {
                DataYSon1.push(parseFloat(value.Area).toFixed(2));
            }        
        }
        //判断是否是最后一个
        if (index == chartData.length - 1) {
            if (DataYSon.length > 0) {
                var ity = new ItemDYP();
                ity.name = vname;
                //ity.barWidth = 20;
                ity.data = DataYSon;
                dataY.push(ity);
            }

            if (DataYSon1.length > 0) {
                var ity = new ItemDY();
                ity.name = value.Name;
                ity.stack = vname,
                //ity.barWidth = 5;
                ity.data = DataYSon1;
                dataY.push(ity);
            }
        }
    });
    $(".scroll_cont1 table").empty();
    $(".scroll_cont1 table").append(html);
   
    color = uniq(color);
    Name = uniq(Name);
    dataX = uniq(dataX);

   // alert(JSON.stringify(dataY));

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 5,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 10,
        }
    };

    option = {
        //title: {
        //    text: title,
        //    x: 'center',
        //    y: 'top',

        //    textStyle: {
        //        color: '#ffffff',
        //        fontWeight: 'normal',
        //    }
        //},
        color: color,
        tooltip: {
            trigger: 'axis',
            confine: 'hidden',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: false,
            data: Name,
            textStyle: {//图例文字的样式
                color: '#ffffff',
                fontSize: 10
            }
        },
        grid: {
            left: '2%',   // 与容器左侧的距离
            //right: '5%', // 与容器右侧的距离
            top: '10%',   // 与容器顶部的距离
            bottom: '18%', // 与容器底部的距离
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                boundaryGap:true,
                data: dataX,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        dataZoom: [
           {
               show: true,
               start: 50,
               end: 100,
               bottom: "auto"
           }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff'
                    },
                    formatter: function (value) {
                        if (parseFloat(value) > 1000000) {
                            var yz = parseFloat(value / 1000000);
                            return yz + "百万";
                        } else {
                            return value;
                        }
                        
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: dataY
    };;

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

}



var itemY = function (Name,Data) {
    return {
        type: 'bar',
        name:Name,
        data:Data
    }
}

var ItemDY = function (Name,stack,width,dataArr) {
    return {
        
            name: Name,
            type: 'bar',
            stack: stack,
          //  barWidth: width,
            data: dataArr
    }
}

var ItemDYP = function (Name,width,dataArr) {
    return {
        
        name: Name,
        type: 'bar',
     //   barWidth: width,
        data: dataArr
    }
}



//点中的显示
var clk = function () {
    return {
        show: 'true'

    }
}


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");
    });
}