new Vue({
    el: '#all',
    data: function() {
        return {
            token: "",
            url: utils.adminUrl + "/api",
            url1: "http://localhost:50011/api",
            nav: ["老师活跃度", "班级活跃度", "家长活跃度"],
            navIndex: 0,
            maxNumber: 100,
            month: 7,
            mounthList: [{
                    value: 1,
                    selected: false
                },
                {
                    value: 2,
                    selected: false
                },
                {
                    value: 3,
                    selected: false
                },
                {
                    value: 4,
                    selected: false
                },
                {
                    value: 5,
                    selected: false
                },
                {
                    value: 6,
                    selected: false
                },
                {
                    value: 7,
                    selected: true
                },
                {
                    value: 8,
                    selected: false
                },
                {
                    value: 9,
                    selected: false
                },
                {
                    value: 10,
                    selected: false
                },
                {
                    value: 11,
                    selected: false
                },
                {
                    value: 12,
                    selected: false
                },
            ],
            data6: []
        }
    },

    mounted: function() {
        var now = new Date(); //当前日期
        var nowMonth = now.getMonth(); //当前月
        this.month = nowMonth + 1
        for (let i = 0; i < this.mounthList.length; i++) {
            this.mounthList[i].selected = false
            if (this.mounthList[i].value == this.month) {
                this.mounthList[i].selected = true
            }
        }
        this.token = sessionStorage.getItem("token"); //与API交互
        //班级运行情况
        this.getData();
        this.changeWindow();
        this.navTo()
    },
    methods: {
        // 请求数据
        // request({
        //     type,
        //     url,
        //     data = {},
        //     headers = {
        //         'content-type': 'application/json',
        //         'Authorization': "Bearer " + this.token,
        //     }
        // }) {
        //     return new Promise(resolve => {
        //         $.ajax({
        //             type,
        //             url,
        //             data,
        //             headers,
        //             success(data) {
        //                 resolve(data);
        //             }
        //         });
        //     });
        // },
        changeWindow: function() {
            window.onresize = function() {
                setTimeout(function() {
                    window.location.reload();
                }, 200)
            }
        },
        navTo: function () {
            document.getElementById("html5").href = '/WebApp/EverydayData/wisdomMedic.html?EquipmentID=' + window.guid
            document.getElementById("html1").href = '/WebApp/EverydayData/everdayData.html?EquipmentID=' + window.guid
            document.getElementById("html2").href = '/WebApp/EverydayData/kindergartenThings.html?EquipmentID=' + window.guid
            document.getElementById("html3").href = '/WebApp/EverydayData/careEducation.html?EquipmentID=' + window.guid
            document.getElementById("html4").href = '/WebApp/EverydayData/homeInteraction.html?EquipmentID=' + window.guid

        },
        getData: function() {
            this.Charts1();
            this.charts2();
            this.charts3();
            this.getdata3(1, this.month);
            this.charts4();
            this.charts5();
        },
        changeMounth: function(e) {
            for (let i = 0; i < this.mounthList.length; i++) {
                this.mounthList[i].selected = false
                if (this.mounthList[i].value == e.target.value) {
                    this.mounthList[i].selected = true
                    this.month = this.mounthList[i].value
                }
            }
            this.getdata3(1, this.month);
        },
        change: function(i) {
            this.getdata3(i, this.month)
        },
        getdata3: function(n, month) {
            this.navIndex = n
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getactivestatistics", {
                        EquipmentID: window.guid,
                        Type: n,
                        Month: month
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            var listNumber = []
                            that.data6 = []
                            for (let i = 0; i < data.data.length; i++) {
                                listNumber.push(data.data[i].Number)
                                that.data6.push({
                                    id: i + 1,
                                    name: data.data[i].Name,
                                    number: data.data[i].Number,
                                })
                            }
                            // that.maxNumber = Math.max(...listNumber)
                            that.maxNumber = Math.max.apply(null, listNumber)
                            if (that.maxNumber <= 100) {
                                that.maxNumber = 100
                            } else if (that.maxNumber > 100) {
                                that.maxNumber = that.maxNumber + 100
                            }
                            setTimeout(function() {
                                for (let i = 0; i < that.data6.length; i++) {
                                    $('.changeWidth' + i).width((that.data6[i].number / that.maxNumber) * 100 + '%')
                                        // $('.changeWidth')[i].style.width = (that.data6[i].number / that.maxNumber) * 100 + '%'
                                }
                            }, 0);

                        }
                    }
                );


            });
        },
        Charts1: function() {
            var chartDom = document.getElementById('echarts1');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = [11, 11, 7, 7]
            var data2 = [8, 8, 6, 11]
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getbabydynamicstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1 = data.data.Dynamic
                            data2 = data.data.Show
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['班级动态', '宝宝秀场'],
                                x: 'center', //可设定图例在左、右、居中
                                y: 'top', //可设定图例在上、下、居中
                                padding: [0, 0, 0, 45], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                                textStyle: {
                                    fontSize: 14, //字体大小
                                    color: '#ffffff' //字体颜色
                                }
                            },
                            grid: {
                                left: '5%',
                                right: '6%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                data: ['发布数', '回复数', '点赞数', '收藏数'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    // inside: true,
                                    textStyle: {
                                        color: '#00FFFF'
                                    }
                                },
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: "{value}人",
                                    color: '#fff'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#081868'],
                                    }
                                },
                            }],
                            series: [{
                                    name: '班级动态',
                                    type: "bar",
                                    barWidth: 20,
                                    barGap: "0%",
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 1, 0, 0, [
                                                { offset: 0, color: '#0336FF' },
                                                { offset: 0.7, color: '#01B4FF' },
                                                { offset: 1, color: '#01B4FF' }
                                            ]
                                        ),
                                    },
                                    data: data1
                                },
                                {
                                    name: '宝宝秀场',
                                    type: "bar",
                                    barWidth: 20,
                                    barGap: "0%",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 1, 0, 0, [
                                                    { offset: 0, color: '#EF6E18' },
                                                    { offset: 0.7, color: '#FCC204' },
                                                    { offset: 1, color: '#FCC204' }
                                                ]
                                            ),
                                        }
                                    },
                                    data: data2
                                }
                            ]
                        };
                        option && myChart.setOption(option);
                    }
                );
            });

        },
        charts2: function() {
            let chartDom = document.getElementById('echarts2');
            let myChart = echarts.init(chartDom);
            let option;
            let className = ['十班', '六班', '八班', '九班', '四班', "五班", "二班", "一班", "三班"]
            let todayData = [112, 100, 157, 186, 187, 112, 100, 157, 186]
            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getbabydynamicstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            className = []
                            todayData = []
                            for (let i = data.data.ClassList.length - 1; i >= 0; i--) {
                                className.push(data.data.ClassList[i].Name)
                                todayData.push(data.data.ClassList[i].Number)
                            }
                        }

                        option = {
                            tooltip: {
                                trigger: 'axis',
                                //axisPointer: {
                                //    type: 'shadow'
                                //},
                                formatter: function(params) {
                                    return params[0].name + "：" + params[0].value + "条";
                                },
                            },
                            legend: {
                                data: ['发布数量'],
                                x: 'right', //可设定图例在左、右、居中
                                y: 'top', //可设定图例在上、下、居中
                                icon: "circle",
                                textStyle: {
                                    fontSize: 14, //字体大小
                                    color: '#ffffff' //字体颜色
                                }
                            },
                            grid: {
                                top: "10%",
                                left: '4%',
                                right: '8%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                show: false,
                            },
                            yAxis: {
                                type: 'category',
                                data: className,
                                axisLabel: {
                                    color: '#FFFFFF'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['rgba(0,0,0,1)']
                                    }
                                },
                            },
                            series: [{
                                name: '发布数量',
                                type: 'bar',
                                barWidth: 14,
                                data: todayData,
                                //顶部数字展示pzr
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius: [100, 100, 100, 100],
                                        label: {
                                            show: true,
                                            position: "right",
                                            color: "#fff"
                                        }
                                    },
                                    normal: {
                                        //柱形图圆角，初始化效果
                                        barBorderRadius: [100, 100, 100, 100],
                                        // color:new echarts.graphic.LinearGradient(
                                        //     0, 0, 1, 0,
                                        //     [
                                        //         {offset: 0, color: '#011135'},
                                        //         {offset: 0.5, color: '#01367b'},
                                        //         {offset: 1, color: '#0178e9'}
                                        //     ]
                                        // ),
                                        color: "#40E7FB",
                                        label: {
                                            show: true,
                                            position: "right",
                                            color: "#fff"
                                        }
                                    }
                                },
                            }]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });

        },
        charts3: function() {
            var chartDom = document.getElementById('echarts3');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = [320, 240, 350, 380, 180, 120]

            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/geteducationalresourcesstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1 = data.data
                        }
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '5%',
                                right: '6%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                data: ['儿童故事', '趣味手工', '育儿知识', '共同备课', '教师成长', ' 教师分享'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    // inside: true,
                                    textStyle: {
                                        color: '#00A9AB'
                                    }
                                }
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    formatter: "{value}",
                                    color: '#00A9AB'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#081868'],
                                    }
                                },
                            }],
                            series: [{
                                name: '班级动态',
                                type: "bar",
                                barWidth: 30,
                                barGap: "0%",
                                itemStyle: {
                                    normal: {
                                        label: {
                                            formatter: "{c}",
                                            show: true,
                                            position: "top",
                                            textStyle: {
                                                fontWeight: "bolder",
                                                fontSize: "12",
                                                color: "#fff"
                                            }
                                        },
                                        color: new echarts.graphic.LinearGradient(
                                            0, 1, 0, 0, [
                                                { offset: 0, color: '#0336FF' },
                                                { offset: 0.7, color: '#01B4FF' },
                                                { offset: 1, color: '#01B4FF' }
                                            ]
                                        ),
                                    }
                                },
                                data: data1
                            }]
                        };
                        option && myChart.setOption(option);
                    }
                );
            });

        },
        charts4: function() {

        },
        charts5: function() {
            var chartDom = document.getElementById('echarts5');
            var myChart = echarts.init(chartDom);
            var option;
            var data1 = [120, 132, 101, 134, 90, 230, 210, 223, 432, 122, 230, 431]
            var data2 = [420, 282, 391, 634, 890, 530, 210, 391, 634, 890, 530, 210]
            var data3 = [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
            var data4 = [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
            var data5 = [820, 932, 901, 934, 1290, 1030, 1320, 901, 934, 1290, 830, 1320]

            let that = this
            layui.config({
                base: "/webconfig/layuiJs/"
            }).use(['jquery', 'form', 'laydate', 'utils', 'basic', 'layui_list'], function() {
                AjaxGet(
                    that.url + "/admin/bigdata/getotherstatistics", {
                        EquipmentID: window.guid
                    },
                    function(res) {
                        // console.log(res, 132)
                        var data = res
                        if (data.data) {
                            data1 = []
                            data2 = data.data.ClassNotice ? data.data.ClassNotice : []
                            data3 = data.data.PaternityTask ? data.data.PaternityTask : []
                            data4 = []
                            data5 = data.data.RecipeMsg ? data.data.RecipeMsg : []
                        }
                        option = {
                            color: ['#C38000', "#009393", "#16A0E8", "#DE2D68", "#F6E47D", "#F6E47D"],
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['园务通知', '班级通知', '亲子任务', '班级提醒', '食谱留言', "园长信箱"],
                                top: "0",
                                left: 'center',
                                textStyle: {
                                    fontSize: 12, //字体大小
                                    color: '#ffffff' //字体颜色
                                }
                            },
                            grid: {
                                top: "10%",
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    color: '#fff'
                                },
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                            }],
                            yAxis: [{
                                type: 'value',
                                axisLabel: {
                                    color: '#fff'
                                },
                                splitLine: {
                                    show: false
                                },
                            }],
                            series: [{
                                    name: '园务通知',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    sampling: 'average',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(195, 128, 0, 0.8)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(195, 128, 0, 0)'
                                        }])
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: data1
                                },
                                {
                                    name: '班级通知',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    sampling: 'average',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(0, 147, 147, 0.8)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(0, 147, 147, 0)'
                                        }])
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: data2
                                },
                                {
                                    name: '亲子任务',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    sampling: 'average',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(22, 160, 232, 0.8)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(22, 160, 232, 0)'
                                        }])
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: data3
                                },
                                {
                                    name: '班级提醒',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    sampling: 'average',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(222, 45, 104, 0.8)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(222, 45, 104, 0)'
                                        }])
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: data4
                                },
                                {
                                    name: '食谱留言',
                                    type: 'line',
                                    smooth: true,
                                    symbol: 'circle',
                                    symbolSize: 5,
                                    sampling: 'average',
                                    areaStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgba(246, 228, 125, 0.8)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(246, 228, 125, 0)'
                                        }])
                                    },
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: data5
                                }
                            ]
                        };

                        option && myChart.setOption(option);
                    }
                );
            });
        },
    }
})