var App = function () {
    this.statisticGrid = $('#task-grid');
    this.selectedRow = [];

    this.Startup = function () {
        $('#manage').addClass('active');
        
        this.RedirectPage();
        this.ReLayout();
        this.InitDate();

        $('.statistic-type span').on('click', this.OnStatisticTypeClick.bind(this));
        $('#query-btn').on('click', this.OnQueryButtonClick.bind(this));
        $('#query-btn').trigger('click');

        window.onresize = this.ReLayout.bind(this);
    };

    this.RedirectPage = function () {
        var user = document.getElementById('user-info');
        if (user.getAttribute('class') === 'user-login')
            window.location.href = '/User/Login';
        else
            return;
    };

    this.ReLayout = function () {
        var width = $(window).width();
        var height = $(window).height();

        $('.manage-table, .manage-table .datagrid').width(width - 267);
        $('.manage-table, .manage-table .datagrid').height(height - 435);
    };

    this.OnStatisticTypeClick = function (event) {
        $('.statistic-type span').removeClass("active");
        $(event.target).addClass("active");
    };

    this.OnQueryButtonClick = function () {
        this.ReloadChartData();
    };

    this.ReloadChartData = function () {
        $.ajax({
            type: "POST",
            dataType: 'text',
            url: '/StatisticAnalysis/Query',
            data: this.GetParams(),
            success: function (result) {
                var rows = JSON.parse(result).rows;
                console.log(rows)
                var type = this.GetParams().typeCode === 'user' ? 'column' : 'spline'; 
                var name = this.GetParams().typeCode === 'user' ? '根据用户' : '根据机构';
                var xAxises = this.GetSeries(rows, name).xAxises;
                var max = this.GetSeries(rows, name).max;
                var pieValues = this.GetSeries(rows, name).pieSeries;
                var defaultValues = this.GetSeries(rows, name).defaultSeries;

                var defaultData = this.GetElement(type, name, defaultValues);
                var pieData = this.GetElement('pie', '占比', pieValues);

                this.InitChart(defaultData, xAxises, rows, name, max);
                this.InitPieChart(pieData, name);
            }.bind(this)
        });
    };

    this.GetElement = function (type, name, values) {
        return {
            type: type,
            name: name,
            data: values
        };
    };

    this.GetSeries = function (result, name) {
        var max = null;
        var xAxises = [];
        var count = [];
        var pieSeries = [];
        var defaultSeries = [];
        
        result.forEach(function (item, index) {
            count.push(item.ComputeCount);
        }.bind(this));

        result.forEach(function (item, index) {
            var sum = count.reduce(function (prev, next) { return prev + next; });

            max = count.reduce(function (prev, cur) { return Math.max(prev, cur); });
            
            xAxises.push(name === '根据用户' ? item.UserName : item.OrgName);
            defaultSeries.push(item.ComputeCount);
            pieSeries.push({
                name: name === '根据用户' ? item.UserName : item.OrgName,
                y: this.formatDecimal(String(item.ComputeCount / sum) / 100) * 100
            })
        }.bind(this))

        return {
            max: max,
            xAxises: xAxises,
            pieSeries: pieSeries,
            defaultSeries: defaultSeries
        };
    };

    this.formatDecimal = function (value) {
        value = value.toString()
        let index = value.indexOf('.')
        if (index !== -1) {
            value = value.substring(0, 5 + index + 1)
        } else {
            value = value.substring(0)
        }
        return parseFloat(value).toFixed(5)
    };

    this.InitChart = function (series, xAxises, values, name, max) {
        Highcharts.chart('chart', {
            chart: {
                backgroundColor: 'rgba(0, 0, 0, 0)'
            },
            title: {
                useHTML: true,
                text: name.slice(2) + '计算次数统计' + '<br/>' + moment(this.GetParams().fromTime).format('YYYY年MM月DD日') + ' 至 ' + moment(this.GetParams().toTime).format('YYYY年MM月DD日'),
                style: {
                    color: '#ffffff',
                    fontFamily: '微软雅黑'
                }
            },
            subtitle: {
                text: '计算次数',
                style: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                },
                verticalAlign: 'top',
                align: 'left',
                y: 50
            },
            credits: {
                enabled: false
            },
            colors: ['#00d5f6'],
            xAxis: {
                categories: xAxises,
                labels: {
                    style: {
                        color: '#ffffff',
                        fontSize: '14px',
                        fontFamily: '微软雅黑'
                    },
                },
                lineColor: '#234979',
                crosshair: true
            },
            yAxis: {
                title: {
                    text: null
                },
                //max: max * 3,
                labels: {
                    style: {
                        color: '#ffffff',
                        fontSize: '14px',
                        fontFamily: '微软雅黑'
                    },
                },
                gridLineColor: '#234979'
            },
            tooltip: {
                useHTML: true,
                crosshair: true,
                backgroundColor: '#002145',
                style: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                },
                formatter: function () {
                    return '<b style="margin-bottom: 5px">' + this.x + '</b>' + '<br/>' +
                        '计算次数：' + '<b>' + this.y + '</b>' + '次' + '<br/>' +
                        '最后计算时间：' + app.GetNames(values, this.x, name);
                }
            },
            legend: {
                itemStyle: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                },
                itemHoverStyle: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                }
            },
            plotOptions: {
                column: {
                    pointWidth: 30,
                    borderRadius: 3,
                    borderColor: ''
                },
                pie: {
                    center: [1000, 100],
                    size: 200,
                    tooltip: {
                        headerFormat: '<b>{point.key}</b></br>',
                        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>',
                        useHTML: true,
                        crosshair: true,
                        backgroundColor: '#002145',
                        style: {
                            color: '#ffffff',
                            fontSize: '14px',
                            fontFamily: '微软雅黑'
                        }
                    },
                },
                series: {
                    color: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, '#266cb9'],
                            [1, '#00d5f6']
                        ]
                    }
                }
            },
            series: [series]
        });
    };

    this.GetNames = function (values, name, type) {
        var time = values.find(function (item) {
            return (type === '根据用户' ? item.UserName : item.OrgName) === name;
        }).LastComputeTime;
        return moment(time).format('YYYY-MM-DD');
    };

    this.InitPieChart = function (series, name) {
        var firstColors = ['#00d5f6', '#97e6af', '#e4e189', '#dc9884', '#8c83dc', '#7aa9da', '#b7d2ff', '#88f187', '#e3ea79', '#e29f6f']; 
        var lastColors = ['#266cb9', '#229625', '#b3ae15', '#bd3d17', '#3324a9', '#1538e4', '#b7d2ff', '#3ac720', '#cad619', '#d2691f'];
        Highcharts.chart('pie-chart', {
            chart: {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                type: 'pie'
            },
            title: {
                text: name.slice(2) + '占比',
                style: {
                    color: '#ffffff',
                    fontFamily: '微软雅黑'
                },
                y: 30
            },
            credits: {
                enabled: false
            },
            tooltip: {
                headerFormat: '<b>{point.key}</b></br>',
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>',
                useHTML: true,
                crosshair: true,
                backgroundColor: '#002145',
                style: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                }
            },
            legend: {
                itemStyle: {
                    color: '#ffffff',
                    fontFamily: '微软雅黑'
                },
                itemHoverStyle: {
                    color: '#ffffff',
                    fontSize: '14px',
                    fontFamily: '微软雅黑'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    borderWidth: 0,
                    cursor: 'pointer',
                    dataLabels: {
                        useHTML: true,
                        enabled: true,
                        color: '#ffffff',
                        style: {
                            fontSize: '14px',
                            fontFamily: '微软雅黑',
                            textOutline: 'none'
                        }
                    },
                    showInLegend: false
                }
            },
            series: [series]
        },function (chart) {
            SetGradientColor(chart);
        });
        function SetGradientColor(chart) {
            var pointsList = chart.series[0].points;
            for (var i = 0; i < pointsList.length; i++) {
                chart.series[0].points[i].update({
                    color: {
                        linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 },
                        stops: [
                            [0, Highcharts.Color(firstColors[i]).setOpacity(1).get('rgba')],
                            [1, lastColors[i]]
                        ]
                    }
                });
            }
        }
    };

    this.InitDate = function () {
        $('#from-date').datebox({
            panelAlign: 'right',
            panelWidth: 200,
            panelHeight: 230,
            showSeconds: false,
            currentText: '现在',
            onSelect: function (date) {
                var startTime = date.getTime();
                var endDate = $('#to-date').val();

                if (endDate) {
                    var endTime = new Date(endDate).getTime();
                    if (startTime > endTime)
                        alert('开始日期不能大于结束日期，请重新选择。');
                }
            }
        });

        $('#to-date').datebox({
            panelWidth: 190,
            panelHeight: 230,
            panelAlign: 'right',
            showSeconds: false,
            currentText: '现在',
            onSelect: function (date) {
                var endTime = date.getTime();
                var startDate = $('#from-date').val();

                if (startDate) {
                    var startTime = new Date(startDate).getTime();
                    if (startTime > endTime)
                        alert('结束日期不能小于开始日期，请重新选择。');
                }
            }
        });

        $("#from-date").datebox('setValue', moment().add(-30, 'days').format('YYYY/MM/DD'));
    };

    this.GetParams = function () {
        return {
            typeCode: $('.statistic-type span.active').attr('type'),
            fromTime: $("#from-date").datetimebox('getValue'),
            toTime: $("#to-date").datetimebox('getValue'),
            page: 1,
            rows: 1000
        };
    };
};

var app = null;
$(document).ready(function () {
    app = new App();
    app.Startup();
});