var area_name = GetQueryString('area_name')
$(function () {

    // 标题增加年份
    $('#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', "areaTeacherStaff.html?year=" + $(this).text() + "&area_name=" + area_name);
        let on_year = $(this).text();
        echartSizeInfo(on_year);

    });


    let areaName = document.querySelector("h1");
    var url = decodeURI(window.location.href);
    var argsIndex = url.split("?area_name=");
    areaName.innerHTML = area_name + '--教师队伍发展状况';
    $('h1').prepend(config_now_year)
    // 县级以上骨干教师数量情况
    echarts_1(config_now_year);
    echarts_2(config_now_year);
    echarts_31(config_now_year);
    echarts_4(config_now_year);
    // 专任教师学历情况
    echarts_51(config_now_year);
    echarts_7(config_now_year);



    // 县级以上骨干教师数量情况
    function echarts_1(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A049",
                "query_param": [
                    year, area_name
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "echarts",
            "query_group": [
                "stage", "citycountrygroup"
            ]
        }), function (resport) {
            var data = resport.result;
            var newData = JSON.parse(data);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart1'));  // 城乡专任教师师生比

            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: newData.groups && newData.groups.length > 1?newData.groups[1]:[],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '0%',
                    top: '14%',
                    right: '0%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: newData.groups && newData.groups.length > 0?newData.groups[0]:[],
                    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)",
                            type: 'dashed'
                        }
                    }
                }],
                series: [
                    {
                        name: newData.groups && newData.groups.length > 1?newData.groups[1][0]:"",
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 1?newData.datas[0]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#168EFE',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: newData.groups && newData.groups.length > 1?newData.groups[1][1]:"",
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 1?newData.datas[1]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#8882F7',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: newData.groups && newData.groups.length > 1?newData.groups[1][2]:"",
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 2?newData.datas[2]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#FFA06C',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }, 'json')
    }
    // 专任教师数量情况(专任教师师生比)
    function echarts_2(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A045",
                "query_param": [
                    year, area_name
                    // area_name, "1"
                ]
            },
            "query_cache": 0,
            "query_count": [
                "studentno", "teacherno"
            ],
            "query_format": "echarts",
            "query_group": [
                "stage", "citycountrygroup"
            ]
        }), function (resport) {
            var data = resport.result;
            var newData = JSON.parse(data);

            var cityNum = [];// 城区
            var townNum = [];// 镇区
            var ruralNum = [];// 乡村
            newData.datas[0].map((item, index) => {
                cityNum.push((item / newData.datas2[0][index]).toFixed(2));
            })
            if (newData.datas[1]) {
                newData.datas[1].map((item, index) => {
                    townNum.push(((item / newData.datas2[1][index])).toFixed(2));
                })
            }
            if (newData.datas[2]) {
                newData.datas[2].map((item, index) => {
                    ruralNum.push((item / newData.datas2[2][index]).toFixed(2));
                })
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart2'));  // 城乡专任教师师生比

            option = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: newData.groups[1],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '0%',
                    top: '14%',
                    right: '0%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: newData.groups[0],
                    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)",
                            type: 'dashed'
                        }
                    }
                }],
                series: [
                    {
                        name: newData.groups[1][0],
                        type: 'bar',
                        data: cityNum,
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#168EFE',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: newData.groups[1][1],
                        type: 'bar',
                        data: townNum,
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#8882F7',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: newData.groups[1][2],
                        type: 'bar',
                        data: ruralNum,
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#FFA06C',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }, 'json')
    }
    // 专任教师职称情况
    function echarts_31(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A047",
                "query_param": [
                    year, area_name
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "echarts",
            "query_group": [
                "didgroup", "stage"
            ]
        }), function (resport) {
            var data = resport.result;
            var indata = JSON.parse(data);
            newDataSmall = dataToChar(indata);
            newDataMiddle = dataToChar1(indata);
            newDataHeight = dataToChar2(indata);
            // newDataHeight.map((item) => {
            //     values = Number(item.value);
            //     values += values;
            //     if (values === 0) {
            //         newDataHeight = []
            //     }
            // })

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fb1'));
            option = {
                title: [{
                    subtext: '小学',
                    left: '15%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }, {
                    subtext: '初中',
                    left: '50%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }, {
                    subtext: '高中',
                    left: '85%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top: '70%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data: indata.groups[0],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: '12',
                    }
                },
                series: [
                    {
                        name: '小学',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['15%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataSmall,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '初中',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['50%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataMiddle,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '高中',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['85%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataHeight,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                ]
            };

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


    }
    // 专任教师年龄情况
    function echarts_4(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A046",
                "query_param": [
                    year, area_name
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "echarts",
            "query_group": [
                "didgroup", "stage"
            ]
        }), function (resport) {
            var data = resport.result;
            var newData = JSON.parse(data);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart4'));  // 情况

            option = {
                //  backgroundColor: '#00265f',
                title: [{
                    text: '',
                    left: 'left',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12',
                        marginBottom: '1rem',
                    }

                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '0%',
                    top: '14%',
                    right: '0%',
                    bottom: '4%',
                    containLabel: true
                },
                legend: {
                    data: newData.groups && newData.groups.length > 1?newData.groups[1]:[],
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: newData.groups && newData.groups.length > 0?newData.groups[0]:[],
                    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)",
                            type: 'dashed'
                        }
                    }
                }],
                series: [
                    {
                        name: '小学',
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 0?newData.datas[0]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#168EFE',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: '初中',
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 1?newData.datas[1]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#FF88A8',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    },
                    {
                        name: '高中',
                        type: 'bar',
                        data: newData.datas && newData.datas.length > 2?newData.datas[2]:[],
                        barWidth: '15%', //柱子宽度
                        // barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: '#FFA06C',
                                opacity: 1,
                                barBorderRadius: 5,
                            }
                        }
                    }

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }, 'json');
    }
    // 专任教师学历情况
    function echarts_51(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A044",
                "query_param": [
                    year, area_name
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "echarts",
            "query_group": [
                "didgroup", "stage"
            ]
        }), function (resport) {
            var data = resport.result;
            var indata = JSON.parse(data);
            newDataSmall = dataToChar(indata);
            newDataMiddle = dataToChar1(indata);
            newDataHeight = dataToChar2(indata);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts51'));
            option = {
                title: [{
                    subtext: '小学',
                    left: '15%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }, {
                    subtext: '初中',
                    left: '50%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }, {
                    subtext: '高中',
                    left: '85%',
                    top: '0%',
                    textAlign: 'center',
                    subtextStyle: {
                        color: "#fff",
                        fontSize: '14'
                    }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {   //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top: '70%',
                    itemWidth: 10,
                    itemHeight: 10,
                    data: indata.groups[0],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: '12',
                    }
                },
                series: [
                    {
                        name: '小学',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['15%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataSmall,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '初中',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['50%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataMiddle,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '高中',
                        type: 'pie',
                        radius: ['25%', '35%'],
                        center: ['85%', '40%'],
                        color: ['#168EFE', '#8882F7', '#FFA06C', '#FFDB65', '#2CD1C0', '#FF88A8'],
                        label: { show: false },
                        labelLine: { show: false },
                        data: newDataHeight,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                ]
            };

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

    function echarts_7(year) {
        $.post(config_serverIp + "dataex/report/QuerySimpleGP", JSON.stringify({
            "access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
            "query": {
                "query_id": "A048",
                "query_param": [
                    year, area_name
                ]
            },
            "query_cache": 0,
            "query_count": [
                "total"
            ],
            "query_format": "json",
            "query_group": [
                ""
            ]
        }), function (resport) {
            var data = resport.result;
            var newData = JSON.parse(data);
            console.log("newData:",newData)
            var allNum;
            newData.map((item, index) => {
                if (item.didgroup === "教职工人数") {
                    // 教职工人数
                    allNum = Number(newData[index].total);
                    let TeachingStaffNumber = document.querySelector("#TeachingStaffNumber");
                    var numberArr = (newData[index].total + "").split("");
                    numberArr.map((item) => {
                        TeachingStaffNumber.innerHTML += `<div class="num_box">${item} <div class="boxfoot"></div></div>`;
                    })
                } else if (item.didgroup === "专任教师人数") {
                    // 专任教师人数
                    let FullTimeTeacherNumber = document.querySelector("#FullTimeTeacherNumber");
                    var numberArr = (newData[index].total + "").split("");
                    numberArr.map((item) => {
                        FullTimeTeacherNumber.innerHTML += `<div class="num_box">${item} <div class="boxfoot"></div></div>`;
                    })
                } else if (item.didgroup === "在编教师人数") {
                    // 在编教师人数
                    let OnTheJobTeacherNumber = document.querySelector("#OnTheJobTeacherNumber");
                    var numberArr = (newData[index].total + "").split("");
                    numberArr.map((item) => {
                        OnTheJobTeacherNumber.innerHTML += `<div class="num_box">${item} <div class="boxfoot"></div></div>`;
                    })
                } else if (item.didgroup === "女教职工人数") {
                    let womanNum = Number(newData[index].total);
                    // 女教师人数
                    let womanTeacher = document.querySelector("#womanTeacher");
                    let womanPercentage = document.querySelector("#womanPercentage");
                    womanTeacher.innerHTML = "女教师：<span class='teacher_num'>" + womanNum + "</span>";
                    womanPercentage.innerHTML = "教师占比：<span class='teacher_per'>" + (womanNum / allNum * 100).toFixed(2) + "%</span>";
                    // 男教师人数
                    let manTeacher = document.querySelector("#manTeacher");
                    let manPercentage = document.querySelector("#manPercentage");
                    manTeacher.innerHTML = "男教师：<span class='teacher_num'>" + (allNum - womanNum) + "</span>";
                    manPercentage.innerHTML = "教师占比：<span class='teacher_per'>" + ((allNum - womanNum) / allNum * 100).toFixed(2) + "%</span>";
                }
            })
        }, 'json');
    }
})