// 学校规模情况
$(function () {
    // var data = [
    //     {name: '南关区', size: '702'},
    //     {name: '宽城区', size: '568'},
    //     {name: '朝阳区', size: '1149'},
    //     {name: '二道区', size: '955'},
    //     {name: '绿园区', size: '855'},
    //     {name: '双阳区', size: '165'},
    //     {name: '九台区', size: '412'},
    //     {name: '农安县', size: '302'},
    //     {name: '经开区', size: '1223'},
    //     {name: '净月区', size: '815'},
    //     {name: '高新区', size: '391'},
    //     {name: '汽车区', size: '1017'},
    //     {name: '榆树市', size: '183'},
    //     {name: '德惠市', size: '304'},
    // ]

    // 标题增加年份
    $('#title_text').prepend(config_now_year)

    // 渲染年份列表 在nav.js中获取select_year
    $('#select-year').append(select_year)
    $('.select').on('click', '.placeholder', function (e) {
        var parent = $(this).closest('.select');
        if (!parent.hasClass('is-open')) {
            parent.addClass('is-open');
            $('.select.is-open').not(parent).removeClass('is-open');
        } else {
            parent.removeClass('is-open');
        }
        e.stopPropagation();
    }).on('click', 'ul>li', function () {
        var parent = $(this).closest('.select');
        parent.removeClass('is-open').find('.placeholder').text($(this).text());
        $(window).attr('location', "schoolSizeInfo.html?year=" + $(this).text());
        let on_year = $(this).text();
        echartSizeInfo(on_year);

    });




    var tableDate = [];
    var typeOfBe = '小学';

    $('#Sxiaoxue').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '小学';
        tableDate = [];
        echartSizeInfo(config_now_year);

    })

    $('#Schuzhong').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '初级中学';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Sgaozhong').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '高级中学';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Sjiunian').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '九年一贯制学校';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Swanquan').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '完全中学';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    $('#Sshiernian').click(function (event) {
        $(this).addClass('active');
        $(this).siblings().removeClass('active');
        typeOfBe = '十二年一贯制学校';
        tableDate = [];
        echartSizeInfo(config_now_year);
    })

    echartSizeInfo(config_now_year);

    function echartSizeInfo(year) {

        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A023",
                "query_param": [
                    year
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "json",
            "query_group": [
                "gatherregionc"
            ]
        }), function (resport) {

            var data = resport.result;
            var indata = JSON.parse(data);
            var nameData = [];
            var size = [];

            indata.forEach((item, index) => {
                if (item.stage === typeOfBe) {
                    nameData.push(item.gatherregionc);

                    if (item.schoolno == 0) {
                        size.push(0);
                    } else {
                        size.push((Number(item.studentno) / item.schoolno).toFixed(2));
                    }

                }
            });


            nameData.forEach((item, index) => {
                tableDate.push({
                    name: item,
                    size: size[index],
                })
            });


            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echartSizeInfo'));  // 学校规模情况柱状图


            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top: '8%',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: nameData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },

                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [
                    {
                        name: '校均规模',
                        type: 'bar',
                        data: size,
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        label: {
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {
                            normal: {
                                color: '#168EFE',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },

                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            getTable();
        }, 'json');
    }

    function getTable(year) {

        $('#sizeTable').empty();
        $('#sizeTable').append(
            '<tr style="line-height: 0.35rem;"><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 15%; background: #0044bb;">序号</th><th style="text-align: center; color: #fff; border-right: 1px solid rgba(255,255,255,.2); width: 35%; background: #0044bb;">县域名称</th><th style="text-align: center; color: #fff; width: 49%; background: #0044bb;">校均规模</th></tr>'
        )

        tableDate.forEach((item, index) => {
            var newIndex = index + 1;
            $('#sizeTable').append(
                "<tr style='line-height: 0.35rem; border-bottom: 1px solid rgba(255,255,255,.2)'><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 15%;'>" + newIndex + "</td><td style='text-align: center; color: rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.2); width: 35%;'>" + item.name + "</td><td style='text-align: center; color: rgba(255,255,255,.6); width: 49%;'>" + item.size + "</td></tr>"
            )
        })

    }

})