/**
 * 图表+表格组件，参见showChartTable()
 */




/*var _mtssTemplate = Handlebars.compile('../widget/mtss.handlebars');*/

function _setupDateRangePicker(eid, startDate, endDate, fn, options) {
    //var now = moment();
    $('#' + eid).daterangepicker({
        "ranges": {
            "近7天": [moment().subtract(6, 'days'), moment()],
            "近15天": [moment().subtract(14, 'days'), moment()],
            "近30天": [moment().subtract(29, 'days'), moment()],
            "近90天": [moment().subtract(89, 'days'), moment()],
            "本月起": [moment().startOf('month'), moment()],
            "上月起": [moment().subtract(1, 'month').startOf('month'), moment()]
        },
        "locale": {
            "format": "YYYY-MM-DD",
            "separator": options && options.realtime == true ? " 与 " : " 至 ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "customRangeLabel": "自定义",
            "daysOfWeek": [
                "日",
                "一",
                "二",
                "三",
                "四",
                "五",
                "六"
            ],
            "monthNames": [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ],
            "firstDay": 1
        },
        "startDate": startDate,
        "endDate": endDate
    }, function (start, end, label) {
        var s = start.format('YYYY-MM-DD');
        var e = end.format('YYYY-MM-DD');
        var str = options && options.realtime == true ? " 与 " : " 至 ";
        $("#" + eid).children("span").html(s + str + e);
        fn(s, e);
    });
}

function _hasPrecent(s) {
    return s && s.substr(-1) == '%';
}
function _erasePrecent(s) {
    return s.substr(0, s.length - 1);
}
function _noPrecent(s) {
    if (_hasPrecent(s)) return _erasePrecent(s);
    else return s;
}

// 检查label最后是不是以%结尾，如果是说明该图表要以%显示
function _handleLabelPrecent(ds) {
    var ret = false;
    for (var i = 0; i < ds.length; ++i) {
        var item = ds[i];
        if (_hasPrecent(item.label)) {
            ret = true;
            item.label = _erasePrecent(item.label);
        }
    }
    return ret;
}

// 只显示图表
function _plotChart(eid, ds, options) {
    var showBars = options && options.stack == true;
    //console.log(options)
    //console.log(options.stack)


    var showRealTime = options && options.realtime == true;  //实时数据，坐标显示时分
    var showLine = !showBars;
    var isPrecent = _handleLabelPrecent(ds);
    var op;
    if (showLine) {
        op = {
            xaxes: [{
                mode: 'time',
                timezone: 'browser',
                tickFormatter: function (val, axis) {
                    if (showRealTime) return moment(val, 'x').format('HH:mm');
                    else return moment(val, 'x').format('MM-DD');
                }
            }],
            yaxes: [{
                tickFormatter: isPrecent ? function (val, axis) {
                    return val.toFixed(3) + '%';
                } :
                    function (val, axis) {
                        return val.toFixed(1);
                    }
            }],
            grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            tooltip: true,
            tooltipOpts: {
                content: "%x is %y<br>%s",
                xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d",
                shifts: {
                    x: -60,
                    y: 25
                }
            },
            shadowSize: 0,
            legend: {
                hideable: ds.length > 1
            }
        };
    } else if (showBars) {
        op = {
            xaxis: {
                mode: 'time',
                timezone: 'browser',
                tickFormatter: function (val, axis) {
                    return moment(val, 'x').format('MM-DD');
                }
            },
            yaxis: {
                tickFormatter: function (val, axis) {
                    return val.toFixed(1);
                }
                /*tickFormatter : function (value, axis) {
                 var value = value + '';
                 if (value.indexOf('.') == -1) {
                 return value + '.00';
                 } else {
                 var arr = value.split('.');
                 if (arr[1].length == 2) {
                 return value;
                 } else {
                 return value + '0';
                 }
                 }
                 }*/
            },
            series: {
                stack: true,
                group: true,
                groupInterval: 24 * 60 * 60 * 1000,
                bars: {
                    show: true,
                    align: 'center',
                    lineWidth: 0,
                    barWidth: 24 * 60 * 60 * 500
                }
            },
            grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            tooltip: true,
            tooltipOpts: {
                content: "%x is %y<br>%s",
                xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d",
                shifts: {
                    x: -60,
                    y: 25
                }
            },
            shadowSize: 0
        }
    }
    $.plot($('#' + eid + '_chartZone'), ds, op);
}

// 显示图表和表格
function _plotChartTable(eid, data, index, isChart, options) {
    if (options.type == '2m') {
        isChart = !isChart;
    }
    if (isChart) {
        // 图表
        if (options.type == 'm1') {
            var seriesData = [];
            for (var i = 0; i < data.data.length; ++i) {
                seriesData.push([data.data[i][0], data.data[i][index]]);
            }
            var ds = [{data: seriesData, label: data.columns[index]}];
            _plotChart(eid, ds, options);
        } else { // options.type == 'mn' || options.type == '1m'
            var ds = [];
            for (var i = 1; i < data.columns.length; ++i) {
                var seriesData = [];
                for (var j = 0; j < data.data.length; ++j) {
                    seriesData.push([data.data[j][0], data.data[j][i]]);
                }
                ds.push({data: seriesData, label: data.columns[i]});
            }
            _plotChart(eid, ds, options);
        }
    } else {
        $('#' + eid + '_chartZone').html('<table id="' + eid + '_chartZone_table" class="table table-striped table-bordered table-hover" width="100%"></table>');

        // 表格
        var columns = [];
        for (var i = 0; i < data.columns.length; ++i) {
            columns.push({title: data.columns[i]});
        }
        var dataset = [];
        var formatStr = 'YYYY-MM-DD';
        if (options && options.realtime == true) {
            formatStr = 'HH:mm';
        }
        //console.log(formatStr)

        for (var i = 0; i < data.data.length; ++i) {
            console.log(data)
            var line = [moment(data.data[i][0], 'x').format(formatStr)];
            //var line = [data.data[i][0]];
            console.log(line)
            for (var j = 1; j < data.data[i].length; ++j) {
                line.push(data.data[i][j]);
            }
            console.log(line)
            dataset.push(line);
        }

        // 处理%的列
        for (var i = 1; i < columns.length; ++i) {
            if (_hasPrecent(columns[i].title)) {
                columns[i].title = _erasePrecent(columns[i].title);
                for (var j = 0; j < dataset.length; ++j) {
                    dataset[j][i] = dataset[j][i].toFixed(3) + '%';
                }
            }
        }

        $('#' + eid + '_chartZone_table').DataTable({
            data: dataset,
            columns: columns,
            language: {
                search: "搜索",
                lengthMenu: "每页显示 _MENU_ 行",
                info: "显示第_START_-_END_行 共_TOTAL_行",
                infoFiltered: "(从_MAX_行中过滤)",
                paginate: {
                    first: "首页",
                    last: "末页",
                    next: "下页",
                    previous: "上页"
                }
            },
            dom: 'lBfrtip',
            buttons: ['copyHtml5', 'excelHtml5']
        });
    }

}

function _refreshChartTable(eid, data, selTabText, selModeName, options) {
    var modeName = selModeName;
    if (!modeName) modeName = $("lable[name^='" + eid + "_mode_'].active").attr("name");

    modeName = modeName.substr(modeName.indexOf("_mode_") + 6);

    var isChart = modeName == "chart";

    if (options.type == 'm1' || options.type == 'mn') {
        var tabText = selTabText;
        if (!tabText) tabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html();

        if (options.type == 'm1') {
            for (var i = 1; i < data.columns.length; ++i) {
                if (_noPrecent(data.columns[i]) == tabText) {
                    _plotChartTable(eid, data, i, isChart, options);
                    break;
                }
            }
        } else { // options.type == 'mn'
            for (var i = 0; i < data.series.length; ++i) {
                if (_noPrecent(data.series[i].title) == tabText) {
                    _plotChartTable(eid, data.series[i], null, isChart, options);
                    break;
                }
            }
        }

    } else { // options.type == '1m'
        _plotChartTable(eid, data, null, isChart, options);
    }
}

/**
 * 显示图表+表格，分为3种类型
 * options.type = m1   多项单系列，例如用户活跃-活跃系列
 * options.type = 1m   单项多系列，例如用户活跃-渠道活跃
 * options.type = mn   多项多系列，例如用户活跃-渠道活跃留存
 */
function _showChartTable(eid, data, startDate, endDate, fn, options) {
    var tabs;
    if (options.type == 'm1') {
        tabs = $.grep(data.columns, function (n, i) {
            return i > 0;
        });
    } else if (options.type == 'mn') {
        tabs = [];
        for (var i = 0; i < data.series.length; ++i) {
            tabs.push(data.series[i].title);
        }
    } else if (options.type == '1m' || options.type == '2m') {
        tabs = [options.title];
    }

    // 去掉标签最后的%
    for (var i = 0; i < tabs.length; ++i) {
        if (_hasPrecent(tabs[i])) {
            tabs[i] = _erasePrecent(tabs[i]);
        }
    }

    var selTabText = null;
    var selModeName = null;
    if ($("a[href^='#" + eid + "_tab_']").length > 0) {
        // 图表已存在，是更改日期而刷新图表
        selTabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html();
        selModeName = $("lable[name^='" + eid + "_mode_'].active").attr("name");
    }

    var source = $("#box").html();
    var _mtssTemplate = Handlebars.compile(source);

    var content = _mtssTemplate({
        chartId: eid,
        startDate: startDate,
        endDate: endDate,
        tabs: tabs
    });
    $('#' + eid).html(content);
    if (selTabText) {
        // 恢复到原来选择tab和mode
        $("a[href^='#" + eid + "_tab_'][desc='" + selTabText + "']").parent().addClass("active");
        $("a[href^='#" + eid + "_tab_'][desc!='" + selTabText + "']").parent().removeClass("active");

        $("lable[name^='" + eid + "_mode_'][name='" + selModeName + "']").addClass("active");
        $("lable[name^='" + eid + "_mode_'][name!='" + selModeName + "']").removeClass("active");
    }

    if (options.type == 'm1' || options.type == 'mn') {
        $("a[href^='#" + eid + "_tab_']").click(function (e) {
            if ($(this).parent(".active").length > 0) return;
            _refreshChartTable(eid, data, $(this).html(), null, options);
        });
    }

    $("lable[name^='" + eid + "_mode_']").click(function (e) {
        if ($(this).hasClass("active")) return;
        _refreshChartTable(eid, data, null, $(this).attr("name"), options);
    });

    // 安装日历选择组件
    _setupDateRangePicker(eid + "_datepicker", startDate, endDate, fn, options);

    _refreshChartTable(eid, data, selTabText, selModeName, options);
}

function setuptChartTable(pid, url, args, options) {
    // 构造eid，创建div
    var uris = url.split("/");
    var eid = 'id_' + uris[uris.length - 1];  // 取url最后的一段
    $('#' + pid).append('<div class="row"><div class="col-lg-12"><div class="panel panel-default" id="' + eid + '"></div></div></div>');

    // 创建内部函数，用于处理
    function func(args2) {
        $.getJSON(url, args2, function (data) {
            if (data.ret != 0) {
                console.log("ajax " + url + " fail: " + data.ret + ", " + data.msg);

                if (data.ret != 1) {
                    alert(data.msg);
                } else {
                    location.href = "../index.html";

                }
                //console.log(data)
                return;
            }
            console.log(data)
            // 转换日期
            var momentStr = options && options.realtime == true ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm";
            if (options.type == '1m' || options.type == 'm1' || options.type == '2m') {
                for (var i = 0; i < data.data.length; ++i) {
                    data.data[i][0] = (new moment(data.data[i][0], momentStr).valueOf());
                }
            } else {
                for (var i = 0; i < data.series.length; ++i) {
                    for (var j = 0; j < data.series[i].data.length; ++j) {
                        data.series[i].data[j][0] = (new moment(data.series[i].data[j][0], momentStr).valueOf());
                    }
                }
            }

            _showChartTable(eid, data, args2.startDate, args2.endDate,
                function (s, e) {
                    args2.startDate = s;
                    args2.endDate = e;
                    func(args2);
                },
                options
            );
        });
    }

    // 开始调用一次
    func(args);
}

function setuptChartTableDefault(url, args, options) {
    setuptChartTable('page-wrapper', url, args, options);
    //console.log(args)
}

$(window).load(function () {
    $(".table>thead:first-child>tr:first-child>th").attr("class", "")
});