/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * Special Declaration: These technical material reserved as the technical secrets by AGREE
 * TECHNOLOGY have been protected by the "Copyright Law" "ordinances on Protection of Computer
 * Software" and other relevant administrative regulations and international treaties. Without
 * the written permission of the Company, no person may use (including but not limited to the
 * illegal copy, distribute, display, image, upload, and download) and disclose the above
 * technical documents to any third party. Otherwise, any infringer shall afford the legal
 * liability to the company.
 */

/**
 * 定制版的柱状图表 jqeury.flot.barframe.js
 * Created by huang.dy on 2015/8/12.
 */
define(["adoreapp/widget/BaseWidget", "adoreapp/widget/EventHub", "adoreapp/util/VisibilityChangeUtil"],
    function (BaseWidget, EventHub, VisibilityChangeUtil) {

        return BaseWidget.extend(function (base) {
            return {
                _initWidget: function (attrs) {
                    this.jqueryNode = $(attrs.template).attr("id", this.id);
                    this.placeholder = this.jqueryNode.find(".flot_placeholder");
                    this.isLayout = false;
                    var own = this;
                    this.originalWidth = window.innerWidth;
                    this.hadVisibilityListener = false;
                    $(window).bind("resize." + this.id, function (e) {
                        if (window.innerWidth !== own.originalWidth) {
                            own.originalWidth = window.innerWidth;
                            if (own.jqueryNode.is(":visible")) {
                                //可见状态下直接刷新
                                own.createChart(own.data);
                            } else {
                                //不可见状态下添加visibleListener，可见时再刷新
                                if (!own.hadVisibilityListener) {
                                    own.hadVisibilityListener = true;
                                    VisibilityChangeUtil.addVisibilityListener(own.jqueryNode, function (visible) {
                                        if (visible) {
                                            own.createChart(own.data);
                                            VisibilityChangeUtil.removeVisibilityListener(own.jqueryNode);
                                            own.hadVisibilityListener = false;
                                        }
                                    });
                                }
                            }
                        }
                    });
                },

                /**
                 *  var creatDate = [];
                 var creatDepict = [];
                 for (var i = 0; i <= 4; i++) {
                         creatDate.push([i, 100 * i, 0, 0]);//为y轴数据存放数组
                        creatDepict.push([i, "" + (i + 1)]);//为x轴说明存放数组
                  }
                 var plot_ = createChart([creatDate, creatDepict], "placeholder");
                 * @param data
                 */
                _setData: function (attrs) {
                    var createDate = [];
                    var createDepict = [];
                    var datas = attrs.datas;
                    if (!datas || datas.length === 0) {
                        return;
                    }
                    //datas的数据结构为["数值a1;数值b1;说明1","数值a2;数值b2;说明2",...]
                    var strArr, i;
                    for (i = 0; i < datas.length; i++) {
                        strArr = datas[i].split(";");
                        if (strArr.length === 3) {
                            createDate.push([i, parseInt(strArr[0]), 0, parseInt(strArr[1])]);
                            createDepict.push([i, strArr[2]]);
                        }
                    }
                    this.data = [createDate, createDepict];
                    if (this.isLayout) {
                        this.createChart(this.data);
                    }
                },

                _clear: function () {
                    this._setData({datas: []});
                },

                _layout: function () {
                    base._layout.call(this);
                    this.isLayout = true;
                    if (this.data) {
                        this.createChart(this.data);
                    }
                },

                createChart: function (data) {
                    this.placeholder.unbind();
                    //$("#" + placeholderId);
                    $.plot(this.placeholder,
                        [{color: "#01B1EC", data: data[0], label: "队列"}],
                        {
                            series: {
                                bars: {
                                    horizontal: false,
                                    fill: 1,
                                    show: true,
                                    barWidth: 0.3,
                                    align: "center",
                                    lineWidth: null,
                                    frames: {
                                        show: true,
                                        shadow: {
                                            show: "long"// boolean or "long":long shadow
                                        }
                                    },
                                    warnings: {
                                        show: true,
                                        fillColor: "#ED5198"
                                    }
                                },
                                lines: {
                                    show: false
                                }
                            },
                            grid: {
                                borderWidth: 1
                            },
                            zoom: {
                                interactive: false
                            },
                            pan: {
                                interactive: true
                            },
                            xaxis: {
                                ticks: data[1],//data[1]为x轴说明存放数组
                                tickLength: 1,
                                color: "black",
                                min: -1, max: data[1].length,
                                axisLabelUseCanvas: true,
                                axisLabelFontSizePixels: 12,
                                axisLabelFontFamily: 'Verdana, Arial',
                                axisLabelPadding: 10,
                                zoomRange: null,  // or [ number, number ] (min range, max range) or false
                                panRange: [-1, data[1].length]   // or [ number, number ] (min, max) or false

                            },
                            yaxis: {
                                zoomRange: null,  // or [ number, number ] (min range, max range) or false
                                panRange: false  // or [ number, number ] (min, max) or false
                            },
                            legend: {
                                show: true
                            },
                            statement: {
                                show: true,
                                height: 40,
                                xaxis: "",
                                yaxis: "最长等待（分钟）"
                            }
                        });
                },

                _dispose: function () {
                    $(window).unbind("resize." + this.id);
                    base._dispose.call(this);
                }
            }
        })
    })
